The Data View screen allows us to build more complex apps such as: Touristic guides, Hotel/Restaurants guides and every App which contains many data and images to show and to organize into categories.

 

 

 

This kind of screen allows us to create and import databases to our app and to display that data in different ways, in the form of 'views'.  

 

 

If we click on the green button, up on the view, we can Rename, Clone, Delete or make the view as 1st view of the Data View.

 

                                               

 

 

For the first step, we have to use a Data View screen and create a DATABASE .

The database creation is explained in the Database section here.

 

NOTE: Once database is created, the different views will be available based on the type of data used in the database.

If we don’t have a field type Location or type Date, then we will not be able to choose a Map, an Augmented Reality or a Calendar view.

 

Let’s explain how to display the database data through the different types of views.

 

We can create this kind of database with 4 fields:

Cities --> type Text

Images --> type Local Image

Info --> type Text

Location --> type Location  

 

 

 

Once we have filled in all of the cells of the database with the resources (Texts, Images, Coordinates), we are ready to show that data in some views. In this case we have to add a view, such as the one in the following image:

 

 

 

LIST VIEW 

 

 

In this example, we want to create a list of Cities so that when the user will click on the button of a specific city, he will be redirected to the details of that City where we will insert the following information:

City Name

City Image

City Description

City Location

 

We will add the following views, based on the type of data we want to show for each city.

 

 

 

As we can see in the above image, the view shows new elements on the right (Pink Icons) which represent the database fields that we had already inserted (Cities, Images, Info, Location).

 

 

 

All you have to do is design the layout by dragging the database elements to the screen and the List View will generate repetitions of the inserted elements as many times as registries are, to show from your database:

 

 

 

 

In the example above we have dragged to the screen the following elements in the mentioned order:

• Table with 1 cell. Shown in green
• Dynamic database text elements (Cities). Shown in yellow. The result will be like the following:

 

                                                    

 

 

With more registries (cities) in our database, the list would be longer.

 

 

 

DETAIL VIEW

 

 

Once we have created the previous List View, we will include a link on each registry that redirects to the Detail View for that registry. 

This is the reason why we are going to assign the action: Go to View --> Detail_2 to the City text so that, when a user will click on the name of the city, the detail of this city will be opened to show all the specific information.

 

 

 

The Detail View, unlike the List View, doesn't display many rows from a database. It only shows one register/row.

You can drag to the screen the following elements to create the desired look of the view:

 

• Static elements (always grey):

                   

 

 

• Dynamic Database elements (always pink):

                    

 

 

All we have to do is to design the layout of the screen by dragging the elements to the screen just as in the List View.

 

 

 

In the example above we have dragged to the screen the following elements in the mentioned order:

 

• Dynamic database text elements (Cities). Shown in light blue.
• Dynamic database image elements (Images). Shown in pink.
• Dynamic database text elements (Info). Shown in yellow.
• A Table with 2 cells. Shown in green.
• A Static image element that has an action attached to it, allowing it to link to the Map View (red rectangle), shown in red.

 

The result will be something like this:

 

           

 

So when you have opened a Detail View, it will always show the content for one exclusive registry. If you called the Detail View from the "Madrid" button of the List View, the Detail View will only show data from the Madrid registry/row of the database.

 

 

 

MAP VIEW

 

 

The MAP VIEW elements, both static or from the database, are dragged onto the white tag on the map as shown below.

 

 

In this case the Map View shows us the Capital of a Country. The Country shown will depend on which Detail View we called the Map View.

In this example, if we call the map from the Detail View 'Madrid City,' we will see the Madrid Map.

In the white tag we will insert some elements:

 

 

 

 

 

• Dynamic database image elements (Images). Shown in pink.
• A Table with 2 cells, shown in green.
• A Static Image element, inserted in the table, that has an action attached to it, allowing to link to the Web View. Shown in red.

 

 

 

A Static image element, inserted in the table, that has an action attached to it, allowing to link to the Augmented Reality View, shown in yellow.

 

 

 

 

The result will be something like this:

 

 

To learn how to create a GPS-based App, see the related article: “How to create a GPS based App”

 

 

 

 

AUGMENTED REALITY VIEW

 

 

