🚀 Welcome to MDriven Learn –  MDriven is now on Discord!  Don’t miss the latest Release Notes.
Databind labels in ViewModels
This page was created by Hans.karlsen on 2022-03-18. Last edited by Wikiadmin on 2026-07-29.

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:

  1. Add a string generic column on the same ViewModel level as Filter.
  2. Name the new column Filter_Label.
  3. Set its OCL expression to the string value that should be shown as the label.
  4. Keep the companion column available for calculation. Do not use NotVisible for a column whose value must be calculated for a label; NotVisible removes 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

  1. In MDriven Designer, open the ViewModel that contains the widget or button column.
  2. Identify the target column name. For this example, use Filter.
  3. Add a string generic column on that same ViewModel level and name it Filter_Label.
  4. 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 self and a vCurrent_... variable.
  5. 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

  1. Identify the grid root column name and the grid column name.
  2. On the level of the grid root column, add a string generic column.
  3. Name it GridRootColumnName_GridColumnName_Label.
  4. Set its OCL expression to the header text.
  5. 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 NotVisible when its value must be calculated.

See also