Button Properties

Last modified: April 20, 2023

1 Introduction

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

2 Properties

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

Button Properties

Button properties consist of the following sections:

2.1 Accessibility Section

2.1.1 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

2.2 Common Section

For more information on properties in this section, see the Common Section section in Properties Common in the Page Editor.

2.3 Design Properties Section

The Design Properties allow you to change spacing and alignment of the widget and hide it on phone, tablet, or desktop, if needed. Design properties may vary depending on the type of the widget. For example, for the text widget you can change its font weight, color, alignment, and letter case.

2.4 Events Section

For more information on properties of this section, see the Event Actions section of On Click Event & Events Section.

2.5 General Section

2.5.1 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.

2.5.2 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:

    Opening Parameters

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

    Parameter Settings
2.5.2.1 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:

    Adding New Parameter
  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:

    Parameter Example
2.5.2.2 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

    Parameter Actions

2.5.3 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.

2.5.4 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.

2.5.5 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

2.5.6 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

2.5.7 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

2.6 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)

    Properties of Items

2.6.1 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:

    Adding New Item
  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.

2.7 Visibility Section

Visibility determines whether a widget is displayed to the end-user as part of the page.

For more information on properties of this section, see the Visibility Section section in Properties Common in the Page Editor.

3 Read More