Can front-end development still play like this?

Time:2021-7-23

1. Introduction to Roma business flow

Roma business flow (hereinafter referred to as “business flow”) is an application integration and data open service based on Roma connect platform, which is suitable for cross instance and cross application enterprise system integration scenarios. Business flow supports creating tasks through visual UI interface, which reduces the development threshold of users with different experience backgrounds.

Figure 1-1 business flow demo

2 metadata overview

Metadata (hereinafter referred to as “metadata”) is an important concept of business flow. It is used to constrain the data model generated by the front end and drive the logical implementation of business. It is a common specification used by the front-end page and the back-end business.

In the implementation of the front-end, metadata is responsible for driving the front-end framework, which is used to build a dynamic interface generated by metadata modeling. In the process of business flow development, new components can be added by adding new metadata in JSON format without front-end development, which realizes the goal of rapid development and reduced maintenance.

On the business side, the processing program is implemented according to the metadata model, which means that the user will input enough data on the front end to execute the business side, so as to run the business logic correctly.

Not for the front end

It should be noted that metadata is not the center of front-end development, it mainly provides consistent general modeling for model generators and model consumers. In business flow, the front-end framework only generates business data model strictly according to the concept of modeling. However, the business side should not be limited by the front-end, and should be suitable for any front-end framework that can correctly generate data model according to metadata.

Another core usage of metadata is “verification”. In the back-end service, the service should use the metadata model to verify whether the service request is legal before deploying the business side.

Figure 2-1 metadata driven model

3 metadata properties

3.1 components
Component is the basic unit of business flow task, and each component has specific functions, such as “open API” component is used to define and open an API, “data source” type component is used to select data source for data migration or data opening, “script processing” component is used to process data by script, etc, Users arrange business by configuring and connecting various types of components. The following figure shows the components provided by the current business flow.

Figure 3-1 business flow components

3.2 component metadata
During development, new components can be generated by adding new “component metadata”“ The component metadata model contains front-end auxiliary data and business side dependent attributes“ The key attributes of “component metadata” are shown in the following table.

Table 3-1 properties of “component metadata”

By defining the above properties, we can quickly add new components to the front end. The following is a sample_ Example of metadata component of “component”.

{

"type":"sample_component",
"categories":["sample"], 
"display":"sample component",
"description":"Input types illustration sample component",
"iconURL":"",
"inputs":[ 
    {
        "key":"parameter01", 
        "display":"parameter 1", 
        "type":"text", 
        "placeholder":"A input hint message here.",
        "default":"default_value",
        "required":true
    },
   {
        "key":"parameter02",
        "display":"parameter 2", 
        "type":"text", 
        "placeholder":"A input hint message here.",
        "default":"default_value", 
        "required":true 
    }
  ]

}

According to the above metadata, the component effect rendered by the front end is shown in the figure below. For example, click “sample” on www.sangpi.com_ After the “component” component, the component configuration is shown in the following figure.

After the user configures the component and starts the business flow, the business side will parse the received metadata. The business side will determine the execution logic according to the “type” field.

{

"id": "UUID",
"name": "name",
"category": "sample",
"description": "description"
"metadata": {
    "type": "sample_component",
    "configuration": {
        "parameter01": "parameter01 value",
        "parameter02": "parameter02 value"
       }
}

}

3.3 input metadata
The “inputs” attribute of “component metadata” represents the input information of the current component, which is defined by “input metadata”.

Input metadata is a collection of input parameters, which enables developers to provide information needed for business processing with minimal code“ The basic attributes of “input metadata” are shown in the following table.

Table 3-2 basic attributes of “input metadata”

In the metadata framework of business flow, there are many types of game parameters that support “input source data”, and most of them have additional attributes. Next, we will briefly introduce some parameter types of “input source data”.

3.3.1 Text
General type of plain text input. Additional properties include “MaxLength” and “pattern”.

An example of a “text” type input parameter is shown below.

{

"key":"text_sample",
"display":"Text Input",
"type":"text",
"placeholder":"A input hint message here.",
"default":"default input",
"required":true,
"maxlength":20,
"pattern":"/.+"

}

The front-end rendering effect is shown in the following figure.

3.3.2 TextArea
Multi line text area input type. The additional property is “MaxLength”.

An example of a textarea type input parameter is shown below.

{

"key":"textarea_sample",
"display":"Text Area Input",
"type":"textarea",
"placeholder":"A input hint message here.",
"required":true,
"maxlength":100

}

An example of an input parameter of type “number” is shown below.

{

"key":"number_sample",
"display":"Numeric Input",
"type":"number",
"default":50,
"min":"0",
"max":"100",
"step":"1",
"required":true

}

3.3.4 Password
Masked text input type, used for password text input.

An example of a password type input parameter is shown below.

{

"key":"password_sample",
"display":"Password Input",
"type":"password",
"default":"default",
"required":true

}

3.3.5 Selection
“Selection” represents the drop-down selection list, which is divided into “static selection” and “dynamic selection”.

  1. Static selection
    A static selection list of predefined values. The additional property is “choices”.

An example of a static select type input parameter is shown below.

{

"key":"selection_sample",
"display":"Static Selection Sample",
"type":"selection",
"default":"default_value",
"required":true,
"choices":[
    {
        "display":"item_1",
        "value":"1"
    },       
    {
        "display":"item_2",
        "value":"2"
    },
    {
        "display":"item_default",
        "value":"default_value"
     }
]

}

  1. Dynamic selection
    The runtime uses the request result of the external rest API as the selection list. Additional attributes are shown in the following table.

Table 3-3

An example of a dynamic selection type input parameter is shown below.

{

"key":"selection_sample",
"display":"Dynamic Selection Sample",
"type":"selection",
"required":true,
"selector":{
    "uri":"http://my.domain.com/v1/samples",
    "method":"GET",
    "placeholder":"loading...",
    "selector_display":"$.samples[*].sample_name",
    "selector_value":"$.samples[*].sample_id"
}

}

When you click the component, it will be called automatically“http://my.domain.com/v1/sampl…

{

"samples":[
    {
        "sample_name":"sample01",
        "sample_id":"01"
    },
    {
        "sample_name":"sample02",
        "sample_id":"02"
    },
    {
        "sample_name":"sample03",
        "sample_id":"03"
    }
]

}

3.3.6 Tableinput
Form input. The additional property is columns.

An example of an input parameter of type “columns” is shown below.
{

"key":"tableinput_sample",
"display":"Table Input Sample",
"description":"Table with custom columns",
"required":true,
"type":"tableinput",
"columns":[
    {
        "key":"key-1",
        "display":"col-1",
        "default":"",
        "type":"text",
        "required":true
    },
    {
        "key":"key-2",
        "display":"col-2",
        "default":"default_value",
        "type":"text",
        "required":true
    },
    {
        "key":"key-3",
        "display":"col-3",
        "placeholder":"a placeholder message",
        "type":"text",
        "required":true
    }
]

}

The front-end rendering effect is shown in the following figure.

Figure 3-10 “tableinput” type input parameter example

Conclusion

Metadata is a specification used by the front end and the business side in the business flow. It is a bridge between the front end and the back end. It is constrained by a unified data format to agree on the transmission parameters between the front end and the back end. The use of metadata greatly improves the development efficiency and reduces the maintenance and secondary development costs. It is through the way of metadata rendering that we can help the rapid development of business flow services, help enterprises quickly and simply connect the cloud to the cloud, eliminate the digital divide, build business agility, and drive the digital transformation.