Button Properties

Introduction

A button can perform various actions such as calling a microflow or nanoflow or opening a page.

Properties

An example of button properties is represented in the image below:

Button properties consist of the following sections:

• Accessibility (only for web buttons when Render Mode is Link)
• Common
• Design Properties
• Events
• General
• Items (only for a drop-down button)
• Visibility

Accessibility Section

Role Type

The Role type property determines the aria-role attribute value that will be rendered with the button’s HTML. Aria-role attributes can be used to improve accessibility, because devices such as screen readers interpret them and present the semantics of the role to end-users. Possible options are the following:

• Button (default)
• Checkbox
• Link
• Menu item
• Menu item checkbox
• Menu item radio
• Option
• Radio
• Switch
• Tab

Common Section

Design Properties Section

Events Section

General Section

Caption

The Caption property defines a text that will be shown on the button. The caption can contain parameters that are written between braces, for example, {1}.

For more information on using parameters, see the Parameters section below.

Parameters

Parameters are attributes the value of which will be displayed. To view Parameters, do one of the following:

• Double-click the Caption setting in properties

• Double-click the button on the page and click Edit in the General section > Caption:

  

Parameters have the following settings:

• Index – an identification number of a parameter

• Attribute (path) – an attribute a value of which will be displayed

• Format – a format in which an attribute value will be displayed

  

Adding New Parameters

To add parameters, do the following:

1. Place the Button widget in the context of an entity, as in, inside a data container.

2. Double-click the Caption setting in the button widget properties.

3. In the Edit Caption dialog box > Parameters section click New:

   

4. In the Edit Template Parameter dialog box, click Select, choose an attribute and confirm your choice.

5. In the Caption setting, write the text you would like to display and type Index of the parameter you would like to include. In the example below, to include a name of your customer, you need to use indexes {1} for the Name attribute:

   

Performing Other Actions on Parameters

In addition to adding new parameters, you can perform the following actions on parameters:

• Delete – to delete a parameter click Delete or press Delete on your keyboard

• Edit – double-click a parameter to edit it or click Edit

• Move up – to move a parameter up in the list of parameters and also to change its index, click Move up

• Move down – to move a parameter down in the list of parameters and also to change its index, click Move down

  

Tooltip

The Tooltip property determines a text end-users will see in the tooltip that appears when they hover over the button. The tooltip text is translatable. For more information on translatable texts, see Language Menu. If the tooltip is not specified, no tooltip will be shown when hovering over the button.

Icon

The Icon property determines the icon that will be shown in front of the caption of the button. Possible options are:

• no icon
• a glyphicon
• a (bitmap) image

Glyphicons come from the Bootstrap Halflings collection. The advantages of a glyphicon over a bitmap image are that they are scalable, look sharp on high-resolution screens, and their color can be changed by changing the font color. The advantage of an image icon is that it can have multiple colors.

Render Mode

Defines the way the button will be shown to the end-user. Possible options are the following:

• Button – the widget will be rendered as a button
• Link – the widget will be rendered as a hyperlink

Default render mode: Button

Button Style

The Button style property applies a predefined styling to the button. Possible options are the following:

• Default
• Inverse
• Primary
• Info
• Success
• Warning
• Danger

Disabled During Action

This property is only shown when Call a microflow or Call a nanoflow is selected as the on-click event. Selecting Disabled during action disables the button until the action is completed or failed.

Default: true

Items Section

When an end-user clicks a drop-down button, a pop-up window with a list of items opens. Each item performs an event when an end-user clicks this item. Different items can perform different events. For more information on events that can be assigned, see On Click Event and Events Section.

Each item has the following properties:

• Caption – defines a caption of the item

• Action – defines an on-click event performed when the item is clicked (for more information on-click events, see On Click Event and Events Section)

  

Adding New Items

To add items to a drop-down buttons, do the following:

1. Double-click the Items setting in the button widget properties.

2. In the Edit Items dialog box, click New:

   

3. In the Edit Drop-down Button Item dialog box, do the following:

   1. Specify the caption for the item.
   2. Select an image (icon) to be displayed for this item.
   3. Select an on-click event to be performed when the end-user clicks this item.
   4. Click OK.

4. In the Edit Items dialog box, click OK to save your changes and add new item.

Visibility Section

Read More

• Page
• Buttons
• Properties Common in the Page Editor
• On Click Event and Events Section