Low-code designer > Set up interfaces > Widget types > Common widgets / Button

Button

This widget allows you to add a button to a page, an app or task form. You can use a script to define the behavior of the button on click.

To configure the widget, drag it to the canvas or click +Widget. To learn more, see Form templates. Enter the settings in the pop-up window.

Main tab

button_wgt

 

  • Button color. Select what the button will look like.
  • Title/Tooltip*. Add a text that will be shown on the button.
  • Icon. Select an icon to be shown next to the button.
  • Hide start form. If you are planning to bind the start of a business process to the button, check this option so that the start event form is not shown to the users. You can link this field to a context variable by clicking bind_table-icon;
  • Action type. Select the action that will take place when a user clicks the button:
    • select a script that is already written on the Scripts tab, or create a new one;
    • select one of actions available in the system;
    • start a process;
    • use the button to create new app items;
    • configure a link to open.

Let's take a closer look at these actions.

 

Script

When a user clicks the button, a script runs. Use this option if you need to display information depending on conditions.

You can select a script from the Scripts tab or create a new one. You can read more about creating Client and Server scripts in Scripts in widgets.

Preset actions

When a user clicks the button, a preset action runs. Select the action in the field below. Note that this option is only active for forms.

Action available for all types of apps :

  • Access settings. The user can change the access permissions for app items. This is only available if you have enabled the Restrict access to data option in the app's settings.

Actions available for Document apps:

  • Add version. Upload a new version of the document;
  • Send. Send the document for approval or to inform a coworker;
  • Version list. Open a list of all the file's versions.

Actions available for business process tasks:

  • Reassign task. Reassign the task to someone else;
  • Task menu.  Open the task's menu with available actions:
    • Reassign;
    • Change the participants list;
    • Change start date;
    • Schedule in the calendar;
    • Reschedule in the calendar;
    • Change task progress.

 

Start process

When a user clicks the button, a process starts. For illustration, let's set up the start of the approval process on the Contracts app item page:

  1. In the Business process* field select the approval process.
  2. In the Link to field field select the Contract variable. It will store the current item of the Contracts app.
  3. Next, you can add certain contract data to the process: its number, date created, counterparty. To do that, click Configure input parameters.
  4. In the provided window, map the process variables with the Contracts app properties. In the left column select the process context properties that you want to fill in. In the right column select the Contracts app properties that you want to send to the process.

You can also enable the Show pop-over next to the button option. In this case, when the user clicks on the button, a pop-over window opens where the user can enter the process instance name and run it.

Create app item

When a user clicks the button, a form for creating a new app item opens. Some fields on this form can be autoamtically pre-filled to save time. To do that, fill out the input parameters.

For illustration, let's set up a button on the Contracts app item page. We want a new acceptance certificate to be created when we click on the button. The Contract field should be pre-filled with the current Contract. To set this up, make sure that that there is an app-type field on the Acceptance Certificate app form for storing the contract. Then set up the button:

  1. In the App field select Acceptance Certificate.
  2. In Link to field select the Contract property that will be added to the current Contract app item.
  3. Then you can send contract details to the acceptance certificate: the serial number, date created, counterparty. To do that, click Configure input parameters.
  4. In the provided window map the properties of the Acceptance Certificates and Contracts apps. For instance, in the left column you can select the Certificate number field that you want to fill out. In the right column select the Contract serial number field that you want to pass to the acceptance certificate.

Please note that you can only map fields of the same time: a String file with another String filed, a Number field with another Number field, and so on.

Now, when a user clicks on this button, the form for creating a new acceptance certificate will open. The Contract field will store the contract from the page of which the user clicked the button. The Certificate number field will be pre-filled with the contract's serial number.

Link

When a user clicks the button, a link opens.

You can link the button to a Text context property. For example, this way users can open instructions or company policies. To set the link up, click bind_table-icon, then click <Not defined> and select the text variable in the list.

System tab

The system settings are similar for all the widgets: visibility and access settings, on-click behavior and so on. To learn more, see System widget settings.

To finish the button's setup, click Save and Publish.

 

Example

In the following case, the configured button widget discards all changes.

But2

Found a typo? Highlight the text, press ctrl + enter and notify us