6. View Components
After you've defined your Data Model, the next step in building a JourneyApps application is to create the layout of your various views (screens), and then finally to add logic to them. Therefore, go to the Views Workspace of your Punch List app. You'll see that you once again start out with the main and nav views.
Let's recap the requirements for our Punch List app:
App Design: Construction Punch List
First and foremost, our app needs to display a list of all the open punch list items, so that the construction contractor or building tenant/owner can quickly see which problems still need to be attended to. In the Hello World app, you saw how basic UI components like headings, info, text-inputs and buttons work (Tip: A full list of all the UI components in JourneyApps is available here).
Let's start by adding a heading and some info text to the main view of our punch List app again. In the
main.view.xml add the following, and remember the order in which you specify components in the xml is important. Parameters first, then Variables and finally View Components.<heading>Welcome to the Punch List App</heading>
<info>A list of all the punches that have not yet been taken care of are shown below</info>
Now let's add an
object-list component which will display a list of all our open punch items. If you type object (below your heading and info text) and then highlight and select the auto-complete suggestion for object-list, OXIDE will add the basic xml structure for the object-list component to your view. This will give you an object-list template like this:<object-list label="" query="" bind="" empty-message="Your items will appear here" required="false" />
You can now populate the properties in the
object-list as follows:- bind — if the user selects an item in the list (by tapping on it), this determines in what variable the selected item will be stored (recall that Variables are used to store data locally/temporarily in a view). Let's make it
selected_item. - query — this is the variable containing the whole list of items that we want to display. Let's make it
open_punches. - label — this is the label that will be shown above the list. Let's make it Open Punches.
- empty-message — this is the message that will be shown to the user if the list of items is empty. Let's make it: There are no open punches at the moment.
- required — this relates to input validations, which we'll discuss later in the tutorial (you can ignore it for now).
Your completed
object-list should now look like this:<object-list label="Open Punches" query="open_punches" bind="selected_item" empty-message="There are no open punches at the moment." required="false" />
We've made reference to variables called
selected_item and open_punches, but we haven't defined them yet (you should see some warnings / errors in OXIDE telling you the same). Let's do that now.Underneath "Variables go here" in your view, you can type
var to auto-complete your selected_item variable, and give it a type of item. Recall that open_punches is a list of multiple items — therefore it needs to be a special kind of variable — a query. Type query and then auto-complete and fill it in similarly:<!-- Variables go here: -->
<var name="selected_item" type="item"/>
<var name="open_punches" type="query:item" />
Your
main.view.xml should like this now<?xml version="1.0" encoding="UTF-8"?>
<view title="Punch List">
<!-- Parameters go here: -->
<!-- Variables go here: -->
<var name="selected_item" type="item" />
<var name="open_punches" type="query:item" />
<!-- Components go here: -->
<heading>Welcome to the Punch List App</heading>
<info>A list of all the punches that have not yet been taken care of are shown below</info>
<object-list label="Open Punches" query="open_punches" bind="selected_item" empty-message="There are no open punches at the moment." required="false" />
</view>
Refresh your desktop and/or mobile app.
(If your device is still showing the Hello World app then simply execute the Test App action again. On mobile, you may need to Leave App before you can scan the QR code again. To do this open the App, click on the three dots in the top right corner and choose Diagnostics. Then click on the three dots again and choose Leave App. This will unlink (unenroll) your container from the current app and allow you to link it to a new app - in this case the Punch List App)
Your app should now look like this:
Desktop
Mobile
Of course, there are currently no punches — we'll get to that in the next sections. This section should give you a taste of how UI Components in JourneyApps typically work. We'll cover some of the other components such as list and GPS capturing later in the tutorial, and you could also check out the full list of UI components in the reference documentation for details on how all of JourneyApps' UI components work.
Last modified 1yr ago