Setting Properties of the Input Widget

1. In the Data Binding area, click in the value binding area. The Select Model dialog box is displayed.
2. Click New.
3. Set Model Name and Source, and click Next.
   Figure 2 Defining a model
   

   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);
4. 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.
5. 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.

6. Click OK.

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
   

6. 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.
7. 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.

8. Click OK.

• Boolean type: If false is returned, the verification fails. To configure an error message, set the Verification Method parameter. If true is returned, the verification is successful.
• Object type: If "{result:false, message:'error message'}" is returned, the verification fails and the message value is an error message. If "{result:true}" is returned, the verification is successful and no message is displayed.

An example is as follows:

• Example 1: The input text length for verification cannot exceed 10 characters.

  return value.length <= 10

  The value variable is defined in the system and indicates the input content variable. You can use it directly.

• Example 2: The input text for verification can contain only letters.
  Boolean type:

  var reg = new RegExp("^[A-Za-z]+$");
  return reg.test(value);

  Object type:

  var reg = new RegExp("^[A-Za-z]+$");
  if (reg.test(value)) {
   return true;
  } else {
    return {result: false, message:'The input does not comply with the rules. Only uppercase letters and lowercase letters are allowed.'};
  }

• Example 3: Check whether the input is an email address. This example may not cover all possible email addresses. JS code example:

  var reg = new RegExp("^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$");
  return reg.test(value);