What are Views?
A brief introduction to views in JourneyApps
Last updated
A brief introduction to views in JourneyApps
Last updated
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.
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.
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.
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.
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:
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:
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.
