Adding an action button to a view

The following video describes the procedure to add an action button. The video shows an older version of BMC Helix Innovation Studio. The previous product name was BMC Helix Innovation Suite. Although there might be minor changes in the UI, the overall functionality remains the same.

https://youtu.be/T93mxH2G118

To add an action button to a view definition

1. Log in to BMC Helix Innovation Studio and navigate to the Workspace tab.
2. Select the application for which you want to add an action button.
3. On the Views tab, click the name of the view definition to which you want to add an action button.
4. From the Palette, drag the Action button component to the canvas in the order that you want them to appear on the user interface.

5. In the Properties pane on the right side, click the Settings icon , and then specify the preferences for each button on the General tab.

   The following table provides information about the properties:

   Property	Description	Example
   General
   Label	Defines a unique name of the action button.
   Tooltip	Enter a brief, informative message about the action button that is displayed to users when they hover over it.
   Style	Specifies the display format for the action button. The following styles are available: Primary—Displays the button with red background color. Secondary—Displays the button with a black border and no background color. Tertiary—Displays the button with no background color and no border.
   Size	Specifies the size of the action button. You can specify either small or large size for the action button.
   Icon	Defines the icon for the action button. You can select the icons by using one of the following ways: Click on the list that displays all the available icons. Type the name of the icon and select the desired icon. Click Browse, and from the Select icon window, select the desired icon.
   Icon alignment	Specifies the alignment of the icon relative to the action button.
   Disabled	Turn on the toggle key to disable the Assignment component, and then select one of the following options: At all times—Select this option if you want to disable the component at all times. When condition is true—Select this option if you want to disable the component only if a certain condition is met. Condition—Build an expression to define a condition. This option is displayed only after you select the When condition is true option.
   Hidden	Turn on the toggle key to hide the Assignment component at runtime, and then select one of the following options: At all times—Select this option if you want to keep the component hidden at all times. When condition is true—Select this option if you want to keep the component hidden only if a certain condition is met. Condition—Build an expression to define a condition. This option is displayed only after you select the When condition is true option.
   CSS classes	Defines the style of the component.  For more information, see CSS classes used in View designer components.
   Actions
   Display mode	Displays an action button in one of the following modes: Standard button—Displays action buttons in a standard way. Dropdown button—Displays action buttons as a dropdown list.
   Edit dropdown actions	Specifies the actions to add to the dropdown action button. Click Edit dropdown actions. In the Edit dropdown actions window, select Add dropdown action, to apply the properties to the action button, such as label, icon, CSS classes, icon position, text color, and font size. You can apply multiple actions to a dropdown button. This option is displayed only after you select Dropdown button from Display mode. For more information, see To configure dropdown action buttons.
   Edit actions	Specifies the actions to add to the action button. Click Edit actions. In the Edit actions window, select the actions according to your requirements. You can add multiple actions to a single action button and specify the sequence in which you want the actions to be performed. For information about how to configure actions on action button, See Configuring-actions-for-an-action-button.

6. Click Save.

To configure options available from a dropdown action button

1. Log in to BMC Helix Innovation Studio, and navigate to the Workspace tab. 
2. Select the application for which you want to configure dropdown action buttons.
3. Click Views.
4. From Palette, drag the Action button component onto the canvas.
5. In the Properties section, from Display mode, select Dropdown button.
6. Click Edit dropdown actions.

7. To define the action behavior, in the Edit actions window, click Add dropdown action, and provide the following details to configure an Open Approval Console button. 

   Property	Description
   Label	Enter the name for the edit dropdown action; for example, Open Approval Console.
   Icon	Select the icon for the action button; for example,
   Security record definition name	The dropdown action is hidden if you have no access to the selected record definition.
   Security field name	The dropdown action is hidden if you have no access to the selected field, or the dropdown action is disabled if you have View permission for the selected field.
   Security record instance	Define the expression to select the record instance where the dropdown action is hidden if you have no access to the selected field instance. Click Click to build an expression to create the expression.
   Disabled	Define the expression based on which you can disable the action for the particular dropdown action. Click Click to build an expression to create the expression; for example, Status="Open".
   Hidden	Define the expression based on which you can hide the action for the dropdown action. Click Click to build an expression to create the expression.
   Available on devices	Select the device options on which the dropdown action should be visible. You can select from the following options: Desktop Mobile Tablet By default, all three options are selected.
   Edit actions	Define the action to open the Approval Console by performing the following steps: To add an action, click Edit actions. In the Edit actions window, select Launch URL. In the Selected actions section, enter the following details: Condition—Click Click to build an expression to create the condition based on which you want to launch the URL. URL—Click Click to build an expression to create the condition based on which you want to launch the URL. Launch behavior—Select the option to open the target URL you selected. Click Save.

8. Click Save.

The following video shows an example scenario to configure a dropdown action button to open approval console:

To set the access type information for the button

1. Add an action button to a view definition.
   For a detailed step-by-step procedure to add an action button, see To add an action button to a view definition.

2. To set the access type for the button, in the Properties pane on the right side, click the Settings icon , and then specify the following fields for the button in the Security tab:

   Property	Description
   Record definition name	Specifies record definition of the field for which you want to set the access rights. The action button is hidden if the user has no access to the specified record definition.
   Field name	Specifies the name of the field for which you want to set the access rights.  The action button is hidden if the user has no access to the specified field, or disabled if the user only has view permission to the specified field.
   Record instance	Defines an expression that evaluates to a Record ID or a collection of Record IDs. To define an expression, click Click to build an expression. Expression pointing to a record instance that provides the field permission details.

   Important

   You must define the Record Definition Name, Field Name, and Record ID in order to control the hidden, disabled, or enabled state of the view component using the field permission. If you define only Record Definition name or Field Name, then static permissions are considered. If along with Record Definition name and Field name, record instance is also given then static as well as dynamic permissions are considered to evaluate the user's access.

3. Click Save.

The values given in Security tab evaluates to view permission, change permission, or no permission. The action button's visibility state on the user interface is defined when the following requirements are fulfilled: 

To add a button bar to a view definition

Button bar is a view component that can be used to align the action buttons in a series in a view definition.

The following image shows a sample view definition that contains a button bar:

To add a button bar to a view definition, perform the following steps:

1. Log in to BMC Helix Innovation Studio and navigate to the Workspace tab. 
2. Select the application for which you want to add a button bar.
3. On the Views tab, click the name of the view definition in which you want to add a button bar.
4. From the Palette, drag the Button bar component to the canvas.
5. From the Palette, drag the Action button components to the Button Bar and specify the required properties for the Action Buttons. For more information, see To add an action button to a view definition.

6. Click the Settings icon  in the Properties pane, and specify the following properties: 

   Property	Description
   Name	Specifies the name of the button bar.
   Alignment	Specifies the position of action buttons in the button bar.
   Hidden	Turn on the toggle key to hide the Assignment component at runtime, and then select one of the following options: At all times—Select this option if you want to keep the component hidden at all times. When condition is true—Select this option if you want to keep the component hidden only if a certain condition is met. Condition—Build an expression to define a condition. This option is displayed only after you select the When condition is true option.

7. Click Save.

To use one action button to hide another action button

By using the Set Property parameter, you can define multiple actions for an action button by assigning values to the property of the view component.

To hide Action button2 when Action button1 is clicked, perform the following steps:

1. Open the view definition that you want to modify.
2. In the View designer, select Action button1 and click Edit actions.
3. In Edit actions, add Set property action.
4. On the Property path field, by using Click to build an expression, add the Hidden property for Action button2, and click OK.
5. On the Property value field, by using Click to build an expression, enter value 1 to enable Hidden property for the Action button2, and click OK.
6. Save the changes on the Edit actions screen.
7. Save the view definition.

To activate a tab in a Tab Panel by using Set Property

1. Log in to BMC Helix Innovation Studio, and navigate to the Workspace tab.
2. Select the application to which you want to add an action button.
3. On the Views tab, open the view definition from which you want to use the active tab index.
4. From Palette, drag the Action button component onto the canvas.
5. In the Properties section, click Edit actions. 
6. To define the action behavior, in the Edit actions window, select Set Property.
7. In the Selected Actions section, enter the following details:
   • Property path—From Tab Panel > Properties, select Active Tab Index.
   • Property Value—Enter the tab index value that you want to activate. The first tab in the tab panel has tab index value as 0, the second tab has tab index value as 1, and so on. 
8. Click Save. 

To add a loading indicator to a view by using Set Property

A loading indicator is displayed in a view to inform users that an action is in progress and that they should wait for it to complete. A loading indicator is displayed in a view only if an action takes longer than 250 milliseconds. Use the Set Property action to add a loading indicator to the view: 

1. Add an action button to your view. For more information, see Adding an action button to a view.

2. In the Edit actions window, select the Set property action and enter the following details: 

   Property	Description	Example
   Condition	Click Click to build an expression to create a qualification based on which you want to configure a property on your view or component.
   Property path	Click Click to build an expression to select the view on which you want to set the Busy property value.
   Property value	Click Click to build an expression to select the value of the property on the selected view. To display the loading indicator, set the value to true.

To disable or hide the action button based on the grid properties when multiple records are selected

The following video shows an example scenario where the Edit action button is disabled when two rows of the same type, Incident, are selected:

To disable or hide an action button based on the grid column value, perform the following steps:

1. Log in to BMC Helix Innovation Studio, and navigate to the Workspace tab.
2. Select the application for which you want to add a record grid.
3. On the Views tab, click the name of the view definition in which you want to add a record grid component.
4. From Palette, drag the Record grid component onto the canvas as you want it to appear in the application user interface.
5. From Basic Components, drag the Action button component, and add it to the Record Grid.
6. Select the action button and click Properties.
7. Toggle the Disabled or Hidden field to the active state, select When condition is true, and click Click to build an expression.
8. In the Expression builder dialog box, expand Functions > Array.
9. Create an expression with one of the following functions:

• 
  
  • INCLUDES(Selected rows > column name>, defined value)—The action button is disabled or hidden if the defined value is included in the array.
  • SAME(Selected rows > column name)—The action button is disabled or hidden if the column values of the selected rows are the same in the array.
  • SIZE(Selected rows / Selected rows > column name)—The function returns the size or length of the selected rows. Use this function in conjunction with the INCLUDES()or SAME() functions.

The following image shows an example of how you can disable an action button by creating an expression using the SAME() function: