Tersus: Stage 2 - Display the icon of each product segment

Stage 2 - Display the icon of each product segmentDate: Aug 18, 2019Using a List of ItemsTo display the sales data for each product segment, we'll use List, which is a standard display element for mobile apps:

Zoom into <Mobile View>/Sales Data/Content/List.

Zoom into List and rename List Item 1 to Content Item (note that it is a repetitive element - the list may contain any number of items).

Reading Sales Data from Database

Zoom back to <Mobile View>.

Add to <Mobile View> an action container Init (select Action from the Basic section of the palette and then click inside <Mobile View>; name the action Init).

Add to Init a service container Get Data (select Service from the Basic section of the palette).

Zoom into Get Data and add a database record Data Record (select Database Record from the Data Types section of the palette).

Add to Data Record data elements corresponding to the record's fields in the database:

Right click Data Record and select Import Structure from Database.
In the dialog that opens, click the field labeled Data Source, select jdbc/Main, and click OK.
Click the field labeled Table Name, select SALES_DATA, and click OK.
In the dialog that opens you can see the 4 fields in the table SALES_DATA:
- DATE - The date to which the records refers
- CATEGORY - The product segment to which the records refers
- ACTUAL_SALES - The actual sales amount for the product segment in the date
- BUDGET - The sales budget amount for the product segment in the date
Click Select All, and then click OK.
For the first field (DATE), change Type to Date, and change Column Type to DATE.
Click Finish.
You will see that now Data Record contains 4 data element, each corresponding to one of the 4 fields you have imported from the structure of the SALES_DATA table in the database.
Make the Data Record repetitive by right-clicking it and selecting the Repetititve option from the context menu.

Back to Get Data, add a Find action from the Database section of the palette, to read the records from the table.

Add an input trigger to Find (select

from the palette and then click inside Find close to the left side). Name the trigger DATE (select the trigger, right click, and select Rename). The DATE trigger is a "filter" indicating we only read (from the SALES_DATA table) records with the specified value of the DATE column.

Add a Date constant with some data in 2014 (our sample data covers the year 2014).

Add an output exit to Get Data (select

from the palette and then click inside Get Data close to its right side). Name the exit Records. Make the exit repetitive (select the exit, right click and select Repetitive).

Complete the modeling of Get Data by adding 3 flow arrows (selected from the top of the palette), as below:

Initializing the List of ItemsGet Data will read all sales data for today (a record per product segment), and we now need to display them on the screen. This will be made by populating the elements of List with the read records (each record will create one Content Item inside List).

Zoom back to Init.

Add to Init a reference to <Mobile View>, which contains List (right click somewhere inside Init and select Add Ancestor Reference -> <Mobile View>).

If you click the + at the top right corner of the Sales Data element within the <Mobile View> reference element, you will see its child element Content. If you then click the + at the top right corner of Content, you will see its child element List. If you finally click the + at the top right corner of List, you will see its child element Content Item.

Add to Init an action container Create Item. Make it repetitive. Add to it a trigger (

) and an exit (

Create flows from the exit of Get Data to the trigger of Create Item and from the exit of Create Item to <Mobile View>/Sales Data/Content/List/Content Item:

Create Item (step 1 of 3) - Selecting Icon ImagesCreate Item is a repetitive action that is invoked once for each record returned by Get Data.We will now model Create Item in 3 steps, each further enriching the created item display:

Zoom into Create Item.

Select the trigger, right click and select Show in Repository Explorer. This locates you in the model repository on the model of Data Record, which is the type of the data flowing through the trigger.

Drag the Data Record model from the Repository Explorer into Create Item and create a flow to it from the trigger.

Similarly, select the exit of Create Item, right click and select Show in Repository Explorer, drag it into Create Item, and create a flow from it to the exit.

The model of Create Item now looks like this:

As the first step of implementing Create Item we will set the icon of each Content Item based on the product segment (category):

Add to Create Item an action container Get Icon Path.
Add to Get Icon Path a trigger Category and an exit Path.
Create a flow from Data Record/CATEGORY to the trigger of Get Icon Path.
Create a flow from the exit of Get Icon Path to Content Item/Thumbnail/<SRC>.
Zoom into Get Icon Path and model the creation of the icon's image path as a concatenation of the category name and the suffix ".png" (as explained in Stage 1):
- Press Search () at the top of the palette, type "concat", and select the Concatenate template.
- Press OK and the click inside Get Icon Path.
- Delete the <Seperator> trigger of Concatenate (we don't need it).
- Create a flow from the trigger of Get Icon Path to the trigger Text 1 of Concatenate.
- Create a text constant ".png" (drag Text from the Constants section of the palette and type ".png"). Create from it a flow to the trigger Text 2 of Concatenate.
- Create a flow from the exit of Concatenate to the exit of Get Icon Path:

If you now save your changes and return to the browser, the application will automatically reload and display 3 icons (each for one of today's sales data records, assuming the year now is 2014):

Stage 2 VideoStill not available (but you can see a video of the corresponding stage using version 2.0.4 or earlier). Download Model: Stage 2Stage 3 - Also display the difference between budget and actual (percentage)See Also:

To use the full functionality of this web site, JavaScript needs to be turned on.

For best results, use the Firefox browser..

Loading ...