Templating Techniques for Web-pages

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

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.


WebUser fields


URL parameters

URL parameters used for subpages may also be displayed in components


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

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

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

// the result may look like
Steve Jobs
Project Apple

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

 - {{firstName}} {{lastName}} launched {{project_id.title}}

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

The principle is similar to the one used for scenarios

 - {{title}} {{city}}

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

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

You may apply complex HTML for building beautiful custom pages.

Last updated