What are Views?

A brief introduction to views in JourneyApps

A view represents a single screen on an app. Each application has at least one view. Each view is uniquely identified in the application by its path.

A view consists of two parts:

• XML code describing all the components on the view, and

• JavaScript/TypeScript code containing all the logic for the view.

Example

<?xml version="1.0" encoding="UTF-8"?>
<view title="New Asset">
<param name="room" type="room" />

<var name="asset" type="asset"/>

<text-input label="Make" bind="asset.make" required="true"/>
<text-input label="Model" bind="asset.model" required="false"/>

<single-choice-dropdown label="Condition" bind="asset.condition"/>

<button type="primary" label="Save" on-press="link.next_step()"/>
</view>

Options

• title - required - A formatted XML string representing the title displayed in the screen.

• on-back - A link to a function that will trigger whenever the user presses the built in back button.

Nested Tags

Please note that the order of these is important - it must be in the order of: <param> and <var> first and then the UI components.

• param View parameter. See the field reference for a list of possible types.

• var View variable. See the field reference for a list of possible types.

Main View

Each application must have a main view. The main view is the view with the path main. This view is automatically created for you when you create a new application.

Components

Each visual element in the view is called a component. A component could be some text displayed to the user, an input field, a button, or many other possibilities. For a complete list of available UI components, see the Components reference documentation.

Here is an example with a heading and info field:

<view title="Main Menu">
    <heading>A heading</heading>
    <info>Hello, world!</info>
</view>

Variables and input fields

To define an input field (such as a text-input) on a view, a variable must be declared in which the value can be stored. The variable in which the value is stored is specified with the bind attribute. The type of the variable must also be specified (see the field reference for a list of possible types).

For example:

<view title="Main Menu">
    <var name="some_value" type="text"/>

    <text-input label="Enter a value" bind="some_value" />
</view>

View structure and links

When navigating links, a stack is built containing the history of the views. An analogy is a stack of paper, in which each view is a sheet of paper. When a view is opened, the sheet of paper is added on the stack. When the user closes the view (for example by pressing back), the view is removed from the stack.

Circular links are not allowed - the same view may not appear twice on the stack. To return to the main menu, dismiss links may be used. These are special links that remove views from the stack, instead of adding them to the stack.

For details on defining links, see the View Navigation section.