Using and Editing Plugin Templates

The template files that the plug-in provides are what will be turned into the source of the forms components. As each framework defines its components in a different way, template files will be different for every framework, perhaps even for every framework version.

The template files from a plug-in are copied out of the plug-in folder and into the templates folder specified during the Forms CLI project initialisation. This is so that the developers can modify these templates individually.

Sample Angular Template

<ng-form name="<%interaction%>" class="bm-form" <%#showWhen%>ng-show="<%moduleName%>.<%showWhen%>()"<%/showWhen%>
                  <%#hideWhen%>ng-hide="<%moduleName%>.<%hideWhen%>()"<%/hideWhen%>>
  <%&header%>
  <%&elements%>
  <%&footer%>

  <ng-transclude ng-transclude-slot="pagination"></ng-transclude>
  <button ng-click="<%moduleName%>.onSaveClick(<%moduleName%>.model)" ng-show="!<%moduleName%>.isSubForm">Submit</button>
</ng-form>

As every framework is different, there is no "one size fits all" solution. Some frameworks might not need templates (for example, the JSON plug-in simply writes JSON to files), others might need a handful of templates, others might need a mix of Javascript and HTML, JSX or even CSS.

As per mustache documentation, we have a very simple AngularJS ng-form element which uses the properties of the passed in element to create a HTML string representation of a form. It is important to note that whilst we have a data normalization step, the data that is passed to processForm can be freely modified by you to match your mustache templates.

Use The Template Helper Module

To make working with templates easier, we have the Template Helper Module, with common functions for reading, writing, and storing templates for use during the transformation. We also use the mustache template library, with the delimiters set to <% %> rather than {{ }} so that we don't interfere with libraries like AngularJS, whose built in system also uses {{ }}.

The next section will go into detail on what functionality the Template Helper Module provides.

Next Step

Template Helper Module