Button

Button is a simple yet functional component that allows you to call actions, add navigation options, etc. Buttons can be used as standalone components, or as building blocks in another component, e.g. a modal.

Methods

Method	Description
click()	calls for a button click and triggers an assigned action
setDisabled(disabled: boolean)	sets button's state (enabled/disabled)
setURL(url: string)	sets the navigation URL

Triggers

Triggers allow you to launch certain actions based on different events.

On Click	Calls for an action when you click a button
On Init	Calls for an action on component initialization, e.g., page refresh

Working with a button

Buttons are used to call for certain actions. Let's check the case of adding a button that will remove the employee from the employees' list.

1. Start with adding a button to the working area. You can customize the button as you need, e.g. change its color, and style (filled, outline, or ghost) and add an icon.

2. Navigate the Triggers tab and select On Click trigger. Click Add new action to create an action that will remove the information about a selected employee.

3. Configure an action that will delete the employee:

Hiding a button based on a condition

You might need to hide a button from the users based on a certain condition, e.g. a user's role. Let's say you have an employees list, and you would like to show the Approve promotion button to an HR department only. Here's how to do that:

1. Add a button to the working area and rename it as required, e.g. Approve promotion.

2. Click the button to open its settings. Navigate the Condition field.

3. In the condition field, specify the required condition, e.g. {{user.role == 'hr'}}

To manage the button once it's been hidden, navigate the App structure tab in the left menu, and find it in the components list:

Disabling a button

The buttons can be disabled based on a certain condition. Let's review the case when you have an Activate button available only for the employees who have a "not active" status on the employees' list.

1. Add a button and rename it as required, e.g. Activate.

2. Click the button to open its settings. Navigate the Disabled field.

3. Click Yes and switch to JS to set the condition.

4. Specify the code using the following pattern: {{ui.employeesDetail.value.status == 'active'}}

Adding navigation with a button

To add navigation using a button, follow this guide:

Adding navigation to application

You might also be interested in using a button inside the table:

• Adding action button to the table

• Hiding a table button based on a condition