Reusing a Submitted Form Page on an Approval Page

Expected Results

You can create pages for submitting and approving data in a table for employee trips, leave requests, or goods movement. You can also approve expense requests. If the pages have similar content, you can use the same functions on one page. This saves time and makes things easier.

Figure 1 Results
Click to enlarge

Procedure

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 2 Creating a blank application
Click to enlarge

**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

Create an object named productList and add fields to the object.

In the navigation pane, choose Data, and click + next to Object.
Set the object name and unique ID to productList, and click the confirm button. The object details page is displayed.
Figure 3 Creating the object productList

**Table 2** Parameters for creating 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

Click to go to the object details page.

On the Fields tab, click Add and add the productName field to the object.

Figure 4 Adding the productName field
Click to enlarge

**Table 3** Parameters for adding the productName 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 can contain only letters, digits, and an underscore (_). Do not end with an underscore (_).	productName
Field Type	Click . On the display page, select the type of the new field based on the parameter description.	Text

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

**Table 4** Adding fields to the object
Display Name	Unique ID	Type	Data Length
Description	productDesc	Text	255
Comment	approvalComments	Text	255
Status	productStatus	Text	255

After you finish the operations, you can see the new custom fields on the Fields tab of the object.

Figure 5 Viewing the added fields
Click to enlarge

Create a list page and create an object model.
1. In the navigation pane, choose Page, and click + next to Standard Page.
  Figure 6 Creating a list page
2. At the bottom of the standard page, click Model View.
3. Click New, specify Model Name (for example, productListMode), select Objects for Source, and click Next.
  Figure 7 Creating a model
4. Select the object created and the fields added in 2, and click Next.
  Figure 8 Selecting objects and fields
5. Click OK.
6. Return to the design view page, click Designer View at the bottom of the standard page.
7. Drag a table widget to the standard page.
  Figure 9 Dragging a table widget
8. Select the table widget, choose Properties > Table Block > Toolbar, and click Add to add a toolbar to the table.
  Figure 10 Adding a toolbar
9. Delete unnecessary buttons from the toolbar and retain only the Add Row button.
  Figure 11 Deleting unnecessary buttons
10. Select the table widget, choose Properties > Data Binding and click next to Value Binding.
11. Select the model created in 3.c and click the confirm button to create a table list.
  Figure 12 Selecting objects and fields
  
  Figure 13 Table list
12. Click in the upper part of the page to save the page settings.
Create a page for creation and approval, then add models to it.
1. In the navigation pane, choose Page, and click + next to Standard Page.
  Figure 14 Creating a page
2. Drag a form widget to the standard page, bind the data object, and add operation buttons.
  Figure 15 Dragging a form widget
  
  Figure 16 Adding operation buttons
  
  Figure 17 Effect
3. Drag two title widgets to the page, and change the title content to Basic Information and Approval. Figure 18 shows the layout effect.
  Figure 18 Adding title widgets and adjusting the layout
4. At the bottom of the standard page, click Model View.
5. Click New, specify Model Name (for example, isApproval), select Custom for Source, and click Next.
  Figure 19 Adding the isApproval model
6. Retain the default values, click Next, and click OK. The model is created.
7. Repeat 4.e to 4.f to create the isNew model. The following figure shows the final effect.
  Figure 20 Checking the created models
8. At the bottom of the standard page, click Designer View. Select the "Product Name" input box widget. Choose Properties > Data Binding, and click + next to Property Binding. Select Disable and click to bind the isApproval model to the field.
  Figure 21 Binding the isApproval model to the product name input box widget
9. Select the "Description" input box widget. Choose Properties > Data Binding, and click + next to Property Binding. Select Disable and click to bind the isApproval model to the widget.
  Figure 22 Binding the isApproval model to the description input box widget
10. Select the "Approval" title widget. Choose Properties > Data Binding, and click + next to Property Binding. Select Hide and click to bind the isNew model to the field.
  Figure 23 Binding the isNew model to the approval title widget
11. Similarly, select the "Comments" input box widget and bind the isNew model to the widget according to the operations in 4.j.
  Figure 24 Binding the isNew model to the approval comment input box widget
12. Select the page widget, click the Events tab, and click + next to on-load to add an event for the page widget.
  Figure 25 Adding an event for the page widget
  
  Figure 26 Viewing the name of the model bound to the form
  
  Enter the following example in the custom action to obtain external data. isApproval is the model created in 4.e, Namespace__productList__CST is the object created in 2, and form_0 is the model bound to the form in 4.b, as shown in Figure 26.
