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.

  1. Storyboard configuration
  2. Data flow setting

Storyboard Configuration

To create a storyboard for setting the screen action,

  1. Go to DMA Manager
    https://YOURDOMAIN/dmaManager e.g. https://ssq.techberry.com/dmaManager
    Google Chrome is recommended.
  2. Select menu Storyboard on the sidebar. Click New to create a new storyboard.
  1. Define the storyboard details
ItemDefinition
Storyboard nameThe name of your storyboard
RemarkThe details of the storyboard should be easy to understand and explain what this application does.
  1. Click Add Screen icon for selecting all screens for the application and select and select your screen name on Source Screen field.
  1. 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.

  1. General Screen
  2. APIs Structure Screen

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,

  1. Go to your Storyboard Name
  2. Select Screen Config Name that will configure action data flow
  3. You can follow steps on setting data flow as the image below

NumberScreen ActionDescription
1Screen Inputchoose values from data bus (global value) to show on the current screen
2Select API Nameselect an API name that uses on the current screen
3API Inputselect the input field that will receive from screen and pass to call API, then create a name for a variable
4API Outputif 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
5Screen Outputif 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,

  1. Go to your Storyboard Name
  2. Select Screen Config Name that will configure action data flow
  3. You can follow steps on setting data flow as the image below
NumberScreen ActionDescription
1Screen Inputchoose values from data bus (global value) to show on the current screen and pass to call API
2Screen OutputThe 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