Help Center/ Huawei Cloud Astro Zero/ User Guide (Low-Code)/ Frontend Development/ Standard Pages/ Setting Properties of Standard Page Widgets/ Setting Properties of the Table (New) Widget
Updated on 2025-08-26 GMT+08:00
View PDF
Share

Setting Properties of the Table (New) Widget

The table (new) is a data table widget, which displays a large amount of structured data and supports computers and mobile devices. You need to bind a data model through data binding and then set table properties.

Compared with the table widget in Setting Properties of the Table Widget, this widget is more applicable to mobile devices, but does not support the tree structure. If the data in the table has a parent-child relationship and the tree structure needs to be displayed, the table widget described in Setting Properties of the Table Widget needs to be used.

Figure 1 Table (new)

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.
    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.
  • 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 Settings

  • Table Header: Whether to display the table header.
  • Add Row Index: indicates whether to display the sequence number column. The sequence numbers are displayed in ascending order.
  • Single Choice: If this property is enabled, the option button is displayed.
  • Multiple select: If this property is enabled, the multi-choice button is displayed. This property is mutually exclusive with Single Choice. You can only choose one of the two.
  • Zebra Stripe: If this property is enabled, different colors are displayed in the table to distinguish different rows of data.
  • Auto LoadData: If this property is enabled, the system automatically loads data when a page is previewed or loaded. This function is valid only when the model is an object model. After this property is enabled, the object query API in the background is called to automatically load data during page preview or loading. This function does not need to be triggered by events.
  • Table Border: You can set the border style of a table. The complete border, default border, and outer border can be displayed.
  • Text Alignment: alignment mode of the text in the table.
  • Use Mode: Set the usage mode of the table, such as the management mode, read-only mode, and selected mode.
  • Data operation page: Mode of editing data in a table. You can set the link to the page to edit data. In this case, you need to configure the name of the associated page, for example, the name of the details page, new page, or modification page. If you edit data on the current page, the value of the data editing mode is cleared.

Advanced Settings

Advanced settings take effect only on the PC.
  • Column Resize: indicates whether the column width can be adjusted by dragging.
  • Header Overflow: When the table header content of each column exceeds the width of the current column, whether to set the excess part to an ellipsis.
  • Content overflow: When the content of each column exceeds the width of the current column, whether to set the excess part as an ellipsis.

Size Settings

Advanced settings take effect only on the PC.

  • Size: overall size of the table.
  • Table Max Height: maximum height of the table. The unit is px or %.
  • Table Fixed Width: fixed width of the table, in pixels. The value 0 indicates that the width is not limited.
  • Table Fixed Height: fixed height of the table. Unit: px or %. The value 0 indicates that the height is not limited. After the height is set, if the table data exceeds the height, the table header is automatically fixed.

Query Condition

Whether to add search criteria above the table to quickly query data. After selecting Enable the query condition, click Add to set search criteria as required.

Figure 4 Setting search criteria

Button Bar

Set the display mode of the button bar, such as the icon and text.

Figure 5 Adding a button bar
Figure 6 Effect

Paging Settings

  • Enable Pager: whether to enable pagination.
  • Style: Set the pagination style, for example, simple or complete.
  • Default pagination size: Set the default pagination size.
  • Per page size option list: number of options displayed on each page, for example, [10,20,100].
  • Pager Position: indicates the display position of a page.

Operation Column

Click Setting to configure an independent operation column in the table. Detail, Edit, and Delete columns are preset in the system. You can select a column as required.

For example, after a property value is bound to a table widget, an operation column is added. The operation column contains two operations: viewing details and editing information.

Figure 7 Adding Detail and Edit
Figure 8 Effect

Table Column

After the table columns are generated, click Setting to adjust the column configuration.

Figure 9 Adjusting columns

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.
Parent Topic: Setting Properties of Standard Page Widgets