Button#

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.

General Steps#

To use the Button widget in a UI Page, follow the steps below:

1. In any UI Page in Build mode, select the Button from the widgets list located on the left side of the page; drag and drop to the desired place in the UI Page.
2. Enter the Settings section of the widget through the three vertical dots.
3. In the General tab, provide a name and a description for the widget. Use the toggle buttons to specify whether the widget should be visible, display the header, or allow full screen mode. Additionally, determine if the widget can be opened as an image in a new tab or exported as an image. You can also select the navigation mode behavior: open a new page, replace the current page, or none.

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.

   

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 Features.
   System ActionExecute RuleOpen UI PageExecute DEE Action

   

   

   

   

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.

   

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

   

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 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.

     SetupInputs

     

     

   • Button 2: Similarly, select Material.Dispatch as both the Action Button and System Action to automatically fil in the Inputs tab.

     SetupInputs

     

     

2. Configure the Form widget by adjusting the General Settings and defining the Fields as displayed below. For more information on this widget, see Form.

   GeneralFields

   

   

3. Connect the widgets and tasks using the Links diagram as shown below. For more information on using the Links diagram, see Design UI Page.

   

4. To connect the Dispatch Button widget to the Form widget, configure a Load Entity Converter. For more information, see UI Page Converters.

   

5. The final result should look like this.

   

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 GroupWith Action Group

   

   

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 GroupWith Action Group

   

   

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

   

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).

   

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).

   

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.

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 Create UI Page. In this case, name the UI Page Inner UI Page.

   

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 Form widget.

   

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

   

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

   

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.

   

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

   

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

   

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

   

9. In the UI Page created for Button, add another Form widget with a Field named Request and set its Type to String.

   

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).

    

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

    

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).

    

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

    

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

    

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.