```
// Obtain the parameters transferred when the page is opened.
const { id, isApproval } = context.$page.params;
$model.ref('isApproval').setData(isApproval);
$model.ref('isNew').setData(!isApproval);
const _object = context.object('Namespace__productList__CST');
if (id) {
    // Query a single record based on the record ID.
    _object.queryByID(id).then(function (response) {

        if (response && response.resCode === '0') {

            $model.ref('form_0').setData(response.result[0]);
        }
    });
}
```
13. Select the Save button. On the Events tab page, click next to Form Submit to delete the current form submission method, and click + next to on-click to add a custom action for the button.
  Figure 27 Deleting the form submission method
  
  In the custom action, enter the following example to process new or updated data. isNew is the model created in 4.g, Namespace__productList__CST is the object created in 2.b, and Namespace__productStatus__CST and Namespace__approvalComments__CST are the object fields added in 2.e.
```
// Obtain the model data.

const isNew = $model.ref('isNew').getData();

// Obtain the form data.

const  _form = context.$component.form;

const data = _form.getFormData();

// Obtain the object.

const _object = context.object('Namespace__productList__CST');

// Create

if (isNew) {

    data.Namespace__productStatus__CST = 'Approval in progress';

    // Insert data. Batch operations are supported.

    _object.insert([data]).then(function (response) {

        if (response && response.resCode === '0') {

            // Success message.

            context.$message.success('Created.');

            // Close the pop-up page. This function only works on pop-up pages.

            context.$dialog.popin();

        }

    });

} else {

    const id = context.$page.params.id;

    const params = {

        Namespace__productStatus__CST: 'Approved',

        Namespace__approvalComments__CST: data.Namespace__approvalComments__CST

    }

    // Update data based on the record ID.

    _object.updateByID(id, params).then(function (response) {

        if (response && response.resCode === '0') {

            // Success message.

            context.$message.success('Approved.');

            // Close the pop-up page. This function only works on pop-up pages.

            context.$dialog.popin();

        }

    });

}
```
14. Click in the upper part of the page to save the settings.

Return to the list page and add an event.

Select the Add Row button widget. On the Events tab page, click

next to Add Row to delete the new row, and click + next to on-click to add a custom action for the button.

Figure 28 Deleting a preset event
Click to enlarge

In the custom action, enter the following example to display a standard page. Namespace__NewApproval is the standard page created in 4.

// Display the standard page.

context.$dialog.popup({

    title: 'New',

    page: 'Namespace__NewApproval',

    width: 600,

    height: 400,

    footerHide: true,

    showCancel: true,

    okText: 'ok',

    params: {},

    onClose: function () {

        // Wait until the database operation is complete.

        setTimeout(() => {

            // Current table.

            const _table = context.$component.table;

            // Refresh the table.

            _table.doQuery();

        }, 100);



    }

});

Select the table widget, choose Properties > Table Columns, and click to add an operation column to the table.
Figure 29 Adding an operation column
Click next to the new operation column Operation1. The Property Settings dialog box is displayed.
In the Basic area, change the value of Column Title to Operation.
Figure 30 Modifying the column title
In the Operation Button area, click Add Operation Button to add an operation button. Set Label to Approve.
Figure 31 Adding an Approve button

Click

next to Approve and click + next to Action List to add a custom action for the operation button.

Figure 32 Adding a custom action for the operation button
Click to enlarge

In the custom action, enter the following event to obtain the row data. Namespace__NewApproval is the standard page created in 4.a.

// Obtain the row data of the current operation from the event in the operation column.
const rowData = context.$component.current.$attrs.row;
 
// A standard page is displayed.
context.$dialog.popup({
    title: 'Approval',
    page: 'Namespace__NewApproval',
    width: 600,
    height: 580,
    footerHide: true,
    showCancel: true,
    okText: 'ok',
    params: { isApproval: true, id: rowData.id },
    onClose: function () {
        // Wait until the database operation is complete.
        setTimeout(() => {
            // Current table.
            const _table = context.$component.table;
            // Refresh the table.
            _table.doQuery();
        }, 100);
 
    }
});

Click in the upper part of the page to save the settings.

Verify the effect.
1. On the list page, click in the upper part of the page to go to the preview page.
2. Click Add Row, enter the product name and product description, and click Save to add a data record.
  Figure 33 Adding a row of data
  
  After the data is saved, you can view the added data in the list, and the product status is Approving.
  
  Figure 34 Viewing the added data
3. Click Approve next to the new data, add approval comments, and then click Save.
  Figure 35 Approval completed
  
  After the data is saved, you can view that the comment is approved and the product status is Pass.
  
  Figure 36 Viewing the approval comment