Preset APIs on Advanced Pages

Preset APIs for widget instances

• The init method includes the entry-point function for initializing data during widget rendering.
• The render method is used to render widgets.
• getConnectorProperties: obtains bridge attribute values.
• Obtains bridge instances based on bridge variable names. APIConnector is a string that indicates the bridge variable name.
• ConnectorIns.process(renderCbk, errCbk): invokes the process function using a bridge instance to initiate service invoking requests and process returned results.
  • Before initiating a request using the process function, set the requestParams attribute of a bridge instance to the request parameter, for example, ConnectorIns.requestParams = param.
  • renderCbk: processes the returned information. This parameter is of the function type.
  • errCbk: processes errors. This parameter is of the function type.
• ConnectorIns.query(param): invokes the query function using a bridge instance to initiate service invoking requests and process returned results. The parameters are described as follows:
  • param: request parameter.
  • The returned result is the Promise object.
• getProperties: returns the customized attribute values of a widget.

  When developing a widget, you can customize attributes for the widget and configure the attributes on the development page. The getProperties method can be used to return the customized attribute values, for example, var properties = thisObj.getProperties().

• getContainer: returns the DOM node of the container that renders the widget.

  A code example is as follows: var elem = thisObj.getContainer (). When jQuery is used to query a DOM node in the widget, the $("#id", elem) method can be used to obtain the DOM node.

• getWidgetBasePath: returns the root path that stores static resources of a widget.

  For example, if the static resource path of a widget is https://10.10.10.1:12900/default/0000000000NABzEjpNIH/assets/bundle/widget/172a6056501-a6f8ce1f-2ed9-4a9a-b883-251aaac14e0a/v1591923270914/test0609.js, https://10.10.10.1:12900/default/0000000000NABzEjpNIH/assets/bundle/widget/172a6056501-a6f8ce1f-2ed9-4a9a-b883-251aaac14e0a/v1591923270914 is returned after thisObj.getWidgetBasePath() is executed.

• getMessages: returns the internationalization file content defined in the internationalization configuration file of a widget. vue and vueI18n are required.

  For example, the messages-en.json and messages-zh.json internationalization files are defined during widget development. thisObj.getMessages() returns the internationalization content defined in the two files.

• hideWidget: hides the dom structure of the widget. This method can be invoked in the preview state to hide a widget.

  For example, execute the thisObj.hideWidget() method to hide the DOM structure of a widget.

• showWidget: displays the DOM structure of the widget. This method can be invoked in the preview state to display a widget.

  For example, execute the thisObj.showWidget() method to display the DOM structure of a widget.

• SITE_ROOT_PATH: obtains the root path of the URL of the current site. This is a preset parameter in Huawei Cloud Astro Zero. One site corresponds to one app. When an app is created, the system creates and allocates a site by default.

  If the URL of a page is https://10.10.10.1:12900/magno/render/cool__app_0000000000NABzEjpNIH/page1, the root path obtained using SITE_ROOT_PATH is /magno/render/cool__app_0000000000NABzEjpNIH.

• triggerEvent: triggers an event. The parameters are described as follows:
  • eventName: name of the event to be triggered.
  • {}: assigns values to the parameters passed when the event is triggered, for example, {param: value}.

Preset APIs for Studio objects

• Studio.registerWidget: defines a widget.
• Studio.registerConnector: defines a bridge.
• Studio.registerEvents: registers an event. Only the events registered using this API are displayed in the event list of a widget.
  • thisObj: current widget, indicating registering an event for the current widget.
  • eventName: event name, which must be the same as the first parameter in the event triggering API.
  • Event Label: event title that will be displayed in the event list.
  • []: parameter model passed when the event is triggered, for example, [{"name": "param"}].
• Studio.registerAction: registers an action. Only events registered using this API are displayed in the action list of the widget.
  • thisObj: current widget, indicating registering an action for the current widget.
  • actionName: action name.
  • Action Label: action label, which will be displayed in the action list.
  • [] indicates the parameters that will be passed in when the event is triggered.
  • $.proxy(this.receiveActionCbk, this): callback function that defines the execution logic of an action.
  • []: Leave this parameter blank.
• Studio.registerRouter: defines a route.
• Studio.inReader: determines whether the current page is in the develop state or preview state. The value true indicates that the page is in the preview state (runtime state), and the value false indicates that the page is in the develop state.
• StudioToolkit.getCatalogProperties(): obtains metadata of the current site.

Preset APIs for magno objects

