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,
- Go to DMA Manager
https://YOURDOMAIN/dmaManager e.g. https://ssq.techberry.com/dmaManager
Google Chrome is recommended. - Select menu Screen on the sidebar. Click New to create a new screen
- 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,
- 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.
- 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. |
- Click Save Screen to finish
To create APIs Structure Screen,
- Add Screen Name and select APIs structure template (See more screen examples on APIs Structure template).
- 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.
- 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.
- 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.