Adding and Deleting Table Data with Scripts

Expected Results

Use scripts to add and delete object data on the frontend page. For example, when a piece of data is added to or deleted from a standard page, the data is also added to or deleted from the object associated with the standard page.

Figure 1 Adding data on the page

Figure 2 Synchronizing new data in an object

Figure 3 Object with two data records

Figure 4 Deleting the data record whose proId is 1 on the frontend page

Figure 5 Synchronizing deletion of data whose proId is 1 in the object

Implementation Method (Add)

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 6 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 product and add fields 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 product and click the confirm button.
      Figure 7 Creating object product
      

   Table 2 Parameters for the created object product

   Parameter	Description	Example
   Object Name	Name of the new object, which can be changed after the object is created. Value: 1–80 characters.	product
   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 (_).	product

   3. Click to go to the object details page.
   4. On the Fields tab page, click Add and add the ProName field for the object.
      Figure 8 Adding the ProName field
      

      Table 3 Parameters for adding the proName field

      Parameter	Description	Example
      Display Name	Name of the new field, which can be changed after the field is created. Value: 1–63 characters.	proName
      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 (_).	proName
      Field Type	Click . On the page that is displayed, select the type of the new field based on the parameter description.	Text

   5. On the Fields tab, click Add again to add the proId field.
      Figure 9 Adding the proId field
      

3. Create a script.
   1. In the navigation pane, choose Logic and click + next to Script.
   2. Create a script, set the name to sqlAdd, and click Add.
      Figure 10 Creating the sqlAdd script
      
   3. In the script editor, enter the sample code.
      The sample code implements the following function: When the Add button is clicked, data such as the name and ID entered at the frontend is obtained and inserted into the object. If the insertion fails, the failure information is recorded. In the example, Namespace __product__CST is the object created in 2.

      //This script is used to create a work order.
      import * as db from 'db';//Import the standard library related to the object.
      import * as context from 'context';//Import the standard library related to the context.
      
      //Define the input parameter structure.
      @action.object({ type: "param" })
      export class ActionInput {
          @action.param({ type: 'String', required: true, label: 'String' })
          proId: string;
          @action.param({ type: 'String', required: true, label: 'String' })
          proName: string;
      }
      //Define the output parameter structure. The output parameter contains one parameter, that is, the record ID of workOrder.
      @action.object({ type: "param" })
      export class ActionOutput {
          @action.param({ type: 'String' })
          id: string;
      }
      //Use the data object namespace __product__CST.
      @useObject(['Namespace__product__CST'])
      @action.object({ type: "method" })
      export class CreateWorkOrder {    //Define the API class. The input parameter of the API is ActionInput, and the output parameter is ActionOutput.
          @action.method({ input: 'ActionInput', output: 'ActionOutput' })
          public createWorkOrder(input: ActionInput): ActionOutput {
              let out = new ActionOutput();    //Create an instance of the ActionOutput type as the return value.
              let error = new Error();    //Create an instance of the error type to save the error information when an error occurs.
              try {
                  let productData = new Object();
                  productData['Namespace__proName__CST'] = input.proName;   //Assign the input parameter to the productData variable for future use.
                  productData['Namespace__proId__CST'] = input.proId;
                  let s = db.object('Namespace__product__CST');    //Obtain the operation instance of the Namespace__product__CST object.
                  let id = s.insert(productData);
                  if (id) {
                      out.id = id;
                  } else {
                      error.name = "WOERROR";
                      error.message = "Unable to create product!";
                      throw error;
                  }
              } catch (error) {
                  console.error(error.name, error.message);
                  context.setError(error.name, error.message);
              }
              return out;
          }
      }

   4. Click to save the script. After the script is saved, click to activate the script.

4. Create an object model.
   1. In the navigation pane, choose Page, and click + next to Standard Page.
   2. At the bottom of the standard page, click Model View.
   3. Click New, specify Model Name (for example, sqlAdd), select Services for Source, and click Next.
      Figure 11 Creating a model
      
   4. Select the script created in 3 and click the confirm button.
      Figure 12 Selecting the script
      
   5. Click Next and then click OK.

5. Return to Designer View and bind the model with the widgets.
   1. On the standard page, drag two Input widgets and one Button widget, change the Label of two input widgets to name and id, and set the button Display Name to Add.
      Figure 13 Final page setting effect
      
   2. Select the name input widget, choose Properties > Data Binding and click next to Value Binding.
   3. Select the model (proName) created in 4 and bind the input widget with the script data.
      Figure 14 Selecting the model
      
   4. Repeat the preceding operations to bind the model (proId) created in 4 to the id input widget.
      Figure 15 Binding a model to the id input widget
      

