Help Center/ Huawei Cloud Astro Zero/ Best Practices/ Standard Pages/ Adding Calculating Capabilities, Such as Summation, to Standard Page Tables
Updated on 2025-08-14 GMT+08:00

Adding Calculating Capabilities, Such as Summation, to Standard Page Tables

Expected Results

On a standard page, calculation capabilities such as summation and multiplication can be added to tables to improve data processing efficiency. For example, set the value of the productCost column in a table to productNum x productPrice + cost.

Figure 1 Implementation results

Procedure

  1. Create a low-code application.

    1. Apply for a free trial or purchase a commercial instance by referring to Authorization of Users for Huawei Cloud Astro Zero Usage and Instance Purchases.
    2. After the instance is purchased, click Access Homepage on Homepage. The application development page is displayed.
    3. In the navigation pane, choose Applications. On the displayed page, click Low-Code or .

      When you create an application for the first time, create a namespace as prompted. Once it is created, you cannot change or delete it, so check the details carefully. Use your company or team's abbreviation for the namespace.

    4. In the displayed dialog box, choose Standard Applications and click Confirm.
    5. Enter a label and name of the application, and click the confirm button. The application designer is displayed.
      Figure 2 Creating a blank application
      Table 1 Parameters for creating a blank application

      Parameter

      Description

      Example

      Label

      The label for the new application; Max. 80 characters. A label uniquely identifies an application in the system and cannot be modified after creation.

      My first application

      Name

      Name of the new application. After you enter the label value and click the text box of this parameter, the system automatically generates an application name and adds Namespace__ before the name. Naming rules:

      • Max. characters: 31, including the prefix namespace.

        To prevent duplicate data names among different tenants, each tenant must define a unique namespace when first creating an application. A tenant can only create one namespace, and once it is created, it cannot be modified.

      • Start with a letter and use only letters, digits, and underscores (_). Do not end with an underscore (_).

      A

  2. Create an object named ProductList and add fields and data to the object.

    1. In the navigation pane, choose Data, and click + next to Object.
    2. Set Object Name and Unique ID of the object to ProductList and click the confirm button.
      Figure 3 Creating the object ProductList
    Table 2 Parameters for the created object ProductList

    Parameter

    Description

    Example

    Object Name

    Name of the new object, which can be changed after the object is created.

    Value: 1–80 characters.

    ProductList

    Unique ID

    ID of a new object in the system, which cannot be modified after being created. Naming rules:

    • Max. 63 characters, including the prefix namespace.

      The content that is blurred in front of the ID is a namespace. To prevent duplicate data names among different tenants, each tenant must define a unique namespace when first creating an application. A tenant can only create one namespace, and once it is created, it cannot be modified.

    • Start with a letter and use only letters, digits, and underscores (_). Do not end with an underscore (_).

    ProductList

    1. Click to go to the object details page.
    2. On the Fields tab page, click Add and add the productName field to the object.
      Figure 4 Adding the productName field
      Table 3 Parameters for adding the cost field

      Parameter

      Description

      Example

      Display Name

      Name of the new field, which can be changed after the field is created.

      Value: 1–63 characters.

      Product name

      Unique ID

      ID of a new field in the system. The value cannot be changed after the field is created. Naming rules:

      • Max. 63 characters, including the prefix namespace.
      • Start with a letter and use only letters, digits, and an underscore (_). Do not end with an underscore (_).

      productName

      Field Type

      Click . On the page that is displayed, select the type of the new field based on the parameter description.

      Text

    3. Repeat the preceding operations to add the fields in Table 4 to the object.
      Table 4 Adding other fields

      Display Name

      Unique ID

      Field Type

      Product quantity

      productNum

      Number

      Product price

      productPrice

      Number

      Other costs

      cost

      Number

      Figure 5 Viewing the added fields
    4. On the Data tab, click Add to add data in Figure 6 to the object.
      Figure 6 Adding data to an object

  3. Create an object model.

    1. In the navigation pane, choose Page, and click + next to Standard Page.
    2. Enter the label and name of the page and click Add to create a standard page.
    3. At the bottom of the standard page, click Model View.
    4. Click New, specify Model Name (for example, productCost), select Objects for Source, and click Next.
      Figure 7 Creating a model
    5. Select the object created and the fields added in 3, click Next, and click OK.
      Figure 8 Selecting objects and fields

  4. Return to the Designer View page and bind the model with the widgets.

    1. Drag a table widget to the standard page.
      Figure 9 Dragging a table widget
    2. Select the table widget, choose Properties > Data Binding and click next to Value Binding.
    3. Select the model created in 3 and click the confirm button.
      Figure 10 Selecting the model

  5. Select a table, choose Properties > Table Columns > Added Column, and click to add a blank column.

    Figure 11 Adding a blank column

  6. Click next to the new blank column, change the value of Column Title to productCost, set Show Type to Custom, and enter the custom code.

    Figure 12 Changing the column title to productCost
    Figure 13 Setting Show Type to Custom and entering the custom code

    The custom code is as follows:

    return h("XInputNumber", {
    		"props": {
    		    "value": params.row.Namespace__productPrice__CST * params.row.Namespace__productNum__CST + params.row.Namespace__cost__CST,
    		    "readonly": true
    		}
    	})

  7. Click in the upper part of the page to save the page settings.
  8. After the settings are saved, click in the upper part of the page to preview.