Screens is one of the main design parts in the AppBuilder. Depending on your project type (Card/Micro-App) the desinger is slightly different, but the overall behavior is similar.


In your Micro-App porject you usually start with adding a new screen. This provides you the selection of different screen templates.

Default - This provides you an empty screen

Search - This provides you an empty screen with a predefined search bar on top

Tabs Layout - This provides you a screen with predefined tabs

Micro-App Screen Design

Once you added a screen you can start populating the screen with controls.

The Toolbox on the left provides you all available controls which can be used for a screen design. The controls itself are explained in detail in the Controls section of this documentation.

The general options for screens are the following

General Options

The Ribbon menu provides you a few options to work with screens:

Add Screen - Adds a new screen to the designer

Remove Screen - Removes the current screen

Copy Screen - Creates a copy of the current screen

Delete Control - Removes the currently selected control from the screen

Use Phone Screens on Tablet - Defines if the phone layout should be used as well on tablet devices. If this gets disabled, you a the option to add also tablet screens, which gives the option to design a separate look and feel for tablets.

Copy to Tablet - Copies the current screen to a tablet layouted screen

Select Theme - Gives the option to download themes from your cloud tenant

Manage App Fields - Gives the option to manage the data fields and actions which are used on the screen

Screen Settings

The right side next to the phone surface provides you some settings which are helpful during designing the surface.

Hide Content Areas - Disables the content areas (light red areas) to show up in the designer

Hide Utility Areas - Disables the utility area (grey bar with trash can) to show up in the designer

Start Screen - Makes the current screen the start screen (if you've more than one screen)

Initial Action - This can contain controls like Button or ActionList, to get executed when you open up a Micro App (like loading default values)

Refresh Action - Actions assigned to this are getting executed if you perform a refresh of your screen

Controls - Let you select a certain control from your design surface

Select Language - If you've configured more than one language, this is the selector to switch between them


The cards designer is similar to the Micro-App designer. The main difference is that you have by default two predefined screen:

SummaryScreen - This screen shows up directly in the stream(Hub/Tasks) of the mobile device

DetailScreen - This is the detail screen of a card, which shows up, when you click on a card

By design card have less controls available as Micro-Apps.


To test your Micro-App or Card, you can do this directly in the AppBuilder, by starting the debugging of Visual Studio. This will startup AppBuilder's built in emulator.

On cards, you'll get one more dialog upfront, where you have the option, to upload sample data for the card, since cards are usually triggered by collectors which provide data from a certain backend systems.

Share this page
Tell your colleagues and friends about Sitrion. Choose a social channel below to share this page.