Tutorials → How to Build Apps
In the previous example, we created
The init() Function
You'll notice that every View in JourneyApps has a an
A Simple Query
In the Main View of your Snag List app, you can create a query that pulls all snag list items and stores them in
open_snags as follows:
DB.itemis automatically made available because we've defined the
itemObject Type in our Data Model.
The query we've now added will show all snag list items in our
<list> — however, we only want to show snags that have "Open" as their status (as defined in our Data Model).
This can be done by filtering the query. To retrieve only the "Open" snags, change your code to the following:
The first argument of the
where() function is a string specifying the condition of how we want to match objects, and the arguments thereafter are the values that we are actually matching against.
Use Numeric Indexes for Enums
When filtering on an attribute that is an enum, we use the index of the enum option we're interested in, which starts counting at zero. Our Data Model had "Open" and "Closed" as the enum options for the "Status" attribute of our snag list items, therefore
0 is the index for "Open". Therefore, the above Query will filter snag items to those that are "Open".
You can learn more about filtering in detail in the reference documentation available here.
Global Automatic Data Sync
Recall from the Global Automatic Data Sync section of the JourneyApps: The Big Picture tutorial that mobile devices running your app automatically synchronize data from the cloud datastore to their local storage memory for offline access. This offline cached data is what is queried when you run a Query.
Let's see that data sync in action. First, go to the Deploy tab of your Snag List app:
Then click on Browse Data under Testing. This will open a new tab/window. After the redirect, click on Item in the lefthand sidebar and you should see the following:
The "Testing" App Backend is where you manage the data for your "Testing" environment (which is the environment that is used while you're developing apps in the JourneyApps Editor — recall the Components of JourneyApps and Environments and Staged Deployment sections of the JourneyApps: The Big Picture tutorial.)
Create Some Data
So if you add some snag list items here, they will be synchronized to your mobile device.
Add a couple of items by hitting Create New Item:
You should now see your items like this:
See Synchronized Data on Device
Now refresh your mobile app. Remember that the
init() function containing your query runs when you open a view, so to run the query again, you need to re-open your Main View.
- On Android devices, press the built-on "back" button and open your mobile app again.
- On iOS devices and Chrome, stop your app and start it again.
In summary, you've seen how JourneyApps' built-in automatic data synchronization works, and how you can use a Query to pull data from the local/offline mobile datastore and display it in your Views.
Let's get to work on fleshing out the functionality of our Snag List app in the next sections.