Tersus: Stage 4 - Also display raw data (actual and budget amounts)

Stage 4 - Also display raw data (actual and budget amounts)Date: Aug 18, 2019Create Item (step 3 of 3) - Displaying Actual and Budget AmountsWe would like to create a 2nd option of display (instead of the percentage):

Extend the item display:

Zoom to Content/List/Content Item.
Add a Boolean data element (from the Data Types section of the palette). Rename it to <Read Only>. We'll shortly use it to indicate that the fields we add are for display only, and will not be used for data entry.
Zoom to Details.
Delete Title and Description.
Instead, add two Number Labeled Field elements. Name them Actual and Budget.
Add form-narrow-one-line-fields to the html.styleClass property of Details (this means each of Actual and Budget will have both the field label and the field content displayed in the same row).

Display the amounts:

Return to <Mobile View>/Init/Create Item.
Create a flow from Data Record/ACTUAL_SALES to Content Item/Details/Actual/Number Field/<Value>.
Similarly, create a flow from Data Record/BUDGET to Content Item/Details/Budget/Number Field/<Value>.
Add a Boolean constant "Yes" (from the Constants section of the palette). Create a flow from the constant to Content Item/<Read Only>.

Switching between the two display options:

If you now save your changes and return to the browser, the application will automatically reload, and you will see for each item both the percent display and the actual and budget amounts.
This happens because Create Item populates both Percent Display and Details. The result doesn't look good, and we'd rather have only one of the options displayed at each time.
We can implement the switching between the two display option by controlling the visibility of Percent Display and Details:

Zoom to Content/List/Content Item.
Zoom to Percent Display and add to it a Boolean data element <Visible>.
Similarly, add a Boolean data element <Visible> to Details.
Return to <Mobile View>/Init/Create Item.
Initialize Content Item/Percent Display/<Visible> to "Yes", and Content Item/Details/<Visible> to "No":

Zoom back to Content/List/Content Item.
Zoom to <On Click> and model the reversing of the visibility of each of the two display element (which will take place each time an item is clicked):

Reverse is simple to model:

Save your changes and return to the browser. The application will automatically reload. If you now click any of the items in the list, the percentage of this item will disappear, and instead the actual and budget amounts for the segment will be displayed. A second click toggles back to the percentage display.

Stage 4 Videostill not available (but you can see a video of the corresponding stage using version 2.0.4 or earlier).Download Model: Stage 4Stage 5 - A Browser Bug?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 ...