Designing Apps - Button Widget

Button allows you to perform global actions and actions that operate on sections. It gives you the possibility to add multiple actions to be triggered at the same time.

All modifications of the operation and the appearance of the button are possible through the button options window, available when you select button in the designer.

After selecting the button, the properties window will appear on the right side of the screen:

1. Options tab allows you for a smooth transition between the other designer tabs
2. Button section settings allow you to configure the information about the section name, visibility, hidden mode, auto wide and visible caption on the added button.
3. Available formatting settings allow you to change the color, font type and size, manipulation of the text, change the color of the button, and caption alignment options.
4. Clicking add action button allows you to add, select and configure button actions.

Available actions that can be triggered when you click the button:

• Add table row
• Booking.com integration
• Check IBAN number
• Clear section
• Copy to clipboard
• Create document from rich text
• Create pdf from app
• Download all attachments
• Execute action in apps
• Export from database
• Export from section to csv.
• Go back
• Go to homepage
• Import to database
• Merge tables
• Open URL
• Print
• Rebind section
• Recalculate data in apps
• Refresh page
• Reset editable cell
• Run app with one param
• Set cell value
• White list (IBAN check)

 To add action to the button, select it on the application designer (1), go to the options of the widget, and then add the action by using add action button(2). Selecting the type of an action is possible by clicking on the drop-down list (3), to remove an action click delete button (4).

Adding an icon to a widget - button

As of version 2.2, it is possible to add an icon to a button widget. In order to assign an icon, it is first necessary to specify the position of the icon, i.e. on which side it is to be added relative to the header.

Setting the icon position

Then select the icon from the list or specify it using formulas.

Selecting an icon from the list

Button with added icon

Style - Button

New styles section available since version 2.2

• Button:
  • We can choose a button style from the list of available styles or calculate it using formulas. Additionally, we can set the style from the formatting bar, add borders, and save the selected style.
• Button (hover):
  • Style options can be specified similarly to the button, with the difference that the style will be applied when hovering over the button.
• Button icon: 
  • We can choose the style of the icon in the button from the list of available styles or calculate it using formulas. In addition, we can set the style from the formatting bar, save the selected style and adjust the distance of the icon from the header.
• Button icon (hover): 
  • Style options can be specified similarly to the icona button, except that the style will be applied when the cursor hovers over the icon.

Next to each style property, there is an icon  thet allows you to:

- reset the applied style

-save the selected style