Show TOC

Procedure documentationDefine an Image Control Locate this document in the navigation structure

 

You can use an Image control to display an image in a UI component.

Prerequisites

You have created an "image library" containing the image(s) that you require. To do so:

  1. Choose   Tools   Image Manager  . The Image Manager dialog box is displayed.

  2. Click the Browse button at the bottom center and in the Choose file dialog box, navigate to and select the image that you want to add to the library and click Open.

  3. Click the Upload button. The image is added to the Image Manager display box.

  4. If needed, rename the image by selecting it and clicking the Rename (Rename) button in the toolbar.

  5. Repeat steps 2 and 3 to add additional images.

  6. When done, click Close.

The image library is now available for use throughout your model.

Procedure

  1. On the Layout board, right-click the UI component that is to contain the image and choose Configure Element from the context menu. The Configure Element task panel is displayed.

  2. Click the Add (Add) button at the bottom right and from the list in the New UI Control box, choose Image. In the Field name field, enter a name for the image and click OK.

  3. Right-click the border of the new image and choose Properties from the context menu. The Control Properties dialog box is displayed.

  4. If you do not want a label for the image, click the Display tab and from the Label position drop-down list, choose No label.

  5. Click the Image tab. The images created in the image library (described in the "Prerequisites" section previously) are displayed.

  6. Select the checkbox under the image to be entered in the control. It is displayed in the selected area on the layout.

  7. In the Image field, enter the Condition in which the image is to be displayed (true is the default). You can use the Condition button to create the formula in the Expression Editor.

  8. Choose a radio button to define how the image is displayed:

    • Original size

    • Fit size adapts the image size to the defined area

    • Keep aspect ratio enables you to resize the image while maintaining its proportions

    Note Note

    When using multiple images per image container (each image displayed per different defined Condition), be aware that the last display mode (radio-button option) set for the single image "container" determines the display mode for all images in the container. Therefore, to guarantee a smooth display of all the images, try to ensure that they all have similar aspect ratios.

    End of the note.

  9. Click Close and adjust the image in the layout as necessary.