Starter's Guide

Data Models

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.

Model Editor

A model may contain several data fields to store different types of data.

For examples:

  • 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
  • Boolean
  • Choice
  • Image
  • Attachment
  • Location / map
  • Date
  • Date & Time
  • Time
  • URL

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

Choice

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:

Editor: set selection values
App: selection values

Image

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:

Editor: set default avatar
App: default avatar

Attachment

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:

Location displayed in map
Full-screen map
Pin to location

URL

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:

  • Date
  • Time (clock time without the date)
  • Date & Time: A compound field with a Date and a Time element
Edit date (native android)
Edit time (native android)

Properties

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
Validation: required field
Validation: unique field

Label Field

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:

Admin Backend: Label Field

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:

Enable search
Tap "search" symbol
Search results

Custom Sorting

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:

Enable change order
Tap "sort" symbol
Select sort order

Protected

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.

Post state is accessible
Post state is not accessible

Relationships

Relationships describe how the models are associated.

Belongs to

Example - User writes posts and each post can be written by exactly one user:

Post model: add "belongs-to User" relationship
Done: Post belongs to 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).

Has (one-to-many)

Same example from last section: User writes posts:

Add relationship: "User has many Posts"
Done: User has many Posts

Please note at the same time this is a "belongs-to" relationship, if you look from the point view of the Post model.

Has (many-to-many)

Example - User can now write posts and leave comments. But we also want to let user rate posts:

User model: add "many-to-many Post" relationship
A new model "User_Post" is created, rename it to "Rate"
Done

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:

  1. Create a model "Rate"
  2. Add "Rate belongs-to User" relationship
  3. Add "Rate belongs-to Post" relationship

Or, using the "one-to-many" relationship, like:

  1. Create a model "Rate"
  2. On the "User" model, add "one-to-many Rate" relationship
  3. 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.

App Design

Navigation

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.

Editor: reorder navigation
Navigation drawer (member)
Navigation drawer (guest)

Pop-up Page

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:

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.

Page Element

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:

Add a child view: comment list
Add a dynamic field: author link
Add an action button: new comment
Add static text

List View

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:

Select Pop-up page
Tap on a list item
Post detail page

Example - Post list in tablet-style:

Select In-page detail view
Tap on a list item loads the post in the detail view

Data Filter

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:

Set data filter
Unfiltered list
Filtered list

Tab View

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.

Editor: Toggle tabs
Tab view
Tab view
Without tabs (Tablet)

Child View

A page may contain one or more than one child views.

Example - The post page holds a comment list:

Editor: parent view
Editor: child view selected
App: post page

Element Positioning

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

1-column layout
2-columns layout
3-columns layout

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:

Click "Edit" symbol
Select the pop-up
Tap on the user name
The User page

Text Style

Editor: display settings
App: post title in bold

Text Alignment

Editor: display settings
App: center-aligned

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.

Synchronize changes between phone / tablet

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.

User Account

User Sign-up

Project: enable user sign up
Select menu "Sign In"
Tap "Sign up for an account"
Create account

By Administrator

Admin Backend: User list
Create account

Access Control

Create

Example: enable the "Create" button on a list view

Enable create
Tap "new" symbol
Create post

Edit

Example: enable the "Edit" button on a list view

Enable edit
Select menu "edit"
Update post

Example: enable the "Edit" button on a pop-up page

Enable edit
Tap "edit" symbol
Update post

Delete

Delete works mostly the same way as "Edit".

User has to confirm before the data record will be deleted.

Admin Backend

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:

1

Record Detail View

Example - A data record of the "Post" model:

Post detail: post content
Post detail: author information
Post detail: list of comments
Post detail: list of commenters