As we saw above, we assigned to the right icon of the table in the Map view the action: Go to View ar_1.

 

          

 

So, when the user will click on that button, he will be redirected to an Augmented Reality View.

 

 

 

The Augmented Reality will search for information about where we are through the GPS, and will activate the camera phone to show what we see ahead.

 

 

 

 

NOTE: Augmented reality is not supported by HTML5

The result will be something like this:

 

 

 

 

 

 

WEB VIEW

 

 

We have already assigned the action: Go to View: Web_1 to an icon in the Map View.

 

        

 

 

In this way, when the user will click on that icon, he will be redirected to a new view, the Web View, to see a web page related to the registry (City) that we want to have the info for.

 

First we will add another column to the database.

It will be a type Text column that we will display in the app.

In this example we will add a web site with touristic information, related to each city we have in the database.

 

 

 

 

When we open the Web View, we will see in the Key Field all the text type fields of the database.  

 

 

 

We will choose to display the WEB one, to show the web sites inserted in the database.

 

                                         

 

The result will be something like this:

 

 

 

 

 

 

GALLERY VIEW

 

 

To create a Gallery View we will create a simple Option List screen with 5 buttons on it. Each button is going to lead us to a specific Gallery View of its own Data View screen.

So we will create 5 Data View pages (“Rome”, “Madrid”, “Paris”, “Berlin”, “Dublin”). Each page will have a Gallery View which will display images from a shared database (in our example “Gallery”).  

We will add some images to the database. As we have 5 Cities to show, we will create 5 new registries (columns) type Local Image, to show in our Gallery View. Each column will contain the images of a specific City:

 

 

 

 

 

We will create then 5 Gallery Views in each Data View, one for each city.  

On each Gallery View you are asked which field you want to display. So for the “Madrid” Data View screen, we will create a Gallery view which shows the Madrid column:

 

 

 

Once we have created the 5 Data View screens and, on each Screen, one Gallery View linked the Rome, Madrid, Paris, Berlin and Dublin columns respectively, all that we now need to do is to create the Option list screen and link the buttons to each Photo screen created:

 

 

 

 

The result will be something like this:

 

                

 

 

Each picture can be zoomed in by tapping it. You can slide through the gallery both to the left and the right.

NOTE: The gallery view only can be used with Local Images. This View doesn’t support remotely stored (CMS/Cloud) images.

 

 

 

 

CALENDAR VIEW

 

Imagine that you want a Screen which shows all your important dates on a calendar, like birthdays or events, and that when you click on a certain date all the details are shown for that date. Well, the Calendar View is perfect for this functionality.

We will follow the example with the Cities and we will create a calendar which will show all the tours available for each City in the calendar.

Let’s begin creating a Data View Screen, named “Events” and define its database with 4 fields:

• City (type Text)
• Info of Event (type Text)
• Image (type Local Image)
• Events (type Date)

 

The database may look something like this:

 

 

 

Now we create a new View, type: Calendar View:

 

 

 

In the Calendar screen we will have to choose the date field from our database as seen in the following image.

 

 

 

If we have only 1 field of type: Date, then we will have already selected that field in the "Calendar view" which has been created.

 

But keep in mind that you could have a database with many columns, events, appointments etc.. and create as many Screens or views as collections of dates that you have.

 

 

The next step is to use the draggable elements to design the detail view for each date.

We have 4 elements (columns) to show.

 

                     

 

 

 

 So we create the following:

 

 

 

In the example above we have dragged to the screen the following elements in the listed order:

• A Dynamic text element which corresponds to our “City” field in the database. Shown in red.
• A Dynamic image element which corresponds to our “Image” field in the database. Shown in pink.
• A Dynamic text element which corresponds to our “Events” field, type date, in the database. Shown in yellow.
• A Dynamic text element which corresponds to our “Info Event” field in the database. Shown in green.

 

So now when we open our Events Screen Data View, the calendar screen will be shown like it is in the below image.

If we click on any of the highlighted dates, we will be taken to the screen we just designed which should look like this:

 

 

 

 

Remember that if in our database we have a certain date repeated for, in this case, different tours on the same day/date, when we click on it from a calendar view we would be shown two registries just like this image on the detail view of the calendar view: