# Button
> [HTML Version](button_widget.html)
This widget allows you to add a button to a page, app or task form. You can use a script to define the on-click behavior of the button.
To configure the widget, drag it from the right-side panel of the [interface designer](interface_designer.md) to the modeling canvas or click **+ Widget**. Read more in the [Form templates](360029250931.md) article. In the pop-up window that opens, configure the widget’s settings.
## Main tab
**(button-1.png)**
- **Display**. Select what the button will look like.
- **Title/Tooltip\***. Add a text that will be shown on the button. You can [link](bind-field-to-widget-option.md) this field with a context variable by clicking **[].**
- **Icon**. Select an icon to be shown next to the button.
- **Inactive**. Enable the option or link it to a variable to set button locking based on certain conditions. For example, the button can remain inactive until required fields are filled in. For more details, see the [Use case for dynamic button locking](#use-case) section.
- **Hide start form**. This option is used for buttons for [launching business processes](#start_process). Enable it if you don’t want the [process start form](360012496011.md#form_tab) configured in the start event to be displayed upon button click. The process execution will start with the activity placed directly after the start event. You can [link](bind-field-to-widget-option.md) the field with a context variable by clicking **[].**
- **Action type**. Select the action that will take place when a user clicks the button:
- [Run a script](#script). Select a function created on the the [Scripts](designer-tabs.md#scripts) tab or create a new one.
- [Select a preset action](#preset_action). Select one of actions available in the system, for example, **Restrict access to data**.
- [Start a process](#start_process). Bind a process to the button to run a process instance.
- [Create an app item](#create_item).
- [Open a link](#open_link). Configure a link to open when a user click on the button.
### Run a script
When a user clicks the button, a predefined script runs. You can use this option if you need to display information depending on a certain condition.
Select a script from the [Scripts](designer-tabs.md#scripts) tab. You can also move to creating a script by clicking **Create**, entering the function’s name, and clicking **Open**. Read more about creating client and server scripts in the [Scripts in widgets](client_server_scripts.md) article.
### Run a preset action
When a user clicks the button, a preset action runs. Select the action in the field below. Note that this option is not available for pages.
Actions 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** type apps:
- **Add version**.** **Upload a new version of the document.
- **Send**. Send the document for approval or for information.
- **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 a 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, etc. 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 an app item
When a user clicks the button, a form for creating a new app item opens. Some fields on this form can be automatically pre-filled to save time and avoid human error. To do that, fill out the input parameters.
For example, 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 will be pre-filled with the current contract. To set this up, make sure that that there is an **App** type field on the **Acceptance Certificates** app form for storing the contract. Then configure 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. In the left column, you can select the **Certificate number** field that you want to fill out. In the right column select the **Contract number** field that you want to pass to the acceptance certificate.
**(button_widget-2.png)**
**Note**: you can only map fields of the same type: a **String** type field with another **String** field, a **Number** type 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.
### Open a link
When a user clicks the button, a link opens.
You can link the button to a **Text** context property. For example, for users can open instructions or company policies. To set the link up, click (bind_table-icon.png), then click **** and select the text variable in the list.
You can also enable the **Open the link in a new tab** option.
## Events and System tab
These tabs are similar for all the widgets: visibility and access settings, on-click behavior and so on. To learn more, see [System widget settings](common_widget_settings.md).
To finish configuration, click **Save**. To make the form available to users, click **Save** and **Publish** in the designer’s toolbar.
## Use case for dynamic button locking
Let’s assume, there is a **Credit calculator** page. On this page, users fill in the **Percentage**, **Amount**, **Credit term (months**) fields and calculate the payment schedule by clicking the button.
Let’s configure dynamic button locking so that it is active only when the user fills in all the required fields.
**(button-4.png)**
To do this:
1. On the [created](360009924451.md) **Credit calculator** page, click the gear icon and select **Widget Builder**. The [interface designer](interface_designer.md) will open.
2. Add an auxiliary variable. It will be used in the script to configure the change of the **Calculate payment schedule** button when the required fields are filled in.
To do this, go to the **Context** tab and create a variable of the [Yes/Now switch](360009707032.md#yes-no-switch) type. Name it **Button disabled**. In the **Property Name\*** field, specify \[OBJECT\]. This code will be used on the script on the next step.
3. Now, write a script to determine the value of the created variable. If the **Percentage**, **Amount**, **Credit term (months)** fields are not filled in, the variable is set to \[OBJECT\]. If the user enters the values in these fields, the variable is set to \[OBJECT\]. It means that the user can click the button.
To configure this, go to the **Scripts** tab and add the following script:
````
async function onInit (): Promise \{
Context.data.button\_disabled = true;
\}
async function onFieldsChange(): Promise \{
if (Context.data.sum?.cents \&\& Context.data.sum?.cents > 0 \&\& Context.data.term \&\& Context.data.term > 0 \&\& Context.data.percentage \&\& Context.data.percentage > 0) \{
Context.data.button\_disabled = false;
\} else \{
Context.data.button\_disabled = true
\}
\}
4. ````
To track field completion in the added script, configure fields to trigger an event when their values change. Here is how:
1. Go to the **Template** tab and open the settings for the **Percentage** field.
**(button-2.png)**
2. In the pop-up window, go to the **Events** tab. In the **On value change handler** option, add the \[OBJECT\] function from the previously created script.
**(button-3.png)**
3. Save the settings.
4. Repeat the steps above to add the \[OBJECT\] function to the **Amount** and **Credit term (months)** fields.
5. To dynamically enable and disable the **Calculate payment schedule** button based on field completion, bind it to the previously created auxiliary **Button disabled** variable. For this:
1. Open the button settings. In the **Inactive** option, click **(button-5.png)** and** **.
2. In the pop-up window, select the **Button disabled** property and save the button settings.
3. Publish the updated page.
Now, the **Calculate payment schedule** button becomes active only when all fields are filled. If any field is empty, the button remains inactive.