Setting Properties of the Modal Widget

As a container of a modal dialog box, the modal component allows you to drag various components into the dialog box. When the modal dialog box is displayed, the user must respond to the modal dialog box before performing operations on other objects.

For example, when a modal dialog box is displayed, the user must respond to the dialog box first, for example, clicking OK or Cancel to close the dialog box, before operating on other applications.

On the standard page design page, drag Modal from Basic > Layout to the canvas, see Figure 1.

Figure 1 Modal
Click to enlarge

Data Binding

For widgets on standard pages, different view models are created to link various data sources to the return values or property values of the widgets, enabling dynamic data effects.

Value binding: Value binding is similar to the v-model of the Vue. Bidirectional data binding is created on the widget. Value binding automatically selects the correct method to update the element based on the widget type. In addition, it checks events that cause binding data changes to update data.

In the Data Binding area, click in the value binding area. The Select Model dialog box is displayed.
Click New.

Set Model Name and Source, and click Next.

Figure 2 Defining a model
Click to enlarge

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.

**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.	Query: $model.ref("modelName").query(param); Save: $model.ref("modelName").save(); Delete: $model.ref("modelName").delete(); Statistics: $model.ref("modelName").count();
Services	Service models are generated by mapping backend services. Currently, service models can only 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.

In addition to the methods defined in models, the platform provides the following standard APIs for all models:

Obtaining model data: $model.ref("modelName").getData();
Setting model data: $model.ref("modelName").setData();
Setting model field values: $model.ref("modelName").setValue(key,value);

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.

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.
1. In the Data Binding area, click + next to Property Binding.
2. Select a property of the container from the Properties drop-down list.
3. Under Field, click . The model selection page is displayed.
4. Click New.
5. 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 3 Defining a model
1. 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.
2. 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.
3. Click OK.

Basic Properties

After basic attributes are bound through data, the values of the bound data are used during running.

Title: title of the modal box.
Confirm Button Text: text on the confirm button of the modal box.
Cancel Button Text: text on the cancel button of the modal box.
Show Loading: Once enabled, the confirm button is in the loading state.
Show Overlay: Once enabled, the mask layer is displayed.
Close on Overlay Click: Once enabled, you can click the mask layer outside the modal box to close the modal box. After the modal box is closed, you must respond to the modal box before closing the modal box. For example, you can click the button (confirm or cancel) or in the modal box.
Draggable: Once enabled, the container can be dragged.
Hide Footer: Once enabled, the the confirm and cancel button areas are hidden.
Show Cancel Button: Once enabled, the cancel button is displayed.
Confirm Button First: Once enabled, the confirm button is displayed in the front.
Disable Confirm Button: Once enabled, the OK button is disabled.
Lazy Load: Once enabled, the pop-up window is not rendered to improve performance.

Mobile Configuration

Popup Position: display position of the modal box on the mobile device.
Close Button: indicates whether to display the close button.

Common

In the Common > Name area, customize the name of the current widget.

Style

Modal Height & Width: Set the width and height of the modal box.
If the height of the modal box is too large to be displayed properly, add the following style code to the style code of the page. That is, set the scroll bar in the style code and then decrease the height, as shown in Figure 4.
```
.ivu-modal-body {
overflow:auto;
}
```
Figure 4 Modal box style
Advance > Style Class: name of the CSS style class of the widget, which can be referenced in the CSS code.