Setting Properties of the Image Widget

This is a basic widget for displaying images. You can select an image based on the image address attribute. The images can be uploaded from the local PC or from the image library on the server.

Figure 1 Image widget
Click to enlarge

Data Binding

Different types of view models are created to associate various data sources with the return values or attribute values of widgets to implement dynamic data effect.

Property Binding: Binds a property of a container widget, such as hiding, style, and elastic layout, to a specific model field. Once bound, these properties automatically update in sync with the model field's value, functioning in a manner akin to Vue's v-bind directive.

In the Data Binding area, click + next to Property Binding.
Select the corresponding property from the Properties drop-down list.
Under Field, click . The model selection page is displayed.
Click New.

Set Model Name and Source, and click Next.

There are four types of models: Custom, Objects, Services, and Events. Each type of model contains parameter definitions and method definitions. Methods are APIs defined on models. In general, these APIs are called in event scripts (such as page loading events and mouse click events) associated with frontend widgets to implement certain logic. For details, see Table 1.

Figure 2 Defining a model
Click to enlarge

**Table 1** Model types
Type	Model Description	Model Parameter Description	Model Method Description	API Calling Method
Custom	Models defined by developers.	Defined by developers. Subnodes can be added.	Developer-defined method.	$model.ref("modelName").actionName();
Objects	Object models are generated based on the mapping of the object table. For details about the object model, see Objects.	The system automatically obtains all fields of an object. Developers can select some fields as parameters.	The system automatically generates four methods: query, save, delete, and count.	$model.ref("modelName").query(param); $model.ref("modelName").save(); $model.ref("modelName").delete(); $model.ref("modelName").count();
Services	Service models are generated by mapping backend services. Currently, service models can be mapped to flows or scripts. For details about the service model, see Flows and Scripts.	The parameters are mapped to the inputParam and outputParam sections based on the input and output parameters of backend services.	The run method is automatically generated to execute a flow or a script associated with the model.	$model.ref("modelName").run();
Events	For event models, data binding is created based on fields of a backend event. Model data can be updated based on the web socket.	Parameters are generated by mapping fields of backend events.	Directly use.	Directly use.

On the Settings page of the new model, perform the following operations:
- If Source is set to Custom in the previous step, you need to add customized parameters and types of subnodes.
- If Source is set to Objects in the previous step, you need to configure the object and fields associated with the model.
- If Source is set to Services in the previous step, you need to configure the backend service associated with the model. The backend service can be a script, flow, or public API.
- If Source is set to Events in the previous step, you need to configure the event and event fields associated with the model.
Click Next.
Generally, you do not need to add a method. If you need to add or modify a method, refer to the method generated by the object and service by default.
Click OK.

Basic Properties

URL: Enter the target address to which the image is redirected when you click the image.
Image URL: You can select or upload images in JPG, JPEG, PNG, or GIF format. The image size cannot exceed 1 MB.
There are several types of image libraries:
- OBS, MINIO, and OBJECTSTORAGEPROXY: A connector is used to obtain images from the OBS or MINIO bucket. You need to configure the OBS, MINIO, and OBJECTSTORAGEPROXY connector in advance and select a specific bucket and connector to obtain images.
- Connector: connector of the OBS, MINIO, and OBJECTSTORAGEPROXY type.
- Bucket: OBS and MINIO connector bucket.
- SFTP: After SFTP is selected, images are encrypted and uploaded to the local file system of the Nginx server.
The OBS, MINIO, or OBJECTSTORAGEPROXY image library supports image management by directory.
- Click and next to a directory to add a root image directory and a sub-directory.
- Click Upload Images.
- Select an image and click to delete the image from the image library.
Preview: indicates whether an image can be zoomed in during preview.

Common

Name: name of the current widget.
Hid: indicates whether to hide the widget. In this mode, the widget is statically hidden. You can also set the attribute value of the widget to a model field of the Boolean type. In this way, you can control the value of the model field in the customized JavaScript code to determine whether to hide the widget. This dynamic setting has the highest priority.
Disable: indicates whether to disable the widget.
Read-only: indicates whether the value is read-only.

Style

For users with rich frontend development experience, you can use the style panel to customize the page layout.

Image Height & width: Set the width and height of the image. The unit can be px or %.
Layout: Set the width and height of the widget.
Font: Set the font size, style, and color.
Background: Set the background color and transparency.
Border: Set the border color and width. The supported units are px, em, and %.
Shadow: Set the shadow color and style. The units px, em, and % are supported.
Advance: Directly write CSS code to apply to the current element.
- Style Code: Style code of the widget. After the widget style is set, the style code is automatically displayed in this area. You can also customize the style code to configure the widget in detail. The customized code can be entered in multiple lines and the style parameters are highlighted.
- Style Class: Name of the CSS style class of the widget, which can be referenced in the CSS code.