Skip to content

Entity Attachment#

entityAttachmentIcon

Overview#

The Entity Attachment widget is used to display attachments for a given instance. You can also customize the appearance of the attachments component. An example is shown below, where this widget is used to show all the attachments for a certain Material.

entityAttachmentExample

General Steps#

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

  1. In any UI Page in Build mode, select the Entity Attachment 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 a widget for attaching entities.

Widget Customization#

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

    Screenshot showing an Entity Attachment Style widget customization interface with options for border width and color.

  2. In the Setup tab, define the Entity Type and the Entity.

    Screenshot showing a setup screen for entity attachments with fields for defining Entity Type and Entity.

  3. In the Layout tab, the visual properties of the widget are configured, such as:

    • Show Entity - Controls the visibility of the Entity. This option is set to true by default.
    • Show Action Bar - Controls the display of the Action Bar. This option is set to true by default.
    • Show Add Button - Controls the display of the Add Attachments dialog when the Entity has no attachments. This option is set to true by default.
    • Show Open Button - Controls the display of the Open button in the Action Bar. For attachments with URL sources, this button opens the URL in a new browser tab. This option is set to true by default.
    • Show Download Button - Controls the display of the Download Button in the Action Bar. This option is set to true by default.
    • Alow Filters - Controls the display of the Filter Bar. This option is set to true by default.
    • Allow Multi-Selection - Enable the multiple selection of the attachments. If disabled, it defaults to Selection Mode None. This option is set to true by default.
    • Alow Open - Makes the attachment names in the grid clickable so that they can be visualized via the View Attachment wizard or open a URL in case the Attachment is a URL. This option is set to true by default.
    • Default Page Size - Sets the page size of the attachments data grid. The default page size is 10.

    Screenshot showing a widget customization interface with an option labeled "Widget Entuy Attachinents" set to 9.

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

    Screenshot showing a widget customization page with options for linking to other UI elements.

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

Real Use Case#

The example below demonstrates how to link a Entity Attachment widget to a Form widget.

  1. Configure Entity Attachment widget, namely the Setup tab to choose the Entity Type and the Entity.

    Screenshot showing a configuration screen for an Entity Attachment widget with options for selecting Entity Type and Entity.

  2. Configure the Form widget Fields as shown below.

    Screenshot showing a configuration of the Form widget fields for an entity attachment use case.

  3. In the Links tab of the Entity Attachment widget, set up the link details as shown below.

    Screenshot showing the setup of link details in the Entity Attachment widget's Links tab.

  4. Alternatively, you can use the Links Diagram in the UI Page builder.

    Screenshot showing a Links Diagram in the UI Page builder, with various entities and materials listed.

  5. The final result should resemble this:

    final result