Extensions

Extensions are reusable components that you can place in designated areas around your theme. This could be a calender, a gallery, a list of team members, a products list, etc...

Say you had a products list that one theme supports and you spend a lot of time filling out your product information. If you switch themes and that theme doesn't support those products or supports products in a different way, you wouldn't be able to see your products. By having having your products contained in an extension you can reuse those products on different themes without your information being lost

Creating an extension area

When you build a theme you designate that certain areas will contain extensions. You do this with this directive.

<div mb-list-area="areaName"></div>

The areaName is important because when the extensions are loaded they will be loaded in the area where they were saved.

Let's add this to our theme.

<div class="container" ng-controller="homeController">
  <div class="row">
    <div class="col-sm-12">
      <mb-edit ng-model="page.title" single="true"></mb-edit>
    </div>
    <div class="col-sm-12">
      <choose-image property="body1">
        <img mb-src="body1" class="img-responsive"/>
       </choose-image>
     </div>
    <div class="col-sm-12">
      <mb-edit ng-model="page.content.body1"></mb-edit>
    </div>
    <div class="col-sm-12">
      <div mb-list-area="body1"></div>
    </div>
  </div>
</div>

Create the extension

Extensions are folders in the public/extensions/ folder that reusable html that can be placed arround the site. They also require an index.js file that will contain any imported scripts such as stylus, css, directives, html or jade.

First let's create a new folder in our extension folder called

team-members/

Next let's add the index.js file.

index.js

This will be the code that goes inside it

// inject jade
// end inject jade

// inject js
// end inject js

// inject stylus
// end inject stylus

By having these comments we tell meanbase to import scripts, styles, and templates automatically for us.

Finally we add our extension.

team-members-extension.html

It must end with

-extension.html

or

-extension.jade

Extracting the name from the file

Meanbase will automatically take the first part of the extension name and convert it into a friendly readable name for you. So if your file it called.

my-first-ext-extension.html

The name for that extension will be

my first ext

They contain reusable html snippets and are provided a property to add their data to. Here will be the extension we make.

<div class="list-wrapper">
  <div class="container" ng-init="member = {}">
    <div class="row">
      <div class="col-lg-4 col-sm-4 relative" ng-repeat="member in listItem.data.items">
        <div class="text-center">
          <mb-choose-image property="image" belongs-to="member">
            <img mb-src="image" belongs-to="member" class="img-responsive"/>
          </mb-choose-image>
          <div mb-edit ng-model="member.name" single="true"></div>
        </div>
      </div>
      <mb-list-add class="col-lg-4 col-sm-4 text-center" item="member" list="listItem.data.items" label="team member"></mb-list-add>
    </div>
  </div>
</div>

listItem. - Provided to you by meanbase. By convention you attach your data onto it's data property. There is already an items property on the data property that you can attach a list of items to if you need it.

mb-list-add - Creates a button that when clicked will add a new list item.

NOTE: Both mb-list-add and mb-list-remove require their contains to have relative positioning. Meanbase already has a class for this called, relative

Now rerun

npm run watch

And start the server.

npm start

Preview

Now load the cms. And a button should appear saying add new list. Click it, then click the next button that appears saying "Add team member".

Adding a screenshot

Finally we take a screenshot of our extension in use, rename the screenshot to

screenshot.png

Or whatever file extension it had and include it in our extension folder.

Seeing the extension

Now rerun

npm run watch

And start the server.

npm start

In the background, meanbase will create a label for this extension and save data to the custom database leaving your extension's data independent of any theme.