Page Comparison

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.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 the templates (for example, if every form element needs a certain CSS class, or some custom code needs to be put into every javascript controller) on a per project basis, and use their version control system to version the templates with the project.

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 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.

...