Adding, Deleting, and Modifying Object Data in Frontend Tables
Expected Results
Add a toolbar to add, delete, and modify object data on the frontend page. The background object data associated with the page will change accordingly.





Implementation Methods
- Create a low-code application.
- 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.
- After the instance is purchased, click Access Homepage on Homepage. The application development page is displayed.
- 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.
- In the displayed dialog box, choose Standard Applications and click Confirm.
- Enter a label and name of the application, and click the confirm button. The application designer is displayed.
Figure 6 Creating a blank application
- Create an object named demoData and add fields and data to the object.
- In the navigation pane, choose Data, and click + next to Object.
- Set Object Name and Unique ID to demoData and click the confirm button.
Figure 7 Creating object demoData
- Click
to go to the object details page.
Figure 8 Clicking the edit button - On the Fields tab page, click Add and add the demoName field for the object.
Figure 9 Adding the demoName field
Table 3 Parameters for adding the demoName field Parameter
Description
Example
Display Name
Name of the new field, which can be changed after the field is created.
Value: 1–63 characters.
demoName
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 (_).
demoName
Field Type
Click
. On the page that is displayed, select the type of the new field based on the parameter description.
Text
- On the Fields tab, click Add again to add the demoId field.
Figure 10 Adding the demoId field
- On the Data tab, click Add to add data to the object.
Figure 11 Adding data to an object
- Create an object model.
- In the navigation pane, choose Page, and click + next to Standard Page.
- Enter a label and name and click Add to create a standard page.
Figure 12 Creating a standard page
Table 4 Parameters for creating a standard page Parameter
Description
Example
Label
Label name of a standard page, which can be changed after being created.
Value: 1–64 characters.
page01
Name
Name of the standard page. The name is the unique identifier of the standard page in the system and cannot be changed after being created. Naming rules:
- Max. 64 characters, including the prefix namespace.
- Start with a letter and use only letters, digits, and an underscore (_). Do not end with an underscore (_).
page01
- At the bottom of the standard page, click Model View.
Figure 13 Clicking Model View
- On the displayed page, click New. On the displayed page, specify Model Name (for example, demo), set Source to Objects, and click Next.
Figure 14 Creating a model
- Select the object created and the fields added in 3, and click Next.
Figure 15 Selecting objects and fields
- Click OK.
- Return to the Designer View page and create a table to bind the model.
- At the bottom of the standard page, click Designer View.
- Drag a table widget to the standard page.
Figure 16 Dragging a table widget
- Select the table widget, choose Properties > Data Binding and click
next to Value Binding.
- Select the model created in 3 and click the confirm button.
Figure 17 Selecting the model
- Add a toolbar.
- Select the table widget, choose Properties > Table Block, and click Add next to Toolbar to add a toolbar.
Figure 18 Adding a toolbar
- Expand Extended Property to enable Editable.
Figure 19 Enabling Editable
- Set the demoName and demoId columns to be editable.
Click
next to the demoName column to make it editable. Repeat the preceding operations to set the demoId column to be editable.
Figure 20 Setting the demoName column to be editable
- Select the table widget, choose Properties > Table Block, and click Add next to Toolbar to add a toolbar.
- Click
in the upper part of the page to save the page settings.
- After the configuration is saved, click
in the upper part of the page to view the configuration effect.
Feedback
Was this page helpful?
Provide feedbackThank you very much for your feedback. We will continue working to improve the documentation.See the reply and handling status in My Cloud VOC.
For any further questions, feel free to contact us through the chatbot.
Chatbot