Project Parameters

Project parameters are global parameter configurations that can be associated with the URL, BODY, HEADER of the API data source and the SQL statement of the database data source. You can set them directly using interactive or second-hand code, or you can pass them through URL parameters when embedding Shanhaijing pages. This parameter can be used in many scenarios, such as data filtering based on different conditions, pass-through parameters during project integration, etc. The following article introduces the creation of project parameters, the setting of project parameter values, and the use of project parameters in three parts.

1. Create project parameters

To set project parameters, click on the “Project Settings” in the “File” menu of the Kanban editing interface.

The parameter name is the name we will use when we reference or set this parameter in other places. It is recommended that you name it in the form of English words, and the parameter default value is the value taken when the current parameter is not modified.

2. Modify project parameter values

The value of a project parameter can be modified in three ways.

2.1 Modify the default value directly

Without further modification, the project parameters will use their default values. The default values can be modified directly in the project parameter settings.

2.2 Overwriting parameter values via URL

Often, we need to publish a project as a URL and integrate it into other web pages through iFrame. At this time, we can modify the project parameters by passing URL parameters.

Similarly, as for the city parameter set in 2.1, when we publish the current project as a link, the published link is https://app.wingsengine.com/public/v54m64pjxsueu5ne/

Then we can pass it by adding parameters after the connection, such as

https://app.wingsengine.com/public/v54m64pjxsueu5ne/?city=Shanghai%0A

Note that the parameter after city is actually Shanghai in Chinese, and needs to be passed in after URLEncoding (UTF8 encoding is used here).

In this way, the value of the project parameter city obtained in the project will be “Shanghai”. We interactively set the text content of a text component to the content of the project parameter when entering the site, and you can intuitively see the result:

2.3 Modify parameter values through interaction

Project parameters can also be set through interaction. Here we take the example of clicking a button to modify the project parameters.

First, we add a button to the dashboard and add an interaction triggered by a click event to the button.

After clicking, the city parameter of the project parameter is set to “Hangzhou”. If you want to modify multiple project parameters at the same time, select multiple in the parameter name, and multiple parameter lists will appear below, and you can set the modified values.

After the project parameters are modified, the text content will not be automatically updated, because the text content is set to be replaced with the value of the project parameters when entering the scene, and this event will not be triggered at this time. For the convenience of demonstration, we need to add an interaction to force the synchronization of the text content. As shown in the figure below:

After the settings are completed, save the project and open the release link of the project in the browser again. After clicking the button, you can see:

2.4 Modify parameters through secondary development code

In secondary development code, you can directly modify project parameters through the project object:

class Button {
  init() {
    // Modify the project parameter 'city' to 'Chengdu' when the button is clicked
    this.element.addEventListener("click", (ev) => {
      this.project.setVariable("city", "Chengdu");
    });
  }
}
export default Button;

3. Use of project parameters

Project parameters can be used in many places in the project. The general way to use them is to fill in the following format: {: parameter name}

For example, when the parameter name is city, write “{: city}” in the place where it is used, and it will be automatically replaced with the value of the city parameter at runtime.

Currently, project parameters can be used in the following five places in the project:

3.1 Dynamically connect to API data

When connecting to API data, there are usually such requirements, such as filtering sales data in different regions, or different visitors may see different data. These requirements can be achieved by filling in the form of project parameters when connecting to API data.

When connecting to API data, we can replace part of the content in the URL, BODY, and HEADER of the API with project parameters. Here we take the URL as an example to see how to use project parameters in API connection.

First, we have an API address:

http://192.168.31.210:65535/v1/app/de02c49d-e6ad-4753-8f79-2c0a01f856ca/04156bbd/?type=Shanghai%0A

Read a type parameter, and the output is in the form of “input city: type”, as shown in the figure:

Import this API into Wings Engine. Note that the parameters need to be filled in the following format:

http://192.168.31.210:65535/v1/app/de02c49d-e6ad-4753-8f79-2c0a01f856ca/04156bbd/?type={:City}

For the convenience of demonstration, we also need to do some settings to display the data. We modify the text options of the text component to generate data fields:

And bind the data just now to the text data of the text widget:

Tip: When modifying project parameters in other ways during editing and runtime, data related to the project parameters will be automatically refreshed without manual refresh.

3.2 Database SQL Statements

Like API data connection, database connection often needs to dynamically obtain data according to conditions. Here we take a student table as an example to see how we can do a data filtering case.

First, add a sex item parameter globally and fill in the default value of male.

Connect to the database, fill in the MySQL server parameters, and click the connect button to see all databases and tables:

After selecting the database, select the SQL mode and fill in the SQL statement:

1	select * from `student` where `sex`='{:sex}';

It is important to note that the parameters in the SQL statement are only replaced, so the quotation marks still need to be written where they are required.

After clicking OK, you can see that all data in the database with male gender has been found.

3.3 Interaction to set widget properties

In the interaction, we can set the properties of the widget. In the property value area, we can fill in the project parameters as part of the content. The specific operations are as follows. Let’s take the interaction of clicking a button as an example and add an interaction to the button first.

Then enter the text, the current gender is: {:sex} through this form

In this way, each time the button is clicked, the value of the text box will be modified to the following:

3.4 Obtain from the Secondary Development Code

The values of project parameters can be directly obtained in the secondary development code:

class Button {
  init() {
    // 按钮点击后修改项目参数city为成都
    this.element.addEventListener("click", (ev) => {
      console.log(
        "当前的项目参数city的值是：" + this.project.getVariable("city")
      );
    });
  }
}
export default Button;