🚀 Welcome to MDriven Learn –  MDriven is now on Discord!  Don’t miss the latest Release Notes.
Adding Buttons in Nested ViewModels
This page was created by Charles on 2024-06-03. Last edited by Wikiadmin on 2026-07-29.

You can add a button to a nested ViewModel by adding an action column and connecting it either to a Class Action or, by name, to a ViewModel Action. This page is for MDriven Designer users building actions for data shown in a nested ViewModel.

Choose an action type

An action column is a ViewModel column that renders as a button and executes an action expression when the user selects it. In a nested ViewModel, you can configure that button in one of two ways.

Option Use it when How the action column finds the action
Class Action The nested ViewModel is rooted and the action belongs to that ViewModel class. Select and link the Class Action in the action column settings.
ViewModel Action You want the action column to execute an action defined at the ViewModel level. Give the action column and the ViewModel Action the exact same name.

For example, a nested ViewModel that lists products under a category can contain an action column named OpenProduct. You can either link that column to a Class Action, or create a ViewModel Action named OpenProduct. Do not use both connection methods for the same button.

Before you start

  1. Open the ViewModel in MDriven Designer and identify the nested ViewModel class that displays the rows where the button should appear.
  2. Add an action column to that nested ViewModel class.
  3. Decide whether the button needs a Class Action or a ViewModel Action, using the table above.

A rooted ViewModel has a specific model object as its starting point. An unrooted ViewModel is generally used to find objects. See rooted and unrooted ViewModels for the distinction.

Use a Class Action

Use a Class Action when the nested ViewModel is rooted. A Class Action requires a root on the ViewModel.

  1. In the nested ViewModel, add an action column.
  2. Go to ViewModel Actions.
  3. Click Class Action to create a new Class Action.
  4. Double-click the new Class Action to open the Actions Editor.
  5. Enter the action name and its execute expression.
  6. Return to the ViewModel and select the new action column.
  7. In the settings shown on the right, link the action column to the Class Action you created.
  8. Save the ViewModel and test the button in the rendered view.

For example, if the nested rows represent products, create the Class Action that should run for the selected product row, then explicitly select that Class Action in the OpenProduct action column settings. The explicit link is required for this option.

Check the execution context

Write the execute expression for the object represented by the nested row. In ViewModel expressions, self represents the object rendered while the server iterates the relevant ViewModel class, whereas vCurrent_<ViewModelClass> is global to the ViewModel. Review using vCurrent and self correctly in ViewModels before using either value in an action expression.

Use a ViewModel Action

Use a ViewModel Action when you want the action to be resolved by its name. With this method, MDriven matches the action column name to the ViewModel Action name.

  1. In the nested ViewModel, add an action column.
  2. Go to ViewModel Actions.
  3. Click ViewModel Action to create a new ViewModel Action.
  4. Double-click the new ViewModel Action to open the Actions Editor.
  5. Enter the execute expression.
  6. Set the ViewModel Action name to the exact name of the action column.
  7. Return to the ViewModel and select the action column.
  8. Verify that the action column name exactly matches the ViewModel Action name.
  9. Save the ViewModel and test the button in the rendered view.

For example, name both the action column and the ViewModel Action OpenProduct. When the user selects the OpenProduct button in a product row, the matching ViewModel Action expression is executed.

Important: do not link a ViewModel Action

Do not link the ViewModel Action to the action column in the column settings. A ViewModel Action works automatically when its name and the action column name are the same. Linking is the Class Action pattern; name matching is the ViewModel Action pattern.

Troubleshoot name matching

If the button does not execute the expected ViewModel Action:

  • Check that the action column is in the intended nested ViewModel.
  • Check that the action column name and ViewModel Action name are identical.
  • Check that you did not rely on a link between the column and the ViewModel Action.
  • Check the action expression's use of self and vCurrent_<ViewModelClass> when it acts on nested data.

Button presentation

The action configuration determines what runs. Configure the button's text, visibility, enabled state, styling, and icon separately. For example, add an appropriate formatting column when you need the label displayed to the user to differ from the action column name. See Formatting and Styling Buttons and Action Controls.

If an action should open a view rather than complete work in the current view, review PopUp action for popup and modal behavior.

See also