# 6. View Components
### Add 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:
{% hint style="info" %}
**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](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/heading), [info](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/info), [text-inputs](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/text-input) and [buttons](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/button) work (Tip: A full list of all the UI components in JourneyApps is available [here](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components)).
{% endhint %}
### Add a Heading and Info Text
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`.
```xml
Welcome to the Punch List App
A list of all the punches that have not yet been taken care of are shown below
```
### Add a List
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:
```xml
```
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:
```xml
```
### Add the Variables
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:
```xml
```
Your `main.view.xml` should like this now
```xml
Welcome to the Punch List App
A list of all the punches that have not yet been taken care of are shown below
```
### Refresh and Test the App
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:
{% tabs %}
{% tab title="Desktop" %}
{% endtab %}
{% tab title="Mobile" %}
{% endtab %}
{% endtabs %}
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](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/list) and [GPS capturing](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/capture-coordinates) later in the tutorial, and you could also check out the [full list of UI components](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components) in the reference documentation for details on how all of JourneyApps' UI components work.