# Templating Techniques for Web-pages

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

* [HTML component](https://readme.directual.com/web-pages/components/html-code)
* [Markdown component](https://readme.directual.com/web-pages/components/rich-text)
* [Link Button component](https://readme.directual.com/web-pages/components/link-button)
* [Hint component](https://readme.directual.com/web-pages/components/hint)
* [Cards](https://readme.directual.com/web-pages/components/legacy-components/cards), [Kanban](https://readme.directual.com/web-pages/components/kanban) 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](https://readme.directual.com/data/data-structures) or [global variables](https://readme.directual.com/scenarios/using-variables/global-constants) in your component, enable this feature in the component settings:

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4Nnmtk9_gFGWOddsf6%2Fuploads%2FXkIa4IlKvib858am2Eou%2Ftemplate_engine.png?alt=media\&token=6326338f-42b4-495a-b541-9523b0780050)

### 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](https://readme.directual.com/web-pages/setting-up-pages-layout/subpages-and-url-parameters) 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 %}