Templates

Lite Client

Trail: PROIV Documentation > Developer > Lite Client > Developer and Lite Client > Lite Client Only Features > Templates

The Lite Client uses templates to build the document objects it requires in the browser. All the PROIV screen components have their own templates.

The Default Cycle Template

The first template used is the one that defines the PROIV Screen Cycle and this is little more than a single 'DIV' node that will hold all the PROIV screen components.  

The Popup Window Template

The default template for popup windows defines a panel with a header holding a title and a close button, and a body. The panel is positioned based on the PROIV Start Row and Width properties but these are only guide lines and do not define an absolute position. The size of the panel is based roughly on the PROIV Height and Width properties.

The panel can be dragged using the mouse. Note that the panel is modal with the browser so the user can not act on other components in the browser while the window is open.

The Default Component Templates

The default component templates are designed to work in a responsive way that means that the browser re-sizes and moves the component based on the size of the browser but the templates do put the components in a row and a column structure using the PROIV Row and Column properties.

Components with the same PROIV Row number will be in the same browser row and rows with no components will not be present. This means that the PROIV Row property really just defines the vertical order of the components not their absolute position.

The PROIV Column property is used to align the component in the row. This is done by inserting empty fields in the rows so that components with the same Column number line up vertically. Note that the browser is defining the width of a component so that the screen behaves in a responsive way based on the size of the browser. This means that the PROIV Column property just defines the component order and vertical alignment not their absolute position.

Changing the Template

The templates are defined in a JSON file with each template being a top level JSON object. To change a template you can do one of the following things:

1. Alter the contents of a template in the default JSON file.
2. Add a new object to the default JSON file with a new name. The PROIV components each have a Template Name property that can be set to reference the new template object in the templates file.
3. Add a new JSON template file using the default names but under a new group name. The PROIV Main Cycle has a Template Group property that can be set to reference the new template group and all components will first look in the new group for their template before looking in the default template file.

By changing the templates you can completely alter the look and layout of the components created by a PROIV function to match your HTML page.

Comment on this topic

Topic ID: 870032