Data models describe your data structure that we will use to create your application:
- How your data look like? (example: a post contains at least a title and a body, and optionally an image)
- How they are related? (example: a post has many comments)
- How your users can access them? (example: a user can create post, but not edit or delete it)
A "User" model (note the symbol) is created automatically and represents your App user. The user model cannot be deleted.
A model may contain several data fields to store different types of data.
- A user has a name, an avatar, and a birthday field.
- An apartment has the bedroom number, a few photos, and the location.
- A project proposal has a text description and an attached Word document.
The following types of data fields are available:
- Text (short, single line)
- Text (long, may contain line breaks)
- 9 Number
- Location / map
- Date & Time
Every model also contains a few system fields. They are read-only and will be maintained by the system automatically:
- Created at: when the data record is created
- Updated at: when the data record is last modified
The Choice field is useful to define custom selection list.
Example - In the "Defect" model we have a data field "severity" which is a choice:
Images can either be taken using the phone camera, or be selected from the local or cloud storage (e.g. Dropbox, OneDrive).
The administrator can provide a default image as a placeholder. If there is no image uploaded by the user, this image will be displayed. The administrator can also define a image size, if all images should be displayed in the same size.
Example - Default user avatar:
Attachments can be uploaded just as images. They are useful if your users need to attach Word or PDF documents. Attachment doesn't have a build-in viewer, but there is a "Download" button available for users.
Location / map
The location field is useful for displaying maps. Locations can be given by their coordinate (latitude and longitude) directly. You can also use the "Pin to location" and "Use current location" features to work with them visually.
Example - A map on a apartment detail page shows the location of the apartment:
The URL field can be used to define an external link. Tap on it will open the link in a web browser.
A URL field differs itself from other linking field by the symbol at the end.
Date & Time
There are three types of time-related fields:
- Time (clock time without the date)
- Date & Time: A compound field with a Date and a Time element
The data field of a model may have the following properties:
- Required: field is required
- Unique: field must be unique
- Label field: field is used as the label of the data record
- Searchable: field is included in the search index
- Sortable: field can be sorted in a list view
- Protected: field can not be modified by the App user
Every data record stored in the server backend is identified by an unique ID, which is not very readable for human. You can define a data field as the label field of the model. This field will be displayed instead of the database ID.
Example - The "User" links are more comfortable to read with the user's name defined as a label field, while the "Defect" model has no label field defined:
Full-text search works out-of-box. Just mark the data fields you want to search in as "searchable" field and we'll index them.
In the App the search functionality can be combined with a list view. It can be turned on or off with the list settings.
Example - Searching in the posts:
List items are usually sorted by the created time in the App. But you can have your own sort order and make it available to your App users. To do this, just
- define the data fields you want to sort with as "sortable", and
- enable "change sort order" and select the fields in the list settings
Example - Sort apartments by the price:
If App users are given the "Edit" access right to a model, they can modify all data fields, except:
- Read-only system fields (e.g. "Created at", "Updated at"), and
- Protected fields
Protected fields are read-only fields for the App users. But unlike the system fields, they can be modified by the administrator with the Admin Backend.
Example: We add a "state" field to the "Post" model to hide certain posts from a post list. If it is not protected, the App users could hide posts themselves. Otherwise only the administrator can hide posts.
Relationships describe how the models are associated.
Example - User writes posts and each post can be written by exactly one user:
Please note at the same time this is a "one-to-many" relationship, if you look from the point view of the User model (see next).
Same example from last section: User writes posts:
Please note at the same time this is a "belongs-to" relationship, if you look from the point view of the Post model.
Example - User can now write posts and leave comments. But we also want to let user rate posts:
Please note in this case a new model is created. This relationship is actually a combination of two "one-to-many" relationships.
We could also do it using the "belongs-to" relationship:
- Create a model "Rate"
- Add "Rate belongs-to User" relationship
- Add "Rate belongs-to Post" relationship
Or, using the "one-to-many" relationship, like:
- Create a model "Rate"
- On the "User" model, add "one-to-many Rate" relationship
- On the "Post" model, add "one-to-many Rate" relationship
As you may notice, you can do whatever you prefer. As long as the model diagram renders the data structure you want, they all do the same thing at the end.
All pages added to the navigation can be selected from the App's navigation drawer. The navigation drawer can be opened or closed by tapping on the App's main menu ().
The order of the pages can be changed in the editor.
Some pages are only relevant to the user who currently logged in (note the symbol). They are not visible to an unregistered user.
A pop-up page can be opened by tapping on a page element which is linked to this pop-up.
Two types of page elements can be linked to a pop-up page:
- List view item: Tap on a list item opens the pop-up page
- Dynamic view element: Tap on the element opens the pop-up page
A pop-up page can be linked with one or more than one elements, but only with the compatible elements (same data model).
Pop-up pages that are not linked with any page element are not reachable in the App.
There are four types of elements that can be added a page:
- Child View
- Dynamic Field
- Action Button
- Static Text
The static text is available for all pages, while the others (dynamic elements) depend on the context of the page.
Example: if we are on the "Post" detail page, we could add these elements to the page:
A list view can be linked with a detail view. Tapping on a list item opens the linked detail view. Two types of detail views can be used in this case:
- Pop-up page: New page opens on top of the current page, tapping "Back" button closes it.
- In-page detail view: The list view and the detail view sit side by side on the same page, tapping a list item loads the selected item in the detail view (best for tablets).
Example - Post list in phone-style:
Example - Post list in tablet-style:
List items can be filtered with certain criteria. This may be useful to build different lists based on the same data model. For instance, if you have a "Student" model with a "Gender" field, you can create separate list views for female and male students.
Please note data filter currently works only with data fields with the type "Choice".
Example - Separate apartment lists filtered by the room number:
Page elements can be grouped into tabs. Just click on the "Toggle Tabs" button in the page editor to enable or disable the tab view.
A page may contain one or more than one child views.
Example - The post page holds a comment list:
Elements within any view can be positioned by moving with the handle or the splitter between columns. Each view can hold up to 3 columns.
Example - Different layouts of a "User" page
Link to Pop-up
Similar to list items, some dynamic fields can also be linked to a pop-up page.
Example - Tap on the user name opens the user detail in a pop-up page:
Phone / Tablet
When you start making a page, changes on the page will be synchronized to both device types (phone and tablet) by default.
If you want to optimize a page for different device types, you can disable the synchronization and design the page separately. You can click on the "Toggle Synchronization" button to enable or disable it.
Please note if you turn the synchronization back on, all changes in the other device type will be discarded and replaced with the current page design that you are working on.
Example: enable the "Create" button on a list view
Example: enable the "Edit" button on a list view
Example: enable the "Edit" button on a pop-up page
Delete works mostly the same way as "Edit".
User has to confirm before the data record will be deleted.
The Admin Backend is created automatically based on your data model. You can use it to access and edit all your data content directly.
The Admin Backend is only accessible by you (the project owner). Your App users never have the access to it. All accounts of your App users are data records of the "User" model and can be managed by using the Admin Backend just like other content.
Model List View
Example - The listing of the "Post" model:
Record Detail View
Example - A data record of the "Post" model: