Defining Toolbar Actions Using an Infotable

Mashup Builder > Widgets > Standard Widgets > Toolbar Widget (Themable) > Defining Toolbar Actions Using an Infotable

Use the ToolbarAction data shape to create an infotable that defines the actions to display on the toolbar. Each row in the infotable is an action on the toolbar. You can create an infotable to configure the widget in the following ways:

• Set the number and type of actions to display.

• Control the order and position of the actions.

• Control the visibility of each action based on a condition or an event.

• Set the maximum width for each action.

The following procedure outlines the steps to add and configure a Toolbar widget.

1. Set the functional requirements, and then design the actions to display on the toolbar.

2. In Composer, create a toolbar configuration service that is formatted using the ToolbarAction data shape.

3. In Mashup Builder, add the Toolbar widget to the mashup, and then add the entity with the toolbar configuration service.

4. Bind the All Data property of the toolbar service to the widget ActionsData property.

Bindable properties for each action on the toolbar are displayed on the Properties panel in the following format:

• <ActionID>_<PropertyName>

5. On the Properties panel, configure the widget, and then create bindings to other widgets or functions.

For more information about the widget properties, see Toolbar Widget (Themable).

Common Field Definitions

• actionID—The ID of the action in the infotable. This value is used to identity each action when configuring the widget on the Properties panel in Mashup Builder.

• actionMaxWidth—The field definition to specify a custom maximum width for an action. By default, each action on the toolbar is displayed using a maximum width of 100 pixels.

• actionTooltip—Defines the content of a tooltip message. You can also add an icon to the tooltip using the actionTooltipIcon property.

• actionVisible—Controls the visibility of an action on the toolbar.

• actionDisabled—Disables an action. You can control this value programmatically to enable or disable an action based on a condition in the mashup.

• actionLabel—The label to display for an action on the toolbar. For button and toggle button actions, the label is displayed within the action.

• alignRight—Aligns the action to the right region.

In addition to the common properties, the data shape contains field definitions that enable you to configure the Button, Toggle Button, Link, and Dropdown actions. The following section lists the available properties for each action type with an example.

Button

buttonIcon—Specifies the icon to display within the button by referencing a media entity name.

You can display SVG icons from the SVG icons library using the following syntax cds:<icon_name>

For more information about the available icons, see Using SVG Icons.

buttonType—Specifies the visual styling to use for the button. Options: primary, secondary, tertiary, danger, transparent.

Toggle Button

toggleChipIcon—Specifies whether to display an icon that indicates the toggle button state. Options: true, false.

toggleLabelPosition—Controls the position of the label relative to the icon. Options: left, right.

The toggle button action is displayed as a check box and a label in the overflow menu when the viewport size is too small to display all actions.

Link

linkTargetWindow—Specifies how the linked URL opens. Options: new, same, popup.

linkType—The link type.

Dropdown

• dropdownSeelctedText—Enables you to select an item from the drop-down list by default using the value text. For example, use the following expression to select Item 2 by default:

dropdownSeelctedText: "value2";

• dropdownLabelPosition—Specifies the position of the drop-down list label. Options: top, left

• dropdownData—A JSON value that contains data for each item in the list. Each item is represented by a JSON object that contains the fields names and associated values. For example:

[{label:"Item 1", value: "value1"}, {label:"Item 2", value: "value2"}, {label:"Item 3", value: "value3"}]

Menu Button

• menuButtonData—A JSON value that contains data for each menu item in the menu button. Each item is represented by a JSON object that contains the fields names and associated values based on the MenuEntry data shape. For example:

[
  {
    "menuId": "item1",
    "title": "Item 1",
    "linkType": "Mashup",
    "linkDestination": "Item1Mashup",
    "isDefault": false,
    "parentMenuId": "",
    "imageURL": "item1_icon.png",
    "linkTarget": "Replace",
    "description": "Description for Item 1"
  }
]

• DisplayMenuIcons—When false, icons for menu button items are hidden.

• allowMissingMenuIcons—When false and DisplayMenuIcons is true, a default icon is displayed next to menu items without a specified icon in the menu button data.

• selectedDataChanged—A binadable event that triggers when a menu item in the menu button is clicked.

Adding a Data Filter

You can use the widget properties to add and configure a filter on the left or right side of the toolbar. For more information, see Toolbar Widget (Themable).

Arranging Actions on the Toolbar

Use the widget data service infotable to arrange actions on the toolbar. Actions are sorted based on their order in the infotable. In addition, you can align actions to the right of the toolbar using the alignRight option.

ToolbarAction Data Shape

The following table lists the field definitions of the ToolbarAction data shape.

Field Definition

Description

Base Type

actionMaxWidth

The maximum width of the action on the toolbar.

NUMBER

toggleState

The state of the toggle switch.

BOOLEAN

toggleChipIcon

Shows or hides the chip icon, which is used to indicate selection.

BOOLEAN

actionTooltip

The action tooltip.

STRING

actionVisible

Controls the action visibility.

BOOLEAN

alignRight

Aligns the action to the right side of the toolbar. To align the action to the left side, set the value to false or empty.

BOOLEAN

actionLabel

The action label.

STRING

actionTooltipIcon

The icon displayed within the action tooltip.

IMAGELINK

actionType

The type of element to display for the toolbar action (button, link, drop-down, toggle button, or menu button).

STRING

linkDestination

The URL for the link.

STRING

buttonIcon

The icon to display on thebutton.

IMAGELINK

actionDisabled

Controls whether the action is interactive or disabled.

BOOLEAN

buttonType

The variant to display for buttons and menu buttons. You can select Primary, Secondary, Tertiary, Danger, or Transparent.

STRING

dropdownData

A JSON value that contains data for each drop-down list item. Each item is represented by a JSON object that contains the item label, value, and state (optional).

JSON

actionId

This field definition is used as a primary key for the infotable.

A unique identifier for each row in the infotable. Each ID is used as a prefix for the bindable action properties on the Properties panel in Mashup Builder.

STRING

linkTargetWindow

Controls how the link target window opens. You can open the link in a new window, current window, or a popup dialog box (New, Same, or Popup).

STRING

linkType

The link type.

STRING

dropdownSelectedText

The string value of the item to select in the drop-down list.

STRING

toggleLabelPosition

Controls the position of the toggle button label relative to the state icon. Options: left,right

STRING

menuButtonData

A JSON value that contains data for each menu item in the menu button. Each item is represented by a JSON object that contains the fields names and associated values based on the MenuEntry data shape.

JSON

displayMenuIcons

When false, icons for menu button items are hidden.

BOOLEAN

allowMissingMenuIcons

When false and DisplayMenuIcons is true, a default icon is displayed next to menu items without a specified icon in the menu button data.

BOOLEAN

Was this helpful?