<img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?ev=6024414211494&cd[value]=0.01&cd[currency]=USD&noscript=1">

2. How to start

Once you are a registered user, you can start building apps. To register, click here

First step is to create a project, you can start from scratch or select one of our templates.

Watch our video

Create a screen

Screens are added from the Design section.

a. Menu

  • To add a Menu screen, click on Add Screen button and select Menu.
  • Then use the “add option” link to add menu options.

Menus can’t be nested

Watch our video

b. List

  • To add a list screen, click on "add a screen" button and select "List".
  • Link it to a new or a existing datasource of your app.
  • Define order and filter criteria.
  • Select a layout for the list.
  • Set up the data in the placeholders.
  • Apply design options.
  • Configure “tap on event” behaviour.
  • Enable the toolbar actions of your app.
  • Configure your detail form or remove it if you need a plain list. Details forms are just to show data.
  • Configure your form if your want your users to add, edit or remove data from your app or just remove it.

Watch our video

c. Map

Map Screens only work with Buildup Cloud, Cloudant and Sap Hana datasources.
Find out how to find out how to get your Google Maps Api key

  • To add a map screen,click on add a screen button and select Map.
  • Link it to a new or a existing datasource of your app.
  • Define a filter criteria if needed.
  • Set up the data in the placeholders.
  • Set up the location field. You must use one of location type columns of your datasource.
  • Enable the toolbar actions of your app.
  • Configure your detail form or remove it if you need a simple map.
  • If you plan to generate your app for android, go to Settings section and complete the Google API Key field

Watch our video

d. Custom

Custom Screens only work with Buildup Cloud and Local datasources.

  • To add a custom screen ,click on add a screen button and select Custom.
  • Link it to a new or a existing datasource of your app or introduce static information in the placeholders.
  • Define order and filter criteria. Custom screens only show the first row of the datasource.
  • Set up the data in the placeholders.
  • Apply design options.
  • Configure “tap on event” behaviour. This option are only available for placeholders linked with datasource fields.

e. Charts

  • To add a chart screen ,click on add a screen button and select Custom.
  • Link it to a new or a existing datasource of your app.
  • Select the graph type: pie, bars o lines.
  • Set up the data fieds.
  • Apply design options.

Watch our video

f. Forms

Forms are a special kind of screen and always related with a list.

Forms are only available for lists linked to Buildup Cloud or Cloudant datasources.

Forms are created automatically when you create a list with appropiate datasource.

  • To add a form, create a new list.
  • The list has a nested type form screen.
  • Link the list to a Buildup Cloud or Cloudant datasource.
  • The form will show a placerholder for every field of the datasource.
  • For every placeholder you can configure its visibility, read-only option and default value.
  • Enable or disable the actions to allow the end-users to add, edit or remove data.

To add a form to an existing list

  • Make sure the list is linked to an appropiate datasource and the list doesn’t have form type screen.
  • Click on “Add form button”.
  • The form will show a placerholder for every field of the datasource.
  • For every placeholder you can configure its visibility, read-only option and default value.
  • Enable or disable the actions to allow the end-users to add, edit or remove data.

Watch our video

g. Videoconference

Before you start, you need a properly configured Intel CS WebRTC Server.
Once you have it ready follow these steps in Buildup.io:

  • Go to WebRTC section in the left menu.
  • Click on Manage button to open server settings dialog.
  • Enter the Provider API URL, the Service ID and the Service Key of your WebRTC server.
  • CLick Accept.
  • The rooms available in your server will appear, and you will be able to create new web users or agents to receive calls from devices.

Once you have the server part ready, you have to create a new Videocall screen in your app.

  • Go to Go to Design section in the left menu.
  • Click + Screen button to add a new screen and choose Videocall screen type.
  • Select Videocall placeholder and choose between Call a web user and Join a conferece room.

To receive calls from this app, you will need to launch a P2P web client or a Multiconference room from WebRTC section,
depending on your choice at this stage.

Watch our video

h. How to show data

Every screen is compound of placeholders to show data. Data can be readen from a datasource or static data.

You can also can create compound expresions by the combination of datasources fields and static text.

i. Navigation options

There are two main ways of navigate between screes.

  • Use one of the availables navigation patterns: Main Screen, Drawer menu and Tabs
  • Set up the “navigate to” option of the “Tap on event” parameter of screens or placeholers

j. Search

You can allow your users to search in your app data.

To activate this options you have to enable the search button in the toolbar actions section.

Search is available in all screen types but Custom.

k. Filter

You can allow your users to apply filters in your app data.

To activate this options you have to enable the filter button in the toolbar actions section.

Filter is available for lists.

l. Share

You can allow your users to share content from your app.

To activate this options you have to enable the share button in the toolbar actions section.

This option is only available for detail screens or custom screens.

m. How to create Master Detail relationship

To create a Master Detail relationship in Buildup is easy using the available navigation options between screens.

  • To start make sure you have two (or more) datasources related with a master detail relationship

For example:

Master Datasource:

MasterId Name
1 Master 1
2 Master 2

Detail Datasource:

DetailId Name MasterId
1 Detail 1 1
2 Detail 2 1
3 Detail 3 2
4 Detail 4 2
  • Create a list, name it “Master List” and link it with Master Datasource
  • Remove the Detail Screen
  • Remove the Form Screen unless you want your users to edit your data
  • Create a list, name it “Detail List” and link it with Detail Datasource
  • Select “Master” list and setup “On list item tap” as “Navigate to”
  • Set up “Target screen” as “Detail List”
  • Select “Detail List”
  • Edit “Filter by” option
  • Add a new filter “MasterId” must be equal to “MasterId” from Master Datasource

Now you have a read-only “Master Detail” app. If you want yo allow your users to add items to the “Detail Datasource” you just
have to follow these steps.

  • Make user that the “Detail List” section have a form type screen and the Add, Remove and Edit options are enabled
  • Click on “Detail List Form” Screen
  • Click on “Master ID” placeholder
  • Configure “Defaul Value” field as MasterId from Master Datasource
  • Enable “Read Only” option to ensure that the detail will have the appropiate MasterID value
  • You can also disable “Show in UI” option to hide this field to your users.

Watch our video