Template Builder

The built-in Template enables FintechOS engineers to easily add HTML structures containing attributes, relations or predefined UI elements without writing code, all from the user interface.

The Template Builder is available in the following attributes:

Entity

Attribute

EntityForm

Template

Entity Form Section

Template

Custom Form (Custom User Journey)

Template

Html Widget

Html

How to Access the Template Builder

You can access the Template Builder, as follows:

  • For forms, form sections and custom forms, from the Template tab of the Code section (tab), by either right-clicking anywhere in the template (HTML field) and selecting HTML Editor, or from the Tools menu by clicking HTML Editor.
  • For HTML Widgets, from the Html tab of the Code section.
Tip: You can also access it from an HTML field when inserting or editing entity records, but only with limited functionality. Using the Template Builder when inserting or editing records, you will not be able to:
  • Change or remove attributes and relations
  • Configure relations
  • Add automation scripts to UI elements
  • No automatically generated on click events after adding UI elements

The Template Builder contains two sections, as follows:

  • Attributes & Relations which allows you to define a grid template and fill it in with attributes and relation available on the entity.
  • UI which allows you to configure and add UI elements.

When using the Template Builder on custom user journeys and HTML widgets, it will have only one sections, UI.

How to use the Template Builder

This section walks you through the steps needed to create an HTML template in FintechOS using the Template builder:

1. Define the grid template

From the row configuration drop-down, select the desired row templates:

Click the Add to bottom button. The selected row template will be added at the bottom of your template. You can add as many rows as you want in any order.

Once you’ve added the first row, you are can also add rows by clicking the Add above Add above and Add below Add below buttons available on each row. By clicking any of these buttons, a pop-up will be displayed where you need to select the row template.

Add row popover

To move a row in the grid, click the up or down buttons available on each row.

Move Row

To delete a row from the grid, click the Delete button available on the right-side of the row.

Once, you’ve finished building the grid, you can start adding attributes on the grid.

2. Add attributes

To add an attribute, click the column where you want to add the attribute. A pop-up will be displayed.

Attribute Controls

From the drop-down select the desired attribute and click the Add button.

To change an attribute from a column, click on the column. In the pop-up, from the drop-down, select the new attribute and click the Add button.

To remove an attribute from a column, click on the column and in the pop-up, click the Remove button.

IMPORTANT! Do not use the same attribute twice; otherwise errors might occur.

3. Configure and add relations

Prerequisites:

  • You should have at least one entity with attributes, besides the entity for which you create the HTML template.
  • You should add one relationship between the entity on which you define the HTML template and the other entity(ies).

To add relations, you first need to add relation container rows. The Template Builder provides two options for adding relation container rows:

  • From the row configuration drop-down, by clicking Relation Container Row.
  • Adding a Relation Container Row above or below a desired row (available only after adding the first relation container row).

To add a relation, click on the relation container row. A pop-up will be displayed which allows you to configure the relation. Select the desired relation. The configuration for that relation will be displayed.

Configure the relation based on your needs. The table below describes the configuration options.

Option

Description

Edit Mode

Sets the mode of the inline editing on the view. Click the checkbox and from the drop-down below, select the desired options:

  • cell - allows you to edit view records cell by cell.
  • row - allows you to edit a view record by editing the cells in a row then saving the view record changes.
  • batch - allows you to edit several view records and then save the changes in batch.

Collapse

The text displayed as a collapse panel. Click the checkbox and in the field below, provide the name of the collapse panel.

View The name of the view from another entity to be displayed.

Form

If the entity from which you render the view has multiple forms and you want a specific form on edit directly from this view, select this checkbox and from the Insert Form drop-down, select the desired form.

Insert Form

If the entity from which you render the view has multiple forms and you want a specific form on insert directly from this view, from the Insert Form drop-down, select the desired form name.

No Header

Does not display the view header.

No Filter

Does not display the view filtering / search.

No Insert

Does not display the Insert button on the view toolbar.

Note: Do not select No Insert when using Form. and Insert Form; otherwise, issues might occur.

No Delete

Does not display the Delete button on the view toolbar.

No Export

Does not display the Export button on the view toolbar.

No Refresh

Does not display the Refresh button on the view toolbar.

No Toolbar

Does not display the view toolbar.

Once you have finished adding and configuring relations, add the relation template by clicking the Insert Relation button.

IMPORTANT! Do not intersect two relation layouts mixing them by moving relations row up and down; otherwise, errors might occur.

4. Insert Template

After setting up the attributes and relations, all you have to do is click the Insert template button.

5. Configure and Add UI Elements (if any)

In the Template field, right-click in the place where you want to add an UI element and select HTML Editor. The Template Builder will be displayed by default on section Attributes & Relations. Click the UI tab.

Note: The Template Builder currently supports only buttons, but in future FintechOS releases, we will extend the list of UI elements.

To configure the button color, pick a color from the color picker:

Click on the desired button template. The Configure button pop-up will be displayed which allows you to configure the desired button.

Button Config

The table below describes the button configuration settings.

Setting

Description

ID

The ID added on the button. The field is mandatory

Label

The text that will be shown on the button. The field is optional.

Actionable

Optionally, select from the drop-down the automation script to be executed when users click on the button.

To insert the button, click the Add button.

Note: After adding the button, an on click event will be generated from the button configuration settings in the After Events tab of the entity form.

Button JS

When removing from teh template a button that has an action attached to it, the on click event generated in the After Events tab will not be removed. It might be useful in case you accidentally removed the button.