Creating Custom Components

A component is a container, it simply contains generic properties that define how the component should be rendered (see Component-Properties). It does however also have a plugin bound to it that determines the function of the component. One plugin could make it act as a simple text container while another could render charts, it's all up to you.

TemplateEngine comes bundled with a few plugins that perform common functions such as placing text, embedding video but that doesn't stop you from creating your own plugins.

Simply follow the steps below to add your own creation!

###Preplanning

1. Decide on what your component should do
2. Decide on a name
3. Decide on a category - Is it a generic component? Navigation? Social media? You can use any name but the following already exist and can be used: - basic - navigation - socialmedia

###Create files

1. Add the component's controller under templateengine/controller/component/ {CATEGORYNAME} / {COMPONENTNAME}.js
2. Add the component's view under templateEngine/view/component/ {CATEGORYNAME} / {COMPONENTNAME}.html

Define your Controller

You can place whatever you want in the code file, as long as you define a controller responsible for your component like so:

angular
  .module("Cerberus.TemplateEngine")
  .controller("[YOURUNIQUECONTROLLERID]", [
    "Dependency1",
    function (dependency1, ...) {
      // Do stuff
    }
  ]);

Make sure you specify a unique controllerId as this will be used to identify your component and inject it. TemplateEngine uses namespaces (i.e. Cerberus.TemplateEngine.Controller.Component.{CATEGORY}.{COMPONENTNAME}) as identifiers but you are free to use your own.

###Register your component as available The final step is to let both TemplateEngine and TemplateEditor know that your component exists. This step depends on the type of provider you are using for fetching templates.

• templateLocalStorageProvider: Add your component info to the collection returned by the getComponentPlugins method in templateEngine/service/templateLocalStorageProvider.js. Make sure that the id property is unique.
• templateRestProvider/TemplateEngine.Backend solution: Add your control info to the Cerberus.TemplateEngine.ControlPlugin table