savePropertiesForWidget(props): saves advanced attributes of the current widget in the develop state. The parameter is set to the attribute set object to be set.

An example of the props parameter is as follows:

{
  "prop1": "value1",
  "prop2": ""value2"
}

Preset APIs for the HttpUtils tool class

The HttpUtils tool class is built in Huawei Cloud Astro Zero. The preset APIs are as follows:

• HttpUtils.getCookie: obtains the value of a cookie.

  Code example: HttpUtils.getCookie()

• HttpUtils.setCookie: sets a cookie value.

  Code example: HttpUtils.setCookie("key","value")

• HttpUtils.getI18n: returns a Vue18n instance, which is used together with Vue and VueI18n. The Vue18n instance can be assigned an i18n parameter when a new Vue instance is created.

  Code example: HttpUtils.getI18n({locale: HttpUtils.getLocale(), messages: thisObj.getMessages()})

• HttpUtils.getCsrfToken: used when an API of the platform is invoked in AJAX mode. If the platform bridge is used, the platform automatically adds the csrf-token header to the request header.

  HttpUtils.getCsrfToken(function(csrfToken) {
    $.ajax({
      ....
      headers: {
        CSRF-Token: csrfToken
      },
    })
  })
• HttpUtils.refreshToken: manually refreshes the access token of the page. Generally, this method is executed to refresh the accesstoken of the page when the exit logic is executed.
• HttpUtils.getUrlParam: obtains parameters in the query string.

  For example, if the URL of a page is https://10.10.10.1:12900/magno/render/cool__app_0000000000NABzEjpNIH/page1?param=1, the value 1 is returned after HttpUtils.getUrlParam("param") is executed.

• HttpUtils.getLocalStorage: obtains the value of a localStorage.

  Code example: HttpUtils.getLocalStorage("key")

• HttpUtils.setLocalStorage: sets the value of a localStorage.

  Code example: HttpUtils.setLocalStorage("key","value")

init()

Initialization function, which is used to call the setInputParams function to set custom configuration items for a bridge.

setUrl(url)

This API must be invoked in constructUrl(params) to set the URL requested by the bridge.

setLoadMethod(type, dataType, callback, callbackName, ajaxOptions)

This API is invoked in constructUrl(params) to process the parameters in the request constructUrl(params). The parameters in the API are described as follows:

• type: request method, which can be POST, GET, PUT, or DELETE. The default value is GET.
• dataType: expected type of data returned by the server. Generally, this parameter is set to json, indicating that data in JSON format is returned.
• callback: This parameter is used when dataType is set to jsonp, indicating that the callback function name is rewritten in a JSONP request.
• callbackName: This parameter is used when dataType is set to jsonp, indicating that the callback function name is specified in a JSONP request.
• ajaxOptions: AJAX request setting. The following is an example:

  {
  	data: JSON.stringify(inputParamsObj.input),
  	contentType: "text/html;charset=utf-8",
  	beforeSend: function(xhr) {
  		xhr.setRequestHeader("bass-method", "post");
  		xhr.setRequestHeader("Content-Type", "application/json");
  	}
  }

constructUrl(params)

This API is executed to construct the request URL before a request is initiated. params is the request parameter.

In this API, setUrl(url) must be invoked to assign a value to the URL, and setLoadMethod can also be invoked to process request parameters (optional).

transform(resultData, renderCbk)

Process the request response. The parameters are described as follows:

• resultData: response to the request.
• renderCbk: callback function when the request is responded to. It is defined in the widget.

getUrl()

Used to obtain the URL of the bridge request.

setInputParams([{},...,{}])

Used to set a custom configuration item for the bridge.

• type: type of the configuration item. Common types include text and option.
• name: variable name of the configuration item.
• label: title of the configuration item.
• value: default value of the configuration item.
• validation: validation rule of the configuration item.

The following example is the code of a custom configuration item for a bridge:

this.setInputParams([
    {
        "type": "select",
        "name": "requestMethod",
        "label": JSON.stringify({en_US: "Request Method"}),
        "options": [
            {
                "label": "post",
                "value": "post",
                "selected": "true"
            },
            {
                "label": "get",
                "value": "get"
            },
            {
                "label": "put",
                "value": "put"
            },
            {
                "label": "delete",
                "value": "delete"
            }],
        "validation": {
            "rules": {}
        }
    },
    {
        "type": "text",
        "name": "prefix",
        "label": JSON.stringify({en_US: "prefix"}),
        "value": "",
        "validation": {
            "rules": {}
        }
    }]);

getInputParams()

Used to obtain the value of a custom configuration item.