You can make a widget, button, or grid-column label display a calculated value from its ViewModel; use this when a static, translated presentation text must change with the data.
Normally, labels are static presentation text. Use a databind label when the label itself is dataâfor example, when a filter label must reflect a value calculated in the ViewModel.
How databind labels work
A databind label is driven by a second ViewModel column whose name follows a required naming pattern. The generated UI looks for that companion column and uses its value as the label text.
Create the companion column as a string-valued generic column and give it an OCL expression that returns the text to display. Place it on the same ViewModel level as the item whose label it supplies.
For example, if a ViewModel column named Filter needs a changing label:
- Add a string generic column on the same ViewModel level as
Filter. - Name the new column
Filter_Label. - Set its OCL expression to the string value that should be shown as the label.
- Keep the companion column available for calculation. Do not use
NotVisiblefor a column whose value must be calculated for a label;NotVisibleremoves the column from calculation.
If the expression evaluates to Current filter: Active, the UI displays that text as the label for Filter.
Required column names
| Target | Companion label-column name | Example |
|---|---|---|
| Widget or button | ColumnName_Label
|
A column named Filter uses Filter_Label.
|
| Grid column | GridRootColumnName_GridColumnName_Label
|
A grid root column named Orders and a grid column named Status use Orders_Status_Label.
|
The name match is exact. In particular, retain the underscore before Label and create the companion column at the required ViewModel level.
Create a dynamic widget or button label
- In MDriven Designer, open the ViewModel that contains the widget or button column.
- Identify the target column name. For this example, use
Filter. - Add a string generic column on that same ViewModel level and name it
Filter_Label. - Enter an OCL expression that returns the required text. The expression can use data available at that location in the ViewModel. See Documentation:How to use vCurrent and âselfâ correctly in viewmodels and Documentation:ViewModel variables when choosing between
selfand avCurrent_...variable. - Run the ViewModel and verify that changing the data changes the displayed label.
Keep the target column and its _Label companion close together in the ViewModel definition. This makes the naming relationship clear during later maintenance.
Create a dynamic grid-column header
- Identify the grid root column name and the grid column name.
- On the level of the grid root column, add a string generic column.
- Name it
GridRootColumnName_GridColumnName_Label. - Set its OCL expression to the header text.
- Run the ViewModel and confirm that the matching grid column displays the calculated header.
For a grid root column Orders and column Status, the companion column must be named Orders_Status_Label. A column named only Status_Label does not follow the grid-header pattern.
Choose the right technique
| Requirement | Use |
|---|---|
| The label text must change from ViewModel data. | A databind label with a correctly named _Label companion column.
|
| The value in a field needs a date, number, currency, or other display format. | Text formatting tagged values. Formatting changes how a value is presented; it does not supply a dynamic label. |
An action name or constraint message needs the older <AsString> pattern.
|
Documentation:AsString. For all uses except actions, databind labels replace that logic. |
Platform bindings
The label value is defined in the ViewModel through the naming convention above. For AngularJS and MVC generated binding details, open the suggested bindings in your Turnkey development environment as described in Documentation:Bindings for angular.
Troubleshooting
- Check spelling and capitalization of both the target column and its companion label column.
- For a grid header, include both the grid root column name and the grid column name.
- Ensure the OCL expression returns text appropriate for a label.
- Verify that the companion column is on the same required ViewModel level.
- Do not mark the companion label column
NotVisiblewhen its value must be calculated.
