Overview
In the App Designer editor, you can add images as both static and dynamic content. This article shows how to add the image control and everything related to its configuration.
Add an Image control
To add an image control, follow these steps:
1.From the top menu select the Controls option. This option displays a list of different types of controls. Open the Media section from the control's options:
2.Within it, select the Image control by dragging it to the column where you want to place it.
The outcome must look similar to the following image:
Image content
Inside Image content you can manage, design, configure the visibility, and associate links between pages.
Content Management
Depending whether the content you want to add to the control is static or dynamic, different settings are required. When a page is Detail and you want to add a static content image, you must select the Fixed content option. You can load a file or obtain an image from a URL (this option must be enabled) that has the following formats: .png, .jpg, and .jpeg.
You can add dynamic content by selecting the Contextualized option and selecting an XPath path for the image control.
Image Content Design
The properties in the Design tab allow you to customize the image control:
Style
•Align: Aligns the image either to the Left, Center, or Right of the control.
•Image size(px): The image can be displayed in its Original size or it can be Scaled to fill the area.
•Control Height: The image's height can be adjusted by the number of Pixels or Screen percentage.
•Control width(%): The image's width can be adjusted on a percentage scale.
•Border size: Define the border size of the image in pixels.
•Border type: Define the border type between Solid, Dotted, Dashed, Double, or None.
•Opacity: Adjust the image opacity from 0 to 100.
Colors
•Border color: Define the border color of the image.
•Background color: Define the color of the background color of the image. The default color depends on the selected theme.
You can restore default values by clicking the Reset button.
Visibility
In this tab, you can choose which Personas can have visibility of the image, as shown in the following picture:
Links
Static link
In this option, add the link you want to associate with another page that has been previously published. This link can be enabled in the checkbox to open in a new tab:
Internal Link
This option allows you to associate the image to the internal pages that it handles within the same app. You must select if the link type navigates to a normal page, or a Detail page.
Processes
This option allows you to associate the image with a process of the project you previously built:
Last Updated 11/3/2023 7:44:06 AM