> For the complete documentation index, see [llms.txt](https://readme.directual.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://readme.directual.com/template-system/basics-of-template-system/templating-techniques-for-web-pages.md).

# Templating Techniques for Web-pages

You can use Templating in the following components of the [Directual web-page builder](/web-pages/portal.md):

* [HTML component](/web-pages/components/html-code.md)
* [Markdown component](/web-pages/components/rich-text.md)
* [Link Button component](/web-pages/components/link-button.md)
* [Hint component](/web-pages/components/hint.md)
* [Cards](/web-pages/components/legacy-components/cards.md), [Kanban](/web-pages/components/kanban.md) components — custom HTML view

{% hint style="info" %}
Cards and Kanban don't require connecting additional endpoints. Custom HTML view operates directly with object fields.
{% endhint %}

### Connecting API-endpoint and turning on Templating engine

To use [data](/data/data-structures.md) or [global variables](/scenarios/using-variables/global-constants.md) in your component, enable this feature in the component settings:

![](/files/RQ65TKiGIT9TPVnI4IUA)

### Applying Templating for component content

#### Global variables

Apply it in the same way as in scenarios.

```javascript
{{GlobalVar.myGlobalVar}}
```

#### WebUser fields

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

#### URL parameters

[URL parameters](/web-pages/setting-up-pages-layout/subpages-and-url-parameters.md) used for subpages may also be displayed in components

```javascript
{{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}}
```

{% hint style="info" %}
You may apply complex HTML for building beautiful custom pages.
{% endhint %}