---
tags:
- UI Page widgets
alias: user-guide-uipage-widgets-multimedia
widgetname: Multimedia
description: "This documentation explains how to display documents, including images and videos, within a UI widget, customizing its appearance and linking"
---

# Multimedia

![Screenshot showing a multimedia icon.](images/multimediaIcon.png){width=80}

## Overview

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

![Example](images/multimedia_example.png)

## General Steps

{% include-markdown 'includes/pages/ui_widgets_general_steps.md' %}

![General](images/multimedia_widget_settings_general.png)

## Widget Customization

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

    ![style](images/multimedia_widget_settings_style.png)

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.

    === "Document"

        ![Setup](images/multimedia_widget_settings_document.png)

    === "URL"

        ![Setup](images/multimedia_widget_settings_setup_url.png)

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.

    ![Links](images/multimedia_widget_settings_links.png)

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 :material-pencil: icon beneath the entity icon. For more information, see the [[user-guide-edit-and-save#edit|Edit Entity]] section.

    ![Real Use Case](images/multimedia_real_use_case_4.png)

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

    === "Cookie A1"

        ![Real Use Case](images/multimedia_real_use_case_1.png)

    === "Entity Picture"

        ![Real Use Case](images/multimedia_real_use_case_2.png)

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

    ![Real Use Case](images/multimedia_real_use_case_5.png)

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 Entity"

        ![Real Use Case](images/multimedia_real_use_case_6.png)

    === "Any to Any Property"

        ![Real Use Case](images/multimedia_real_use_case_7.png)

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

    === "UI Page"

        ![Real Use Case](images/multimedia_real_use_case_8.png)

    === "Links"

        ![Real Use Case](images/multimedia_real_use_case_9.png)

### 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 [[user-guide-attachments]] section.

    ![Real Use Case](images/multimedia_real_use_case_10.png)

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

    ![Real Use Case](images/multimedia_real_use_case_1.png)

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

    ![Real Use Case](images/multimedia_real_use_case_11.png)

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

    ![Real Use Case](images/multimedia_real_use_case_12.png)

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

    ![Real Use Case](images/multimedia_real_use_case_14.png)

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

    ![Real Use Case](images/multimedia_real_use_case_13.png)

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.

    === "Links"

        ![Real Use Case](images/multimedia_real_use_case_15.png)

    === "Converter"

        ![Real Use Case](images/multimedia_real_use_case_16.png)

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

    === "UI Page"

        ![Real Use Case](images/multimedia_real_use_case_17.png)

    === "Links"

        ![Real Use Case](images/multimedia_real_use_case_18.png)