Business component development

Components can be developed in various ways. Developers can customize plug-ins and extensions. However, they must ensure that the files that are packaged and uploaded comply with the packaging specifications. For more information, see Component resource upload specifications.

Scaffolding for business component development

The scaffolding provided in this article, which can be downloaded by clicking the corresponding link, includes the basic code skeleton for component development, component debugging, and component packaging.

• Canvas Vue component development scaffolding

• Scaffold for canvas React component development

• Canvas Rax component development scaffolding

• Scaffold for developing native JavaScript components on canvas

Vue components

Canvas Vue component development scaffolding is suitable for business components developed using the Vue technology stack.

Development steps:

1. Component development

   Develop this component under the src/components folder, where the directory description is:

   .
   ├── index.js module file
   ├── mock test data of the configurable properties of the mock.json module
   └ ── schema.json module configurable attribute data 

   You can also add other directories or files under the src/components, and adjust them based on resources and functions.

2. Component debugging

   npm start running, you can open the http://localhost:8080/ page to check whether the components are as expected.

3. Component packaging

   Run the npm run build to package the component and copy the mock.json and schema.json files to the packaged folder. A dist folder is generated, which is the package directory of the component.

4. Component upload

   Use the component management module of the Intelligent Build console to upload the packaged file and enter the component information.

React component

Canvas React component development scaffolding is suitable for business components developed using the React technology stack.

Development steps:

1. Component development

   Develop this component under the src/components folder, which is described as follows:

   .
   ├── index.js module file
   ├── mock test data of the configurable properties of the mock.json module
   └ ── schema.json module configurable attribute data 

   You can also add other directories or files under the src/components, and adjust them based on resources and functions.

2. Component debugging

   npm start running, you can open the http://localhost:3000/ page to check whether the components are as expected.

3. Component packaging

   Run the npm run build to package the component and copy the mock.json and schema.json files to the packaged folder. A dist folder is generated, which is the package directory of the component.

4. Component upload

   Use the component management module of the Intelligent Build console to upload the packaged file and enter the component information.

Rax component

Canvas Rax component development scaffolding is suitable for business components developed by using the Rax technology stack.

Development steps:

1. Component development

   Develop this component under the src folder, which is described as follows:

   .
   ├── index.tsx component file
   ├── index.css component style
   ├── mock test data of configurable properties of the mock.json component
   └ ── attribute data 

   that can be configured for the schema.json component

   You can also add other directories or files under the src, and adjust them based on resources and functions.

2. Component debugging

   npm start running, you can open the http://localhost:3333/ page to check whether the components are as expected.

3. Component packaging

   Run the npm run build to package the component and copy the mock.json and schema.json files to the packaged folder. A dist folder is generated, which is the package directory of the component.

4. Component upload

   Use the component management module of the Intelligent Build console to upload the packaged file and enter the component information.

Native JS components

Canvas native JS component development scaffolding is suitable for business components developed by using native JS.

Development steps:

1. Component development

   Develop this component under the src folder, which is described as follows:

   .
   ├── index.html module layout
   ├── index.css module style
   ├── index.js module logic
   ├── mock test data of the configurable properties of the mock.json module
   └ ── schema.json module configurable attribute data 

   You can also add other directories or files under the src, and adjust them based on resources and functions.

2. Component debugging

   npm start running, you can open the http://localhost:3000/ page to check whether the components are as expected.

3. Component packaging

   Run the npm run build to package the component and copy the mock.json and schema.json files to the packaged folder. A dist folder is generated, which is the package directory of the component.

4. Component upload

   Use the component management module of the Intelligent Build console to upload the packaged file and enter the component information.

Component resource upload specifications

After you develop a component, you must comply with the resource file upload specifications when you package and upload the component resources.

bundle.js file

