Screens are presentation unit on which your controls are placed. You need to drag and drop the controls on the screen in order to use them in the app. Here you will see how to add an empty screen in your App and how to edit them to suite your requirements.

To add a screen you need to add an App in Studio. Go to Studio homescreen and click on Apps tab to go to App list page. Click on + to add an App in Studio as shown in the below image.

On clicking the + sign, you will be shown Create New App modal, where you can fill in details of your App, like - App Name, Description, Icon and click on ADD APP to create an App. Once the app is created successfully, you will be taken to App builder page with a default screen displayed as shown below with two options - Create Empty Screen and Import from Existing Sheet. These options will always appear whenever you add a new screen in your App. Lets see how to use these two options to build your App.

Create Empty Screen

When you add/create an app, the first thing that you would ideally do is create an empty screen or create a screen using the column formats of any existing sheet (Refer to Import from Existing Sheet section to know more about this option). To create an empty screen, simply click on "Create Empty Screen" button on the builder page as shown below.

On clicking Create Empty Screen button, a modal will open up where you need to fill in Screen name.

Using this modal, you can give a meaningful name to the screen. This name will be used as the screen's name, screen's header & sub-heading. As soon as you click on Create button, the screen will be created along with a Sheet with the name same as the screen's name (The name displayed in the grey box in the create screen modal represents the Sheet's name). This sheet will be used to store the data submitted from this screen. Refer the below image to see how the screen's name is reflected.

Add New Screen

You can create as many screen as you want as per the requirements. To add new screen, click on the SCREENS tab on the left most pane to go to Screen listing page. On this listing page, click on + icon to add new screen as shown below.

As soon as you click on Add New Screen icon, a new screen will be created with screen name as "Screen <counter>" where counter presents the incremented value of the total number of screens in the app, for e.g. if there are 2 screens in the app, then newly created screen will have screen name as "Screen 3". By default the first screen is always set as home screen of the app, indicated by a symbol "H". A user will land on the Home screen when he/she opens the microapp from the DronaHQ Unified App.

Clicking on any screen icon will navigate & open that screen on the app builder.

Did this answer your question?