Image

What is it?

The image widget allows you to easily upload an image and display it on your website. Please note that only one image can be displayed at a time. Enhance your user experience with a handy Pop Up Preview and Image Information feature.

How and When to use it?

To add a new Image to your page, simply drag and drop the “Image” widget from the left-hand side of the screen to the design area. 

To change the name of the image, simply click on the image widget to reveal the blue quick-setting panel. 

How to configure it?

1. Drag the Image widget into the Form.

2. Click the Image and then click the setting button  to open Widget Property Settings. 

3. The Widget Property Settings is shown, which contains three tabs, General, Value and Visibility. We will demonstrate how each tab and property is used. 

Introduction of General Tab Properties

Basic

Name

Users can change the name of the Image with Name property.

For example, we create an Image, look through the Name property under Basic in the Widget Property Settings. We rename it “Picture”.

As Image widget does not display widget title in Run Time, there is no configuration for Display Name. The Name property is used in the configurations and references in Design Time only.

Description

It provides a space for the app designer’s remark purpose. 

For example, we create an Image, look through the Description property under Basic in the Widget Property Settings. 

It is an internal use for App designers and it does not affect the display in Design Time and Run Time.

Configurations

Upload Image

App Designer may upload some images for users to view.

For example, we want to upload a file for users. 

1. Click “Choose File”

2. Select the image you want to upload

3. Click “Open”

4. Click “Save”

The design time and the Run Time display are shown below:

Allow Pop Up Preview

It allows the user to click the image to open a new tab to view the image in Run Time.

For example, we select the option “Allow Pop Up Review”. 

In Run Time, when you click on the image. A pop up window will be shown.

(For Mobile, no matter if the option is selected or not, a pop up window always will be displayed.)

Image Information

It allows the user to view the image name of the image in Run Time.

There are 3 options you can choose:

1. Not Show

2. Always Show

3. Show When Mousing Over

The Run Time display is shown below:

Positions, Size and Layout

The options for Sizing Mode are Absolute Size and Relative Size. In Position, various parameters of the widget can be adjusted. These parameters change depending on what is selected in Sizing Mode. In Absolute Size, the dimensions of the widget are the same in the Page Builder and Production. 

In Relative Size, the right and bottom sides of the widget expand to completely fill the screen/window in Production. 

The field Frame has two options, Border and Corner. You can set The Frame Border to be None or Solid. If you choose the solid Border option, you will see a border around the widget that is bigger than the border around the image. 

You can set The Frame Border to be None or Solid. If you choose the solid Border option, you will see a border around the widget that is bigger than the border around the image. 

The options of “Display in” are “Web & Mobile” (the default setting) and “Mobile Only”. It controls whether this label would be displayed on both platforms.