Multimedia#

Overview#

The Multimedia widget allows you to show any type of Document, including selecting the display mode for images and videos.

General Steps#

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

1. In any UI Page in Build mode, select the Multimedia 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, specify the Document to be displayed. You can select the Source as either a Document or a Url. If the chosen Source contains video or image files, you can customize their display using the available Fitting Options:

   • Standard - maintains the original dimensions of the file without scaling.
   • Stretch to Fill - scales the content to fill the container, potentially distorting the aspect ratio.
   • Fit within Container - scales the content to fit inside the container while preserving the aspect ratio.
   • Cover - scales the content to cover the entire container, potentially cropping portions to maintain the aspect ratio.
   DocumentURL

   

   

3. You can also define the Links between this widget and other elements of the UI Page. As this widget doesn't provide any outputs it can only be used as target.

   

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

Real Use Case#

Using Entity Pictures#

The Multimedia Widget enables you to display files uploaded to your MES. To set it up, follow the steps below:

1. Add an image to any MES entity. In this example, an image was added to a Material entity named Cookie A1 by editing the Material and pressing the icon beneath the entity icon. For more information, see the Edit Entity section.

   

2. In the UI Page, select the Settings button and add two new Properties: Cookie A1 and Entity Picture.

   Cookie A1Entity Picture

   

   

3. Add a Multimedia widget to the UI Page and create Links between the UI Page and the Multimedia widget, as shown below.

   

4. Add two converters to the previous link: a Load Entity and an Any to Any Property. For the Any to Any Property converter, set the Key Property to EntityPicture.

   Load EntityAny to Any Property

   

   

5. The final result should resemble the example shown below.

   UI PageLinks

   

   

Using Entity Attachments#

You can also use a Multimedia widget to display attachments from an MES entity. To configure it, follow the steps below:

1. Add attachments to an MES entity. In this example, two attachment files (an image and a PDF file) were added to Cookie A1. For more information, see the Attachments section.

   

2. In the UI Page, select the Settings button and add a Property named Cookie A1.

   

3. In the Settings wizard of the UI Page, add a new Task. Set it as a Service Call to fetch the entity attachments.

   

4. In the Service Call task, select the Settings button and choose the Service Contracts: EntityType > GetAttachmentsForEntity.

   

5. Add a Link between the UI Page and the Service Call task in the Settings wizard of the UI Page.

   

6. Add two Multimedia widgets to the UI Page to display the two attachments for Cookie A1.

   

7. Connect the Multimedia widgets to the Service Call task. Use an Any To Any Property converter and define the Key Static attribute based on the attachment order. For instance, set Key Static to 0 to display the first attachment.

   LinksConverter

   

   

8. The UI Page should now display the attachments as shown below.

   UI PageLinks