You can control an action button’s text, identity, visibility, enabled state, and style from your ViewModel by adding hidden companion columns; use this when the button must change for the current user scenario.

Use action companion columns

An action column is the ViewModel column that renders an action as a button. To control that button dynamically, add a generic column whose name combines the action-column name and a button keyword:

<ActionColumnName>_<Keyword>

The generic column supplies the value for that button property. Mark every companion column Not Visible so that it provides formatting metadata and does not render as a separate field in the user interface.

For example, if the action column is named Approve, use Approve_Label to supply the displayed text and Approve_Visible to decide whether the button is rendered.

Configure a dynamic button

1. In the ViewModel Editor, create or select the action column that executes the action. In this example, its name is Approve.
2. Add a generic column for each property that must vary at runtime. Name it Approve_Keyword, replacing Keyword with a supported keyword from the table below.
3. Set each companion column's Not Visible property. These columns are input to the renderer, not fields for the user.
4. Set the companion column value or its OCL expression according to the current ViewModel state.
5. Run the ViewModel and verify the button in each state where its label, visibility, enabled state, or style should change.

Supported button keywords

Companion-column suffix	What it controls	Example companion column
Label	The text displayed on the button.	Approve_Label
Name	The button name. Give separately rendered buttons distinct names when they would otherwise have the same properties.	Approve_Name
Visible	Whether the button is rendered. A value of true shows it; false hides it.	Approve_Visible
Style	The style applied to the button.	Approve_Style
ReadOnly	Whether the button is disabled. A value of true disables it; false enables it.	Approve_ReadOnly

Example: approval button with state-dependent behavior

Assume a ViewModel has an Approve action and a Boolean value that indicates whether approval is allowed. Configure these hidden generic columns:

Column	Example value or intent	Result
Approve_Label	'Approve order'	The button reads Approve order.
Approve_Visible	An OCL expression that evaluates to true only when approval is applicable.	The button is absent when approval does not apply.
Approve_ReadOnly	An OCL expression that evaluates to true while approval is not permitted.	The button remains visible but disabled until approval is permitted.
Approve_Style	A style class appropriate to the current state, such as primary.	The rendered button uses that style class.

Use Visible when the action should not be offered at all. Use ReadOnly when users should see the action but cannot invoke it in the current state. For example, an approval action can be visible to show that the workflow step exists, but read-only until required data has been supplied.

Style a button

Use the action column's Style ref when its appearance is fixed. Use the <ActionColumnName>_Style companion column when the style must be selected from data or an OCL expression.

In the Turnkey Style System, button modifier classes include forms such as outlined and flat, and colors such as primary, danger, and success. Combine the required form and color in the style reference. For example:

primary
primary outlined
danger flat

Do not add a default modifier: the default form does not require it. Modifier classes described for Turnkey buttons and links are not general text styles; use the appropriate md--prefixed classes when styling text. See Documentation:MDriven Stylesheet for the available Turnkey modifier classes and special button variants.

For Bootstrap, Angular, and MVC rendering, text entered in Style ref is emitted as a class on the control tag. If you use your own class name, define the corresponding CSS in your application. See HowTos:Styling and CSS for Bootstrap, Angular and MVC for the rendering behavior and CSS-specific guidance.

Set button text and icons

Use <ActionColumnName>_Label to change button text dynamically. The older <ActionColumnName>_Presentation form is deprecated.

To add an icon, set the Icon tagged value on the action ViewModel column. Its value is the Material Design icon name, for example arrow_back. Set the IconPosition tagged value to before or after; the default position is before. Documentation:Action Controls covers action presentation and icon configuration.

Avoid duplicate rendered buttons

When buttons have the same effective name and styling properties, the UI can render only one of them. If you expect multiple buttons, provide a distinct Name value for each action through its <ActionColumnName>_Name companion column. Also verify that each action column and its companion columns use the correct shared action-column prefix.

Choose the right styling mechanism

Need	Use
A fixed button appearance	Set the action column's Style ref.
A button appearance that changes with data or workflow state	Add a hidden <ActionColumnName>_Style companion column.
A label that changes at runtime	Add a hidden <ActionColumnName>_Label companion column.
Hide or disable an action according to the current scenario	Add hidden _Visible and/or _ReadOnly companion columns.
An icon or its placement	Set the Icon and optional IconPosition tagged values on the action column.
Formatting of data values rather than the action button	Use the tagged-value strategies in Documentation:Text formatting.

See also

• Documentation:Action Controls
• Documentation:MDriven Stylesheet
• HowTos:Styling and Theming Your Application
• HowTos:Styling and CSS for Bootstrap, Angular and MVC
• Documentation:UI&Styling