Help Center/ Huawei Cloud Astro Zero/ User Guide (Low-Code)/ Huawei Cloud Astro Zero Management Center/ Managing the Information Application Resources/ Managing Page Resources in Applications/ Managing Widget Templates
Updated on 2025-08-15 GMT+08:00
View PDF
Share

Managing Widget Templates

Viewing Widget Template Details

  1. Log in to the Huawei Cloud Astro Zero console and click Access Homepage. The application development page is displayed.
  2. In the upper left corner of the page, click and choose Environments > Environment Configuration.
  3. Choose Maintenance from the main menu.
  4. In the navigation pane, choose Global Elements > Page Assets > Widget Templates.
  5. On the Global tab page, click the corresponding widget template.

    • Tenant: displays custom widget templates. Huawei Cloud Astro Zero allows you to add, delete, and modify custom widget templates.
    • Global: displays the preset widget templates of Huawei Cloud Astro Zero. You can view the preset widgets and download widgets, but cannot delete them.
    • All: displays all widget templates in Huawei Cloud Astro Zero, including preset and custom templates.

  6. On the widget details page, you can view the widget description, change history, and package information.

Previewing a Widget Template

  1. Log in to the Huawei Cloud Astro Zero console and click Access Homepage. The application development page is displayed.
  2. In the upper left corner of the page, click and choose Environments > Environment Configuration.
  3. Choose Maintenance from the main menu.
  4. In the navigation pane, choose Global Elements > Page Assets > Widget Templates.
  5. On the Global tab page, click the corresponding widget template.
  6. On the widget details page, click Preview to preview the widget template online.

Downloading a Widget Template

  1. Log in to the Huawei Cloud Astro Zero console and click Access Homepage. The application development page is displayed.
  2. In the upper left corner of the page, click and choose Environments > Environment Configuration.
  3. Choose Maintenance from the main menu.
  4. In the navigation pane, choose Global Elements > Page Assets > Widget Templates.
  5. On the Global tab page, click the corresponding widget template.
  6. On the widget details page, click Download.
  7. On the page for downloading the widget template, enter the widget name and click Save.

    If you choose to download the original template, the widget name in the package downloaded to the local PC will not be changed.

Customizing Widgets Based on Templates

If the preset widgets cannot meet your requirements, you can customize widgets as required.

  1. Log in to the Huawei Cloud Astro Zero console and click Access Homepage. The application development page is displayed.
  2. In the upper left corner of the page, click and choose Environments > Environment Configuration.
  3. Choose Maintenance from the main menu.
  4. In the navigation pane, choose Global Elements > Page Assets > Widget Templates.
  5. Download the widget template. For details, see Downloading a Widget Template.

    For example, download the widgetVue3Template widget template and set the widget name to TabsWidget.

  6. Decompress the downloaded package.

    Table 1 Widget file structure

    File Name

    File Description

    TabsWidget.js

    When customizing a widget, you need to define the Widget name.js file which is a JavaScript file of the core rendering logic. It is loaded and executed during the widget editing and page publishing and running. For details about the preconfigured APIs, see Table 2

    TabsWidget.editor.js

    Widget attribute file, which defines the GUI and logic that need to be rendered during widget editing. The .editor.js file is loaded only when the widget is in the editing state, including:

    • The propertiesConfig method defines the configuration logic of properties displayed on the Property panel of widgets.
    • The create method is called only once to create a widget.

    TabsWidget.css

    CSS file, which defines the widget style.

    TabsWidget.ftl

    Widget DOM file, which includes the content that needs to be rendered in advance on the server. It is equivalent to an HTML file and is used to display the widget style.

    packageinfo.json

    Widget metadata file, which includes:

    • name under widegtApi: widget name.
    • widgetDescription: widget description.
    • authorName: widget author.
    • localFileBasePath: local debugging path of the widget.
    • i18n: resource file for internationalization. This file is not included in the package in this example.
    • requires: name and version of the dependency library.
    • width: default widget width when the widget is added to an advanced page with an absolute layout. The unit is pixel. If this parameter is not specified, the default value 200px is used. This file is not included in the package in this example.
    • height: default widget height when the widget is added to an advanced page with an absolute layout. The unit is pixel. If this parameter is not specified, the default value 200px is used. This file is not included in the package in this example.
    Table 2 Description of preconfigured APIs in the Widget name.js file

    Category

    API Description

    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.
    • getConnectorInstanceByName: obtains bridge instances based on bridge variable names. APIConnector is a string that indicates the bridge variable name.
    • ConnectorIns.process(renderCbk, errCbk): calls the process function using a bridge instance to initiate service calling 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): calls the process function using a bridge instance to initiate service calling 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 need to be configured.

      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 a widget. This method can be called 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 a widget. This method can be called 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. Description
      • 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 label, which 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. Description
      • 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.
    • Studio.registerRouter: defines a route.
    • Studio.inReader: determines whether the current advanced 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 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 called in AJAX mode. If the platform bridge is used, the platform automatically adds the csfr-token header to the request header. 
      HttpUtils.getCsrfToken(function(csrfToken) {
  $.ajax({
    ....
    headers: {
      CSRF-Token: csrfToken
    },
  })
})
    • HttpUtils.refreshToken: manually refresh the access token of the page. Generally, this method is executed to refresh the access token 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")

  7. Develop a widget on the local host. After the widget is developed, compress all files of the widget into a .zip package.
  8. Return to the Huawei Cloud Astro Zero environment configuration page, choose Maintain > Global Elements > Page Assets > Widgets, and click the button to submit a new widget.
  9. On the displayed page, click Select Source File(.zip), select the widget ZIP package, configure the basic information and click Submit.

    After submission, the widget can be used on advanced pages.

    Figure 1 Submitting a new widget
    Table 3 Parameters for uploading a widget

    Parameter

    Description

    Name

    Widget name. The system automatically sets this parameter based on the widget package name.

    Upload Icon

    Widget display icon.

    Upload Source File(.zip)

    Widget source file package. You can click Select Source File(.zip) to select a source file and upload it.

    Widget ID

    Asset ID. The prefix is not editable and is automatically populated when the widget package is uploaded.

    Classification

    Category to which a widget belongs. After a widget is uploaded, the widget is displayed in the category on the page.

    Industry

    Industry in which the widget package is used.

    Generally, retain the default value General. Widgets can be displayed by industry in the widget list.

    Scenario

    Application scenario of the widget package. The options are as follows:

    • Advance page: advance page development
    • Standard page: standard page development
    • DMAX: Huawei Cloud Astro Canvas development
    • DMAX mobile: Huawei Cloud Astro Canvas development

    You can select multiple scenarios at the same time. Only the selected scenarios can use this widget.

    Release Notes

    Description of the widget. Configure the widget description in different languages.

    The description is displayed on the overview tab page of the widget details page.

Parent Topic: Managing Page Resources in Applications