Button Properties

Last update: Edit

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 Common Section

For more information on properties in this section, see the Common Section section in Properties Common for Widgets.

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

2.3 Events Section

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

2.4 General Section

2.4.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, e.g. {1}.

For more information on using parameters, see the [Parameters]() section below.

2.4.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.2.2.1 Adding New Parameters

To add parameters, do the following:

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

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

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

    Adding New Parameter

  4. In the Edit Template Parameter dialog window, 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.2.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.4.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 Translatable Texts. If the tooltip is not specified, no tooltip will be shown when hovering over the button.

2.4.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.4.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.4.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.4.7 Disable During Action

This property is only shown when Call a microflow is selected as an on click event. For more information on click events, see On Click Event & Events Section. The Disable during action disables the button until the action is completed or failed.

Default value: true.

2.5 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 & 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 & Events Section)

    Properties of Items

2.5.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 window, click New:

    Adding New Item

  3. In the Edit Drop Down Button Item dialog window, 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 window, click OK to save your changes and add new item.

2.6 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 for Widgets.

3 Read More