HTML Templates

Technologies / Software Engineering Techniques / Software Engineer Views / Custom Controls (label) / Custom HTML Panel

Custom HTML interfaces sometimes require a non-trivial amount of Java Script code that manipulates the HTML DOM. Some of the HTML content needs to be localizable. Such code can be difficult to maintain.

HTML templates let you define the HTML markup separately from localized or database values, and separately from the code that renders the data into HTML.

Define non-localizable HTML content inside the template element in the AXVW file. Each template must have an ID that is unique within the view. Here is a simple template that displays a workflow step title:

<template id="stepTemplate">
<h3>Workflow step: Required</h3>
</template>


You can use the same template to display different workflow steps by replacing the hard-coded step title with a variable:

<template id="stepTemplate">
<h3>Workflow step:

UndefinedNameError: reference to undefined name 'step' (click for details)
Callstack:
    at (Archibus/Archibus_System_Help/Software_Engineer/User_Interface_Extensions/1295_Custom_UI_Overview/1301-Use_HTML_templates), /content/body/div/div/p[9]/span/span, line 1, column 2
</h3>
</template>


You can also use a template to display a list of workflow steps, using the each loop:

<template id="stepTemplate">

ParseError: EOF expected (click for details)
Callstack:
    at (Archibus/Archibus_System_Help/Software_Engineer/User_Interface_Extensions/1295_Custom_UI_Overview/1301-Use_HTML_templates), /content/body/div/div/p[11]/span[1]/span, line 1, column 7

<div class="workflowStep">
<h3>Workflow step:
UndefinedNameError: reference to undefined name 'title' (click for details)
Callstack:
    at (Archibus/Archibus_System_Help/Software_Engineer/User_Interface_Extensions/1295_Custom_UI_Overview/1301-Use_HTML_templates), /content/body/div/div/p[11]/span[2]/span, line 1, column 2
</h3>
</div>
ParseError: invalid DekiScript (click for details)
Callstack:
    at (Archibus/Archibus_System_Help/Software_Engineer/User_Interface_Extensions/1295_Custom_UI_Overview/1301-Use_HTML_templates), /content/body/div/div/p[11]/span[3]/span, line 1, column 1

</template>


Templates defined in an AXVW file are not displayed right away. You need to write Java Script code to:

  • Provide the values of variables for the template, and
  • Render the template into some HTML DOM element on the page.

afterInitialDataFetch: function() {
// get the template object
var template = View.templates.get('stepTemplate');
// prepare the data values for the template
var data = {
workflowSteps: [
{title: getMessage('requested')},
{title: getMessage('approved')},
{title: getMessage('completed')},
]
};
}


If you have one or more templates that are used in several application views, you should put the templates into a reusable AXVW file and load it as any other reusable content into each view.

Example view: http://localhost:8080/archibus/schema/ab-products/solutions/programming/html/ab-ex-html.axvw