---
tags:
- UI Page widgets
alias: user-guide-uipage-widgets-button
widgetname: Button
description: "A button widget executes actions, customizable with style and behavior options, including system, rule, page, and DEE actions"
---

# Button

![uiButton Icon](images/uiButtonIcon.png)

## Overview

The Button widget provides a mechanism to execute an action in the system. An example is shown below, where a UI Page possesses three Button widgets to perform **Material** operations.

![ui Button](../chart-widgets/images/uiPageExample5.png)

## General Steps

{% include-markdown 'includes/pages/ui_widgets_general_steps_with_behavior.md' %}

![ButtonGeneral](images/button_general.png)

## Widget Customization

1. Optionally, in the **Style** tab, you can customize the appearance of the widget with the following properties:

    * **Border Width** - Choose from the available options to set the thickness of the border: Thinner, Thin, Medium, Thick, and Thicker.
    * **Border Color** - Select the color for the border using the color picker or by entering RGB coordinates.
    * **Font** - Choose the desired font type for the button text.
    * **Font Size** - Set the size of the text. Options include Extra Small, Small, Normal, Large, Extra Large, and Dynamic (which adjusts based on the widget's size).
    * **Use Primary Style** - Decide whether to use the system's primary style. If enabled, this option prevents customization of the Font and Background Color. This option is set to `false` by default.
    * **Font Color** - Select the color for the text using the color picker or by entering RGB coordinates.
    * **Background Color** - Choose the background color of the button using the color picker or by entering RGB coordinates.

    ![ButtonSetup](images/button_style.png)

2. In the **Setup** tab, you can configure the button to perform one of four types of actions: System Action, Execute Rule, Open UI Page, or Execute DEE Action. For each Action Type, the system will show you the different options available, as shown in the images below. You will also be able to customize the Action Button even further by specifying the following options:

     * **Refresh page on success** - Choose whether the page should refresh upon successful completion.
     * **Text** - The text to display on the action button.
     * **Icon** - The icon to use for the action button.
     * **Security Feature** - A security feature that restricts access to users without the specified feature. This is a free text entry but must exist in the system. For more information, see [[user-guide-security-features]].

    === "System Action"

        ![ButtonSetup](images/button_setup.png)

    === "Execute Rule"

        ![ButtonSetup](images/button_setup_rule.png)

    === "Open UI Page"

        ![ButtonSetup](images/button_setup_uipage.png)

    === "Execute DEE Action"

        ![ButtonSetup](images/button_setup_dee.png)

3. Optionally, define the **Inputs**. Note that some System Actions, such as Area, Material, or Maintenance System Actions, will have predefined inputs that cannot be modified. You may add additional inputs as needed.

    ![ButtonInputs](images/button_inputs.png)

4. Optionally, define the **Links** between this widget and other elements of the UI Page.

    ![ButtonLinks](images/button_links.png)

5. Select **Save and Close** to complete the widget configuration.

## Real Use Cases

### Connecting a Form with Button Widgets

To help you take full advantage of the Button widget, the following scenario demonstrates how to connect two Button widgets and a [[user-guide-uipage-widgets-form]] widget.

1. Configure the Button widgets
      * **Button 1**: Select the Action Button and Action Type. In this example, the `Entity.Open` system action was selected, which automatically filled the Inputs tab.

        === "Setup"

            ![ButtonSetup](images/button_setup_example.png)

        === "Inputs"

            ![ButtonInputs](images/button_inputs_example.png)

      * **Button 2**: Similarly, select `Material.Dispatch` as both the Action Button and System Action to automatically fil in the Inputs tab.
  
        === "Setup"

            ![ButtonSetup](images/button_setup_example2.png)

        === "Inputs"

            ![ButtonInputs](images/button_inputs_example2.png)
  
2. Configure the Form widget by adjusting the General Settings and defining the Fields as displayed below. For more information on this widget, see [[user-guide-uipage-widgets-form]].

    === "General"

        ![formGeneral](images/form_general.png)

    === "Fields"

        ![formFields](images/form_fields_example.png)

3. Connect the widgets and tasks using the Links diagram as shown below. For more information on using the Links diagram, see [[user-guide-uipages-design]].

    ![Use Case Button](images/use_case_button_widget_links.png)

4. To connect the Dispatch Button widget to the Form widget, configure a Load Entity Converter. For more information, see [[user-guide-uipages-converters]].

    ![Use Case Button](images/use_case_button_widget_converter.png)

5. The final result should look like this.

    ![Use Case Button](images/use_case_button_widget.png)

### Adding Action Buttons to a UI Page

You can customize a UI Page by adding custom buttons to the top ribbon, known as Action Buttons. In this scenario, we will create a UI Page with two custom Action Buttons: one to open a UI Page and another to open a UI Wizard.

1. In the UI Page Settings wizard, navigate to the Action Buttons tab, and add two Action Buttons: `Open UIPage` and `Open UIWizard`. Optionally, group the Action Buttons by defining an Action Group name (for example, `Open`).

    === "Without Action Group"

        ![Screenshot showing two action buttons added to a UI page: "Open UI Page" and "Open UI Wizard".](images/add_action_buttons.png)

    === "With Action Group"

        ![Screenshot showing two action buttons added to a UI page: "Open UIPage" and "Open UIWizard".](images/add_action_buttons2.png)    

2. The newly create Action Buttons will appear on the top ribbon of the UI Page. If an Action Group was specified, the group name will replace the default `Custom` label.

    === "Without Action Group"

        ![Screenshot showing the newly created action buttons on the top ribbon of a UI page.](images/added_action_buttons.png)

    === "With Action Group"

        ![Screenshot showing the newly created Action Buttons on the top ribbon of a UI Page.](images/added_action_buttons2.png)   

3. Next, select the Action Buttons Settings, accessible through the three dot menu, as shown in the image below.

    ![Screenshot showing the Action Buttons Settings options within a UI page.](images/action_buttons_settings.png)  

4. In the Action Buttons Settings for the Open UIPage button, navigate to the Setup tab, and choose the Open UI Page Action Type. Additionally, specify the target UI Page (for example, the `StepMaterials` system UI Page).

    ![Screenshot showing the Action Buttons Settings for the Open UI Page button in the Setup tab.](images/action_buttons_setup.png)

5. In the Action Buttons Settings for the Open UIWizard button, navigate to the Setup tab, and choose the Open UI Page Action Type. Additionally, specify the target UI Wizard (for example, the `Cmf_Material_Hold_Wizard` system UI Wizard).

    ![Screenshot showing the Action Buttons settings for the Open UIWizard button, specifically the Setup tab with the Open UI Page Action Type selected.](images/action_buttons_setup2.png)

6. Finally, select the Save button followed by the Close button to exit the editor mode. If all steps were followed correctly, the final result will resemble the example in the video below.

    <!-- Video filename: ui_action_buttons_working_simple.mp4 -->
    {% set video_id = '7fb7de3778179feee509ecbdf3d6050c' %}
    {% include-markdown 'includes/cloudflare_stream.md' %}

### Supplying Context to UI Pages/Wizards with Action Buttons

In addition to opening UI Pages or UI Wizards, Action Buttons can also be used to supply context to these components. For this scenario you will need a UI Page and a UI Wizard.

1. Start by creating a UI Page. For more information, see [[user-guide-uipages-create-uipage]]. In this case, name the UI Page `Inner UI Page`.

    ![Screenshot showing a UI wizard with action buttons for creating an "Inner UI Page".](images/create_inner_ui_page.png)

2. Add a Form widget to the UI Page, with a Field named `Request` and set its Value Type to `String`. For more information, see the [[user-guide-uipage-widgets-form]] widget.

    ![Screenshot showing a UI page with an added Form widget containing a Field named "Request" and two action buttons.](images/add_form_widget_action_buttons.png)

3. Use the Properties tab in the UI Page Settings to define a property similar to the one created in the Form widget.

    ![Screenshot showing a UI page with action buttons, illustrating the step of defining a property similar to the one created in the Form widget.](images/form_widget_properties_action_buttons.png)

4. Connect the Form and the UI Page property using the Links diagram, as shown below.

    ![Screenshot showing a UI page with action buttons connected to a form via a links diagram.](images/form_widget_links_action_buttons.png)

5. Next, create the UI Wizard (for example, `UI Wizard Example`), using a similar process as mentioned in step 1. The only difference is selecting `Wizard` as the UI Type.

    ![Screenshot showing a UI page with a heading "Create UI Page" and fields for input.](images/create_ui_wizard.png)

6. Add a Form widget to the UI Wizard, with a Field named `Cookie Flavor` and set its Value Type to `String`.

    ![Screenshot showing a UI wizard page with an added Form widget, containing a Field named "Cookie Flavor" with a String Value Type.](images/add_form_widget_cookie_flavor.png)

7. Use the Properties tab in the UI Wizard Settings to create a property similar to the one defined in the Form widget.

    ![Screenshot showing Properties tab in UI Wizard Settings with example property for Form widget.](images/form_widget_properties_cookie_flavor.png)

8. Connect the Form and the UI Wizard property using the Links tab, as shown below.

    ![Screenshot showing a UI wizard page with settings options, including links to connect a form and display details.](images/form_widget_links_cookie_flavor.png)

9. In the UI Page created for [[user-guide-uipage-widgets-button#adding-action-buttons-to-a-ui-page]], add another Form widget with a Field named `Request` and set its Type to `String`.

    ![Screenshot showing a UI page with an added Form widget containing a Field named "Request" and two action buttons.](images/add_form_widget_action_buttons.png)

10. Update the `Open UIPage` button Settings. In the Setup tab, replace the `StepMaterials` page with the page you created (in this case, the `Inner UI Page`).

    ![Screenshot showing a setup wizard for an "Inner UI Page" with an "Open UIPage Settings" button.](images/action_buttons_setup_inner.png)

11. In the Inputs tab, add an input named `Request` with Type set to `String`.

    ![Screenshot showing a UI page with action buttons and an "Inputs" section containing a field labeled "Request" with type set to "String".](images/action_buttons_inputs_inner.png)

12. Similarly, update the `Open UIWizard` button Settings and replace the `Cmf_Material_Hold_Wizard` with the wizard you created (in this case, the `UI Wizard Example`).

    ![Screenshot showing a UI page with an "Open UMicard Settings" action button.](images/action_buttons_setup_wizard.png)

13. In the Inputs tab, add an input named `CookieFlavor`, with Friendly Name `Cookie Flavor` and Type set to `String`.

    ![Screenshot showing an action button labeled "Open UNVicard Settings".](images/action_buttons_inputs_wizard.png)

14. Connect the Form widget in the UI Page to the Action Buttons using the Links diagram, as shown below.

    ![Screenshot showing a UI page with action buttons and a linked form widget.](images/use_case_3_links.png)

15. Finally, select the Save button followed by the Close button to exit the editor mode. If all steps were followed correctly, the final result will resemble the example in the video below.

    <!-- Video filename: ui_action_buttons_working_simple.mp4 -->
    {% set video_id = '7fb7de3778179feee509ecbdf3d6050c' %}
    {% include-markdown 'includes/cloudflare_stream.md' %}