• Vue & React Component: Export the Named Module component definition according to CMD(Common Module Definition, Common Module Definition) specification, and package it in a single file Bundle in the following format:

  define('moduleName', [], function (require, exports, module) {
    module.exports=function entry function
  })

  The exposed entry function is as follows:

  function render({
    element: string | HTMLElement, // id selector /Element
    props: {[key: string]: any}, // The props property.
  }) {
    const title = props.title || mock.title;
    // Customize the component rendering logic.
  }

• Native JS components: package them as executable HTML files.

• Rax components are packaged according to the rax-component packaging specifications.

schema.json file

schema.json is used to write the configurable properties of the business component. The basic format of the schema.json file is as follows:

{
  "title": "Schema",
  "type": "object",
  "properties": {
    ... // Field attribute value
  }
}

Schema. json generation method:

1. Open Online Form Designer.

2. A form to configure the properties of the build component.

3. Copy the schema to the schema.json file of the project.

The schema.json file contains some special configuration items. Please refer to the following instructions for configuration.

Case 1

For custom form components, schema.json has a configuration items to open the form builder. In this case, you can add a x-component:"FormGenerator" and the editor will parse it.

The mPaaS frontend needs to encapsulate the form builder as a complete component, and customize the required form components and submit button. For more information about the components used, see Form Designer.

The canvas side invokes the form builder if it resolves to a x-component:"FormGenerator".

The schema is as follows:

"xxx": {
  "title": "Design a form",
  "type": "object",
  "x-component": "FormGenerator" // FormGenerator is only used as an example. It can be replaced by another name. It needs to be consistent between mPaaS and canvas frontend.
}

Case 2

For the data source drop-down list, schema.json has a configuration items for selecting the appropriate data source interface for the business component. In this case, you can add a drop-down list and the editor will parse it specially.

The schema is as follows:

"xxx": {
  "title": "data source", // This is displayed on the right panel of the editor
  "name": "dataSource",
  "type": "string",
  "x-decorator": "FormItem",
  "x-component": "Select",
    }

Case 3

For the parameter form of the data source, schema.json will have a configuration items to display the parameters required by the data source interface of the business component, which is filled in when the interface is created. In this case, you can add a new x-component:"GetParamsData" and the editor will parse it specially.

The parameters and parameter values on this panel are passed as parameter keys and values respectively when the data source interface is called.

The schema is as follows:

"xxx": {
  "type": "array",
  "x-component": "GetParamsData",
    }

Situation 4

For the Submit Data drop-down list, schema.json has a configuration items for selecting the appropriate submit data interface for the business component. In this case, you can add a drop-down list and the editor will parse it specially.

The schema is as follows:

"xxx": {
  "title": "Submit interface", // This is displayed on the right panel of the editor
  "name": "dataSource",
  "type": "string",
  "x-decorator": "FormItem",
  "x-component": "Select",
    }

Situation 5

For the parameter form for submitting data, schema.json will have a configuration items to display the parameters required for the data source interface of the business component, which is filled in when the interface is created. In this case, you can add a new x-component:"SaveParamsData" and the editor will parse it specially.

The parameters and parameter values on this panel are passed as parameter keys and values respectively when you call the Submit Data operation.

The schema is as follows:

"xxx": {
  "type": "array",
  "x-component": "SaveParamsData"
    }

Situation 6

The business component contains a list of arrays. A configuration items in schema.json is used to configure the data in the array list. In this case, add a new x-component:"ArrayCards".

This allows you to modify each item in the array list and sort it in the editor.

The schema is as follows:

"xxx": {
      "type": "array",
      "x-component": "ArrayCards",
      "x-component-props": {
        "title": "list" // The title is displayed in the editor. The "list" in this case is only an example.
      },
      "items": { // The "items" here is fixed.
        "type": "object",
        "properties": {
          "title": {
            "title": "Title",
            "type": "string",
            "x-component": "Input",
            "required": true
          },
          ... // Field properties
        }
      }
    }

mock.json file

The content of the mock.json file is in the following format:

{
  "title":"Title", 
  ... other fields
}