Image

The Image Display control lets users easily add images to forms, enhancing visual communication and engagement. It supports various image formats and provides flexibility in how images are sourced and displayed. Users can display pre-uploaded images or source them from a form field, ensuring that the images are always relevant and up-to-date. 

Figure: Image_Producer View

Figure: Image_Consumer View

Configure Image Control

Let's configure Image Control!

1. Navigate to General tab of Form Designer. Enter all mandatory details required for the Form.
   
   
2. In Design Form tab, from the left panel select Controls > Form Controls > Image.
   Drag and drop this control on Form Designer canvas for configuration. A greyed-out image is displayed as a placeholder on the canvas. A sample screenshot is shown below:
   Figure: Image Placeholder
   
   
3. Click Settings iconto view Properties pop-up.

You can view the following tabs for Image control:

• Properties
• Appearance

Properties

This section contains the list of properties using which the Administrator can configure the respective control's name, subtitles etc. To know more about the fields that are available under the Properties section, see Field Description given below.

Figure: Properties

Field Description
This table contains the list of fields and their descriptions that are available under the Properties section: 

General
Label	Specify the name for the Image control. This name identifies the Image control on the form. The system displays the validation message as "Enter a label" if you try to save the image control without providing any label to it. Example: Board Members, Sharefolder etc.
Include Label	If this toggle button is enabled then the configured label will be displayed alongside the Image control. This option provides flexibility to control the visibility of the label associated with Image control.
Input Selection	Select the type of input to be defined for the image control.   Pre-defined: This property allows the Application Designer to upload images that will be uniformly displayed to all users of the form. These images cannot be edited by the form users, ensuring consistency across all instances of the form. User-defined: This property allows images to be dynamically derived from another field on the form, where the user has uploaded an image. This enables a personalized experience based on user input.
Image Upload	Select and upload the required image using upload icon. You can upload one image from your system in the format such as .jpeg,.png etc.
Title	Specify the relevant title for the selected image. The title should be crisp and short.
Description	Specify the description to be displayed along with the title of the image. The description provides brief introduction about the relevant image.
URL	Specify the URL to which the Image should redirect on click. The URL will get open in next tab.

Appearance

This section contains the list of validation setups using which the Administrator can configure the respective control as mandatory, based on condition etc. To know more about the fields available under the Appearance section, see Field Description given below.

Figure: Appearance - Image

Field Description
This table contains the list of fields and their descriptions that are available under the Appearance section: 

Image
Alignment	- Specify the alignment of the image. The available options are as follows: Keep the Image left-aligned Keep the Image center-aligned Keep the image right-aligned
Text
Font Type	Select the type of the font from the drop-down list of available options of font type.
Font Color	Select the type of the font color from the color widget from the provided set of color options. Click  option to select the required color from the displayed color widget. A sample screenshot is shown below: Figure: Color Widget
Font Size	Select the size of the font from the drop-down list of available options of font type using upwards or downward arrows. A sample screenshot is shown below:Figure: Font Size Drop-down You can also use a horizontal slider to increase or decrease the font size. A sample screenshot is shown below: Figure: Font Size Slider
Font Style	Select the required font style. Available options are as follows: B - Select it to make the text bold. I - Select it to make the text italics. U - Select it to make the text underlined.
Font Alignment	Specify the alignment of the text. The available options are as follows: - Select it to make the text as left aligned - Select it to make the text as center aligned - Select it to make the text as right aligned - Select it to make the text as justified
Border
Style	Specify the style of the border. Available options are as follows: None - No border is applied to the image. Dashed - The border is displayed as dashed line. Solid - The border is displayed as solid line.  Dotted - The border is displayed as dotted line. If the border Style is selected as Dashed, Solid or Dotted, it displays the additional border specifications options such as Side, Width, Color and Corner. A sample screenshot is shown below: Figure: Border Style
Side	Specify the side on which the border should be applied. Available options are as follows: Bottom - Apply the border only at the bottom of the image. Top - Apply the border only at the top of the image. Left - Apply the border only at the left of the image.  Right - Apply the border only at the right of the image. Select the topmost check box to apply the border on all four sides. A sample screenshot is shown below:Figure: Side
Width	Specify the width of the border to be applied in px. Available options are as follows: 1/4 px 1/2 px 3/4 px 1 px 1 1/2 px 2 px 1/4 px 3 px 4 1/2 px 6 px A sample screenshot is shown below: Figure: Width
Color	Specify the color of the border. Select the required color from the color widget.A sample screenshot is shown below: Figure: Color Widget
Corner	Specify the corner style of the border. This option appears only if border style is selected as Dashed, Solid or Dotted. Available options are as follows: Round - Provides the rounded corner border for the applied border Sharp - Provides the sharp corner border for the applied border
Background
Background Type	Specify the background type of the image. Available options are as follows: None - Select it to keep the text background null. Image - Select it provide an image as background of the image. Solid - Select it provide any color as background of the image.
Image Upload	This option appears only if background Type is selected as Image. A sample screenshot is shown below: Figure: Image Upload Select and upload the required image using upload icon.
Color	This option appears only if background Type is selected as Solid. A sample screenshot is shown below: Figure: Color Specify the color of the background from the color widget from the provided set of color options. Click option to select the required color from the displayed color widget. A sample screenshot is shown below: Figure: Color Widget
Corner Radius	Specify how rounded the corners of the border must appear, with higher values resulting in more pronounced rounding. This option is available when the border style is set to Dashed, Solid, or Dotted and the Corner option is selected as Round.

Image Upload Properties

Upload an image to provide an image to an application or as a background to a form. You can select, edit and upload an image. You can perform various actions on the image such as horizontally or vertically flip, crop, zoom, extend the selected image to fit the screen and so on.

Figure: Resize Image