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
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
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.