# view

### Overview

`view` is a special XML component which is similar to the `body` element in HTML. All variables and UI components are contained within the `view` block. It is required within each `view.xml` file, and no code (apart from the file's XML declaration) may exist outside of it.

### Basic Example

{% code title="main.view\.xml" %}

```xml
<?xml version="1.0" encoding="UTF-8"?>
<view title="My first view">
    <!-- Your view variables and UI components go here, example: -->
    <var name="first_name" type="text:name" />
    
    <text-input label="First Name" bind="first_name" required="false" />
     
</view>

```

{% endcode %}

## Standard Attributes

### `title`

**Optional**

**Type**: `string`

**Default**: unset

Text to appear as the title of your view. It can be a [format string](https://docs.journeyapps.com/reference/app-features/xml-format-strings) or returned from a JS/TS [`$:function`](https://docs.journeyapps.com/reference/app-features/calling-js-functions-from-xml) to make it dynamic.

Given the [basic example](#basic-example) above, the title will appear on a device as follows:

<figure><img src="https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2F8zNnx01vHtbFgCnK1UAu%2FScreen%20Shot%202022-08-31%20at%203.43.02%20PM.png?alt=media&#x26;token=6a616d2e-02f4-4438-90b3-1a2a04aed1b8" alt=""><figcaption></figcaption></figure>

## Advanced Attributes

### `mode`

**Optional**

**Type**: `back` | `close`

**Default**: `back`

By default a view will show a "back" icon in the top left corner, indicating to the user how to navigate back to the previous view. This can be overwritten to show a "close" icon when setting `mode="close"` on the view.

{% code title="my\_jobs.view\.xml" %}

```xml
<?xml version="1.0" encoding="UTF-8"?>
<view title="My jobs" mode="close">

</view>

```

{% endcode %}

<figure><img src="https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2FfEma0vDGI7AxybZTRCpz%2Fview-mode-back.png?alt=media&#x26;token=1a7b0317-eeb7-4264-84de-cda9eebfa310" alt=""><figcaption><p>mode="back" (default)</p></figcaption></figure>

<figure><img src="https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2FNaRSGgEFEJiKAtjkoE9h%2Fview-mode-close.png?alt=media&#x26;token=997c9f01-3391-420c-bac6-06c7bd2f0eec" alt=""><figcaption><p>mode="close"</p></figcaption></figure>

### `on-back`

**Optional**

**Default**: unset

**Triggered when**: The user presses the built-in back button on a view (situated in the top-left corner of a view)

**Event parameter**: None

`on-back` is an event that calls a JS/TS [`$:function`](https://docs.journeyapps.com/reference/app-features/calling-js-functions-from-xml). By returning `false`, navigation can be prevented.

See more details:

{% content-ref url="../js-ts-events" %}
[js-ts-events](https://docs.journeyapps.com/reference/build/ui-components/js-ts-events)
{% endcontent-ref %}

{% code title="main.view\.xml" %}

```xml
<view title="Home" on-back="$:onFunction()">    
    ...
</view>
```

{% endcode %}

{% code title="main.js" %}

```javascript
function onFunction() {
    notification.info("on-back was triggered");
}
```

{% endcode %}

{% hint style="info" %}
**Further reading**

Also see [this section](https://docs.journeyapps.com/reference/get-started/journeyapps-fundamentals/view-navigation#overriding-the-built-in-back-button) about overriding the default built-in back button behavior.
{% endhint %}

### `on-navigate`

{% hint style="info" %}
**Version compatibility**

`on-navigate` was introduced in version **4.58.4** of the JourneyApps Container.
{% endhint %}

**Optional**

**Default**: unset

**Triggered when**: The user [navigates](https://docs.journeyapps.com/reference/get-started/journeyapps-fundamentals/view-navigation) to another view using `navigate.link` or `navigate.replace`

**Event parameter**: None

`on-navigate` is an event that calls a JS/TS [`$:function`](https://docs.journeyapps.com/reference/app-features/calling-js-functions-from-xml). This function should return `true` to subsequently navigate, or `false` to prevent navigation.&#x20;

See more details:

{% content-ref url="../js-ts-events" %}
[js-ts-events](https://docs.journeyapps.com/reference/build/ui-components/js-ts-events)
{% endcontent-ref %}

{% code title="main.view\.xml" %}

```xml
<view title="Home" on-navigate="$:onFunction()">    
    <button label="My Jobs" on-press="$:navigateJobs()" validate="false" />
</view>
```

{% endcode %}

{% code title="main.js" %}

```javascript
function onFunction() {
    notification.info("on-navigate was triggered");
    return true;
}

function navigateJobs() {
    navigate.link('my_jobs'); // This executes if the on-navigate function returns true
}
```

{% endcode %}