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 PropertiesDescriptionRemark
HeaderTitleAdd text title on the top of application
Font ColorSelect the text color
Background ColorSelect your background color on header part
Font SizeChoose font size; tiny, small, normal, large, huge
Hide HeaderYou have to select False to show all header configurationIf you don’t tick off the default checkbox, the header will not show.
BodyBackground ColorSelect background color of application
Components List
Item PropertiesDescriptionRemark
Image, Menu, Button, Username, Password, etc.Image URLupload your image Size of the image depends on the template. You can see the guideline on each property.
Visible ImageYou have to select true to show the imageIf you don’t tick off the default checkbox, the image will not show.
AdsAds 1 Image URLUpload image that will show on appThe number is the line on template
Ads 1 VisibleYou have to select true to show the image
Ads AutoPlayIf you want your ads is autoplay, select true
Ads Slide Speed (sec)Add a number to fix the slide speed
Visible Ads AllYou have to select true to show the imageIf you don’t tick off the default checkbox, all configurations will not show.
Data Set 1, Message Group 1TopicAdd text of your topic
Topic Font ColorSelect color of your text
Topic VisibleYou have to select true to show text
Label Text 1Add text of the first labelThe number is the line on template
Label Font Color 1Select the color of first label
Label VisibleYou have to select true to show text
Data Text 1Tick off the default checkbox, if not the data from other sources will not show on this field.
Data Font Color 1Select text color that will show on the field
Data Visible 1Select true to show data on screen
Visible GroupYou have to select true to show all configurationIf you don’t tick off the default checkbox, all configurations will not show.
  1. 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 PropertiesDescriptionRemark
HeaderTitleAdd text title on the top of application
Font ColorSelect the text color
Background ColorSelect your background color on header part
Font SizeChoose font size; tiny, small, normal, large, huge
Hide HeaderYou have to select False to show all header configurationIf you don’t tick off the default checkbox, the header will not show.
BodyBackground ColorSelect background color of application
Components List
Item PropertiesDescriptionRemark
DMA ITEM IN LISTDescription 1Select value from APIs input/output on the dropdownThe number is a line on screen.
Tick off the default checkbox first
Description 2Select value from APIs input/output on the dropdownThe number is a line on screen. Tick off the default checkbox first
Icon in ListVisibleYou have to select true before configuring on DMA ITEM IN LIST
Topic in ListFont ColorSelect text color
Topic VisibleSelect true to show the configuration

Button in List
Image URLUpload image
VisibleYou have to select true before configuring on DMA ITEM IN LIST
Description 1 in ListLabelAdd text on label
Color Label Select color of the label text
Visible Label Select true to show the configuration
Font Color DescriptionSelect 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.

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