6. Add an event for the Add button.
   1. Select the Add button widget and click the Events tab.
   2. Click + next to on-click. The page for adding an action is displayed.
   3. Under Custom Action, enter the custom code and click Create.
      Figure 16 Customizing an action
      

      In this example, the customized JavaScript code is used to call the service after the submit button is clicked. The service calls the script to add records.

      $model.ref('sqlAdd').run().then(function(data){
          console.log(data);
      }).catch(function(error){
          console.log('error is', error);
      });

7. Return to the standard page and click to save the page settings. After the page is saved, click to preview the effect.

Implementation Method (Delete)

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 17 Creating a blank application
      

      Table 4 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 a deletion script.
   1. In the navigation pane, choose Logic and click + next to Script.
   2. Create a script, set the name to sqlDelete, and click Add.
      Figure 18 Creating the sqlDelete script
      
   3. In the script editor, enter the sample code.
      The script in this example is used to delete a data record based on the ID entered on the page through API. If an error is reported, the error information is recorded. In the example, Namespace __product__CST is the object created in 2.

      //This script is used to delete work orders.
      import * as db from 'db';//Import the standard library related to the object.
      import * as context from 'context';//Import the standard library related to the context.
      //Define the input parameter structure.
      @action.object({ type: "param" })
      export class ActionInput {
          @action.param({ type: 'String', required: true, label: 'String' })
          id: string;
      }
      //Define the output parameter structure. The output parameter contains one parameter, that is, the record ID of workOrder.
      @action.object({ type: "param" })
      export class ActionOutput {
          @action.param({ type: 'String' })
          id: string;
      }
      //Use the data object namespace __product__CST.
      @useObject(['Namespace__product__CST'])
      @action.object({ type: "method" })
      export class DeleteWorkOrder {    //Define the API class. The input parameter of the API is ActionInput, and the output parameter is ActionOutput.
          @action.method({ input: 'ActionInput', output: 'ActionOutput' })
          public deleteWorkOrder(input: ActionInput): ActionOutput {
              let out = new ActionOutput();    //Create an instance of the ActionOutput type as the return value.
              let error = new Error();    //Create an instance of the error type to save the error information when an error occurs.
              try {
                  let id = input.id;
                  let s = db.object('Namespace__product__CST');    //Obtain the operation instance of the Namespace__product__CST object.
                  //Query condition
                  let condition = {
                      "conjunction": "AND",
                      "conditions": [{
                          "field": "Namespace__proId__CST",
                          "operator": "eq",
                          "value": id
                      }]
                  };
                  let isDeleted = s.deleteByCondition(condition);
                  if (isDeleted) {
                      out.id = id;
                  } else {
                      error.name = "WOERROR";
                      error.message = "Failed to delete the work order!";
                      throw error;
                  }
              } catch (error) {
                  console.error(error.name, error.message);
                  context.setError(error.name, error.message);
              }
              return out;
          }
      }

   4. Click to save the script. After the script is saved, click to activate the script.

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, sqlDelete), select Services for Source, and click Next.
      Figure 19 Creating a model
      
   5. Set Service Type to Script. On the displayed Select Service page, select the script created in 2 and click OK.
      Figure 20 Selecting the script
      
   6. Click Next and then click OK.

4. Return to Designer View and bind the model with the widgets.
   1. Drag an Input widget and a Button widget to the standard page, set the Label of the input widget to id, and set the Display Name of the button widget to Delete.
   2. Select the input widget, choose Properties > Data Binding and click next to Value Binding.
   3. Bind the input widget with the input parameter id of the sqlDelete model created in 3.
      Figure 21 Selecting the model
      

5. Add an event for the Delete button.
   1. Select the Delete button widget and click the Events tab.
   2. Click + next to on-click. The page for adding an action is displayed.
   3. Under Custom Action, enter the custom code and click Create.
      Figure 22 Customizing an action
      

      The custom JavaScript code in the example is used to call the backend service, and the backend service calls the script to delete data.

      $model.ref('sqlDelete').run().then(function(data){
          console.log(data);
      }).catch(function(error){
          console.log('error is', error);
      });

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