Templating Techniques for Web-pages

You can use Templating in the following components of the Directual web-page builder:

• HTML component

• Markdown component

• Link Button component

• Hint component

• Cards, Kanban components — custom HTML view

Cards and Kanban don't require connecting additional endpoints. Custom HTML view operates directly with object fields.

Connecting API-endpoint and turning on Templating engine

To use data or global variables in your component, enable this feature in the component settings:

Applying Templating for component content

Global variables

Apply it in the same way as in scenarios.

{{GlobalVar.myGlobalVar}}

WebUser fields

{{id}}
{{role}}
{{firstName}}

URL parameters

URL parameters used for subpages may also be displayed in components

{{HttpRequest.paramName}}

Objects from API-endpoint. Dealing with the first object – contentHead

If you connect API-endpoint, you can deal with objects it provides.

{{#contentHead}}
    {{firstName}} {{lastName}}
    Project {{project_id.title}} // here project_id is a link
{{/contentHead}}

// the result may look like
Steve Jobs
Project Apple

Objects from API-endpoint. Dealing with a list of objects – content

{{#content}}
 - {{firstName}} {{lastName}} launched {{project_id.title}}
{{/content}}

// the result may look like (for 2 objects, provided by API-endpoint)
 - Steve Jobs launched Apple
 - Bill Gates launched Microsoft

Handling arrayLink

The principle is similar to the one used for scenarios

{{#arraylink_field}}
 - {{title}} {{city}}
{{/arraylink_field}}

// the result may look like (for 2 objects in the arrayLink field)
 - Apple Cupertino
 - Microsoft Seattle

Handling booleans

Similar to Templating in scenarios

/ shows if is_vip == true
{{#is_vip}}vip{{/is_vip}}

// shows if is_vip == false
{{^is_vip}}not vip{{/is_vip}}

You may apply complex HTML for building beautiful custom pages.