Skip to content

Component#

componentIcon

Overview#

The Component widget allows you to access any of the available Critical Manufacturing base visual components (or user-created components) and insert them in a UI Page, thus avoiding the need to create a separate widget for each of the possible application components. This provides the possibility of rendering both simple and complex widgets available elsewhere in the application realm.

General Steps#

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

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

Screenshot showing settings for a Wadget Component.

Widget Customization#

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

    componentStyle

  2. In the Component tab, you can choose the desired component and customize its appearance, by defining the following settings:

    • Package - Select the package where the desired component is located.
    • Component - Choose the specific component you wish to use from the selected package.
    • Component full size - Determine whether the component should be displayed at its full size. This option is set to false by default.
    • Horizontal Padding - Set the padding for the component's left and right sides, measured in pixels (px). This defines the horizontal spacing around the component.
    • Vertical Padding - Set the padding for the component's top and bottom sides, measured in pixels (px). This defines the vertical spacing around the component.

    componentWidget

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

    componentWidget

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