You use an action column in a ViewModel action to show a button that runs an action; this page is for MDriven Designer users who need to control the button's text and icon in a Turnkey view.
Add a button with an action column
An action column is a ViewModel column that represents an action in the user interface. In Turnkey, it is rendered as a button.
- Add an action column to the ViewModel where the user should be able to run the action.
- Define the action logic in the ViewModel's actions. Use Actions Editor to edit the action.
- Ensure that the action column is connected to the intended action according to the action type and scope.
- Place the action column in the ViewModel layout so that Turnkey renders the button.
For example, an action column named vApproveOrder can render an Approve order button for an order row. The action determines what happens when the user selects the button; the action-column label determines the text the user sees.
For action columns in a nested ViewModel, follow Documentation:Adding Buttons in Nested ViewModels. In particular, a ViewModel action uses the action-column name to locate its action: the action column and ViewModel action must have the same name. Do not link that ViewModel action to the column separately.
Set the button text
The action column's presentation name supplies the button text. You can override that text dynamically by adding a companion ViewModel column named:
<ActionColumn>_Label
For an action column named vApproveOrder, add:
vApproveOrder_Label
The value of vApproveOrder_Label is used as the label for the vApproveOrder action button. This lets the text reflect the current state of the row or view.
For example, if an order can be approved or reopened, make vApproveOrder_Label evaluate to Approve order for an unapproved order and Reopen order for an approved order. The same action-column position can then describe the operation currently available to the user.
| Convention | Use |
|---|---|
<ActionColumn>_Label
|
Current convention for dynamically supplying an action button's presentation text. |
<ActionColumn>_Presentation
|
Deprecated convention. Use _Label for new work.
|
Keep the label column's base name identical to the action-column name. For example, vApproveOrder_Label applies to vApproveOrder; Approve_Label does not apply to it.
Add an icon
You can add an icon to an action button by adding the Icon Tagged Value to the ViewModel column that contains the action.
- Select the action column in the ViewModel.
- Add the Tagged Value named
Icon. - Set its value to the required icon name.
- Run the view and verify that the icon and label communicate the intended action.
MDriven Turnkey uses Material Design icons by default. Choose an icon at Material Design Icons, then use the icon name as the Icon value.
Icon names use lowercase letters and underscores. For example, use arrow_back, not Arrow back.
| Action column | Tagged Value | Value | Result |
|---|---|---|---|
vApproveOrder
|
Icon
|
arrow_back
|
The action button is shown with the arrow_back icon.
|
Choose the icon position
Use the IconPosition Tagged Value on the same action column to choose where the icon appears relative to the label.
IconPosition value
|
Icon placement |
|---|---|
before
|
Before the button label. This is the default. |
after
|
After the button label. |
For example, add IconPosition with the value after to show the icon after Approve order.
Button appearance
An action column defines the button and its action. Visual changes are separate from action behavior. Use the ViewModel's style references and Turnkey CSS when you need to target rendered controls; see Documentation:CSS BEM.
Do not use a changed label or icon as the only indication that an action is unavailable. Define the action's enable and visibility rules in the appropriate action configuration. Access groups control whether tagged actions can be shown, while interest groups control visibility; see Documentation:Restricting data access and Documentation:AccessGroups, InterestGroups and ViewModel-Enable.
Reuse an action from OCL or EAL
A button runs its action through the user interface. If you need to invoke existing ViewModel action logic from OCL or EAL, use selfVM.ExecuteAction as described in Documentation:OCLOperators ExecuteAction.
For example:
selfVM.ExecuteAction('Orders', 'vApproveOrder')
This invocation does not honor the action's disable or visible expression. When you execute an action this way, your OCL or EAL must enforce any required enable rules itself.