Flex#

Overview#

The Flex Widget provides a mechanism to define a layout grid. In the following example we use a Flex widget to hold three buttons for a UI Page.

General Steps#

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

1. In any UI Page in Build mode, select the Flex 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.

Widget Customization#

1. Optionally, in the Style tab, you can define a Border Width and Color.

   

2. In the Setup tab, provide the direction of the flex.

   

3. In the Slots tab, define the number of slots and their properties:

   • Name - Enter the name of the slot.
   • Weight - Specify the flexbox growth factor of the slot. This determines how much space the slot will occupy relative to other slots.
   • Hide when disabled - Choose whether to hide the slot when it is disabled by the action's canExecute property. If enabled, the slot will not be visible when the associated action cannot be executed. This option is set to false by default.
   • Action - Select the action to be performed from the MES system when the slot is activated.

   You can add as many slots as needed by selecting the button. To remove a slot, select the button.

   

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

   

5. You can also define the Links between this widget and other elements of the UI Page.

   

6. By saving and closing the settings, the widget will be changed accordingly.