Setting Properties of the Container Widget

Data 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.
   Figure 2 Clicking the add icon
   

2. Select a property of the container from the Properties drop-down list.
3. Under Field, click . The model selection page is displayed.
   Figure 3 Clicking the setting icon
   

4. Click New.
5. Set Model Name and Source, and click Next.
   Figure 4 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.	$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.

   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);

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.

Basic Properties

• Flow layout

  By default, Flexible Layout of the container widget is disabled and the container widget is in the flow layout state, as shown in Figure 5.

  Figure 5 Flow layout
  

  In the flow layout, a widget is a block-level element by default. That is, regardless of the widget width, the widget occupies the width of all parent elements. Drag a container widget to the canvas, then add two title widgets inside it, as shown in Figure 6. As block-level elements, these titles will expand to fill the container's width by default. The first title will appear at the top, with the second title automatically positioned below it.

  Figure 6 Block-level widgets in the flow layout
  

  In flow layout, widgets stack vertically, and their horizontal alignment within the container can be adjusted, as shown in Figure 7 and Figure 8.

  Figure 7 Align center horizontally
  
  Figure 8 Horizontal alignment to the right
  
• Flexible layout

  After Flexible Layout is enabled, the layout is switched from the flow layout to the flexible layout. In the flexible layout attribute configuration, Direction, Justify, and AlignItems are displayed, as shown in Figure 9.

  Figure 9 Flexible layout
  

  Drag a container widget to the canvas, drag five container widgets into the first container widget, set the width and height of each container widget to 100 px, and set a different background color for each container widget, add a title widget to each container to display A, B, C, D, and E.

  In the default flexible layout, Direction is set to Row, Justify is set to Start, and AlignItems is set to Start, as shown in Figure 10.

  Figure 10 Default flexible layout effect
  

  Direction determines the arrangement direction of the widgets in the container. If Direction is set to Row, the widgets in the container are arranged from left to right. If Direction is set to Column, the widgets in the container are arranged from top to bottom, see Figure 11.

  Figure 11 Setting Direction to Column
  

  Justify determines the alignment of the container's principal axis. When Direction is Row, Justify applies to the horizontal direction. When Direction is Column, Justify applies to the vertical direction. When the alignment direction is set to row, the start point is left. When the horizontal alignment mode is set to center alignment and end alignment, the Figure 12 and Figure 13 are shown in the following figure.

  Figure 12 Setting Justify to Center
  
  Figure 13 Setting Justify to End
  

  AlignItems attribute determines how the containers are aligned along the cross axis. When Direction is set to Row, AlignItems applies to the vertical direction. When Direction is set to Column, AlignItems applies to the horizontal direction. When the container arrangement direction is row, the start point is the top, and the vertical alignment mode is center alignment and end alignment, as shown in Figure 14 and Figure 15.

  Figure 14 Setting AlignItems to Center
  
  Figure 15 Setting AlignItems to End
  

  You can configure flexible layout attributes to achieve the desired layout effect. For example, you can set Direction to Row and both Justify and AlignItems to Center, as shown in Figure 16.

  Figure 16 Center effect
  

Mobile Configuration

• Fixed Bottom: After this function is enabled, the container widget is displayed at the bottom of the page when you preview the page on mobile devices.
  Figure 17 Displayed at the bottom of the page
  
• Fixed Top: After this function is enabled, the container widget is displayed on the top of the page when you preview the page on mobile devices.
  Figure 18 Displayed on the top of the page
  
• Button Fills Container: After this function is enabled, the button widget fills the entire container when a page is previewed on mobile devices.
  Figure 19 Button Filling Container
  
• Button Displays in Single Row: After this function is enabled, the button widget and other widgets are displayed in one line during page preview on mobile devices.
  Figure 20 Button Displays in Single Row
  

Common

• Name: name of the container widget displayed on the page.
• Hide: indicates whether to hide the container widget when previewing a standard page.

Style

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

• Layout: You can directly configure the CSS attributes of the page, for example, setting the width and height of a widget. You can also directly compile CSS code in Advance for further layout customization.
  • Display: You can quickly set the current element layout to block, inline-block, inline, or flex.
  • The box model diagram of the current element is displayed below Display. You can click the corresponding number and change the value to quickly change the inner and outer margins of the element.
  • The width and height of the current element are displayed below the current element box model diagram. By default, the width and height are adapted based on the current layout. You can manually enter values to configure the width and height of the current element.
  • When configuring the box model, width, and height, you can select multiple units, such as px, em, %, and auto.
    Figure 21 Style attribute configuration panel
    
• Font: Set the font size, style, and color.
• Background: Set the background color and transparency.
• Border: Set the border color and width. The unit can be px, em, or %.
• 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. As shown in Figure 22, compile the style code to implement the same layout effect as Figure 16.
  Figure 22 Customizing CSS code to implement the widget centering effect
  

  If Layout of a widget is set in both Basic Properties and Style, the settings in Style take effect. For example, if Flexible Layout is selected in Basic Properties of a container widget and the block layout is selected in the Style > Layout area, the layout of the container widget is the block layout.

  • 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. Custom code can be entered in multiple lines, and style parameters are highlighted.
  • Style Class: Name of the CSS style class of the widget, which can be referenced in the CSS code.