# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://readme.directual.com/template-system/basics-of-template-system/templating-techniques-for-web-pages.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.