Step 3 : Create Screen

The screens on DMA are divided into two types, which are the general screen and APIs structure screen. There are different functions of usage and it depends on the purpose of the application. You can create app screens more simply and easier without any coding.

To create a screen,

1. Go to DMA Manager
   https://YOURDOMAIN/dmaManager e.g. https://ssq.techberry.com/dmaManager
   Google Chrome is recommended.
   
2. Select menu Screen on the sidebar. Click New to create a new screen
   
   
   
3. As DMA has two types of template, which are General Screen and APIs Structure Screen. You can select the screen that suits your application function.

To create General Screen,

1. Add Screen Name and select general template (See more screen examples on General Template). You can see the information of the screen template by clicking the icon of the template type name.
   
   
   
2. The screen divides into two part; Template Properties and Components List
   Note: Before configuring the screen, you have to tick off the Default checkbox.
   
   The table below is an example of a general screen detail.

Template Properties
Item	Properties	Description	Remark
Header	Title	Add text title on the top of application
Font Color	Select the text color
Background Color	Select your background color on header part
Font Size	Choose font size; tiny, small, normal, large, huge
Hide Header	You have to select False to show all header configuration	If you don’t tick off the default checkbox, the header will not show.
Body	Background Color	Select background color of application
Components List
Item	Properties	Description	Remark
Image, Menu, Button, Username, Password, etc.	Image URL	upload your image	Size of the image depends on the template. You can see the guideline on each property.
Visible Image	You have to select true to show the image	If you don’t tick off the default checkbox, the image will not show.
Ads	Ads 1 Image URL	Upload image that will show on app	The number is the line on template
Ads 1 Visible	You have to select true to show the image
Ads AutoPlay	If you want your ads is autoplay, select true
Ads Slide Speed (sec)	Add a number to fix the slide speed
Visible Ads All	You have to select true to show the image	If you don’t tick off the default checkbox, all configurations will not show.
Data Set 1, Message Group 1	Topic	Add text of your topic
Topic Font Color	Select color of your text
Topic Visible	You have to select true to show text
Label Text 1	Add text of the first label	The number is the line on template
Label Font Color 1	Select the color of first label
Label Visible	You have to select true to show text
Data Text 1	Tick off the default checkbox, if not the data from other sources will not show on this field.
Data Font Color 1	Select text color that will show on the field
Data Visible 1	Select true to show data on screen
Visible Group	You have to select true to show all configuration	If you don’t tick off the default checkbox, all configurations will not show.

3. Click Save Screen to finish

To create APIs Structure Screen,

1. Add Screen Name and select APIs structure template (See more screen examples on APIs Structure template).
2. Select an API that you want the input-output format and click Load. You can see the information of the screen template by clicking the icon of the template type name.
   
   
   
3. The screen divides into two part; Template Properties and Components List
   Note: Before configuring the screen, you have to tick off the Default checkbox.
   
   The table below is an example of an APIs structure screen detail.

Template Properties
Item	Properties	Description	Remark
Header	Title	Add text title on the top of application
Font Color	Select the text color
Background Color	Select your background color on header part
Font Size	Choose font size; tiny, small, normal, large, huge
Hide Header	You have to select False to show all header configuration	If you don’t tick off the default checkbox, the header will not show.
Body	Background Color	Select background color of application
Components List
Item	Properties	Description	Remark
DMA ITEM IN LIST	Description 1	Select value from APIs input/output on the dropdown	The number is a line on screen. Tick off the default checkbox first
Description 2	Select value from APIs input/output on the dropdown	The number is a line on screen. Tick off the default checkbox first
Icon in List	Visible	You have to select true before configuring on DMA ITEM IN LIST
Topic in List	Font Color	Select text color
Topic Visible	Select true to show the configuration
Button in List	Image URL	Upload image
Visible	You have to select true before configuring on DMA ITEM IN LIST
Description 1 in List	Label	Add text on label
Color Label	Select color of the label text
Visible Label	Select true to show the configuration
Font Color Description	Select font color of the description field
Visible Description	Select true to show the configuration

Moreover,  you can see the APIs input or output fildes at the components list that you already promoted from Service Gateway. The items from the API will show the field name and data type.

4. Click Save Screen to finish
   

If you finish creating an app screen, you can use the screen preview to check the screen interface and for uploading screenshots to set on a storyboard.