---
title: "view"
description: "Overview"
permalink: /docs/build/ui-components/all-ui-components/view/
---
# 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

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

```

## Standard Attributes

### `title`

<SyntaxCard type={"string"} defaultValue={"unset"} />

Text to appear as the title of your view. It can be a [format string](/docs/app-features/xml-format-strings/) or returned from a JS/TS [`$:function`](/docs/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:

![](./media/spaces-2f9tchlr67elhbojpvhhud-2fuploads-2f8znnx01vhtbfgcnk1uau-2fscreen-20shot-202022-08-31-20at-203.43.02-20pm-cf74164c.png)

## Advanced Attributes

### `mode`

<SyntaxCard type={["back","close"]} defaultValue={"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.

**my\_jobs.view\.xml**

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

</view>

```

![mode="back" (default)](./media/spaces-2f9tchlr67elhbojpvhhud-2fuploads-2ffema0vdgi7axybztrcpz-2fview-mode-back-2ed47a85.png)

![mode="close"](./media/spaces-2f9tchlr67elhbojpvhhud-2fuploads-2fnarsggefejikatjkoe9h-2fview-mode-close-991bf0a0.png)

### `view-enter-animation`

<SyntaxCard type={["slide-up","none"]} defaultValue={"slide-up"} />

Controls the animation used when the view content enters. Set `view-enter-animation="none"` to disable the default slide-up enter animation for a view.

Set this attribute in the `config.json` theme to disable the animation globally.

**main.view\.xml**

```xml
<view title="Home" view-enter-animation="none">
    ...
</view>
```

### `on-back`

<SyntaxCard defaultValue={"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`](/docs/app-features/calling-js-functions-from-xml/). By returning `false`, navigation can be prevented.

See more details:

- [js ts events](/docs/build/ui-components/js-ts-events/)

**main.view\.xml**

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

**main.js**

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

<Info title={"Further reading"}>

Also see [this section](/docs/get-started/journeyapps-fundamentals/view-navigation/#overriding-the-built-in-back-button) about overriding the default built-in back button behavior.

</Info>

### `on-navigate`

<Info title={"Version compatibility"}>

`on-navigate` was introduced in version **4.58.4** of the JourneyApps Container.

</Info>

<SyntaxCard defaultValue={"unset"} />

**Triggered when**: The user [navigates](/docs/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`](/docs/app-features/calling-js-functions-from-xml/). This function should return `true` to subsequently navigate, or `false` to prevent navigation.

See more details:

- [js ts events](/docs/build/ui-components/js-ts-events/)

**main.view\.xml**

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

**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
}
```