Tersus: Demo Stage 6 – Comments: Adding an optional comments field

Demo Stage 6 – Comments: Adding an optional comments fieldDate: May 31, 2023Item CommentsWe may want to add comments to some items (e.g. "Very important" or "Call me if you don't get it").On the other hand, adding a column to the item table will make it too wide to be properly displayed on the phone's screen.A possible solution can be to write the comments below the product name, if there are comments. This means there is no waste of space on the screen if there are no comments, which is the regular case. If there are comments, the item's row will have two lines of text.Adding the Comments FieldAgain, let's use the 'Table Wizard':

In '<Desktop View>', right click on

'Items' and select Apply Table Wizard.

Add a field 'Comments' (Text)

Press 'Finish'

The wizard will update your model with the additional field in all relevant places. If you now save your model and restart the application, you will be able to update the commnets of any item you choose.Rearranging Row DiplayWe want the 'Product' and 'Comments' fileds to appear in the same column:

In '<Desktop View>', zoom into

'Items' (Table Wizard), zoom into

'Items' (Table), and zoom into 'Table Row'.

Select both 'Product' and 'Comments', right click, and select Encapsulate.

You get a pane named 'Pane'. Position it between 'Quantity' and 'Status' and rename it to 'Product'.

If you now save your model and restart the application, you will see that 'Product' and 'Comments' appear as a single field (e.g. if 'Product' is "Milk" and 'Comments' is "3%", they are displayed as "Milk3%"). We need to make them appear one below the other.

Zoom into the 'Product' pane. For each of the two display elements it contains ('Product' and 'Comments'), set its shared 'html.tag' property to 'div' (if you don't see the 'html.tag' property, check the 'Show All' box in the 'Properties' view). Save your model.

Now the comments of an item appear below the product's name, but note that in some browsers we get an empty line when the 'Comments' field is empty.

Hiding Empty Comments LineWe want to show the comments line only if it is not empty:

Open the 'Convert Record to Row' model (from the package 'ShoppingList/Desktop/Items/Wizard/Transformations').

Add a 'Hide if Missing' action that will set the '<Visible>' element of the comments field to false when the field is empty (note its trigger 'Value' is not mandatory):

This is what you get if you now restart the application:

Download Model: Stage 6 (version 2.1.9) Next: Classifying items by (mutually exclusive) categoriesSee Also:

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

For best results, use the Firefox browser..

Loading ...