Step 4 : Config Storyboard and Set Data Flow
The storyboard is effective communication for explaining an application idea or application workflow. All app screens will be configured and be set how the data work on the application here.
There will be two parts that you should follow.
Storyboard Configuration
To create a storyboard for setting the screen action,
- Go to DMA Manager
https://YOURDOMAIN/dmaManager e.g. https://ssq.techberry.com/dmaManager
Google Chrome is recommended. - Select menu Storyboard on the sidebar. Click New to create a new storyboard.
- Define the storyboard details
| Item | Definition |
| Storyboard name | The name of your storyboard |
| Remark | The details of the storyboard should be easy to understand and explain what this application does. |
- Click Add Screen icon for selecting all screens for the application and select and select your screen name on Source Screen field.
- Then, setting screens order by selecting at Screen on Target Type field and choosing the next screen name from this action at Target field. Do this step on every screen to set the order screen then you will set the data flow in the next step.
Data Flow Setting
There are different steps of data flow setting depending on screen types, general screen and APIs structure screen. These instructions will describe how to set the data flow for each screen type.
General Screen
As the DMA concept and architecture topic, you have to know your data flow and how it runs on the application.
To set data flow on your general screen,
- Go to your Storyboard Name
- Select Screen Config Name that will configure action data flow
- You can follow steps on setting data flow as the image below
| Number | Screen Action | Description |
| 1 | Screen Input | choose values from data bus (global value) to show on the current screen |
| 2 | Select API Name | select an API name that uses on the current screen |
| 3 | API Input | select the input field that will receive from screen and pass to call API, then create a name for a variable |
| 4 | API Output | if you want to keep the value from API to the data bus, choose output value and Add to Global and create a name for a variable |
| 5 | Screen Output | if you want to keep the value from screen to data bus, choose output value and Add to Global |
APIs Structure Screen
As APIs structure screen is automatically calling API, the data flow setting will have some differences from the general screen. You can follow the instructions below to configure.
To set data flow on your general screen,
- Go to your Storyboard Name
- Select Screen Config Name that will configure action data flow
- You can follow steps on setting data flow as the image below
| Number | Screen Action | Description |
| 1 | Screen Input | choose values from data bus (global value) to show on the current screen and pass to call API |
| 2 | Screen Output | The screen will show values from API if you want to keep the value from screen to data bus, choose output value and Add to Global |