Help Center/ Huawei Cloud Astro Canvas/ User Guide/ Custom Widget Development Specifications/ Code Structure Introduction/ Code Directory Structure
Updated on 2025-03-24 GMT+08:00
View PDF
Share

Code Directory Structure

If the preset widgets cannot meet your needs, you can upload custom widgets to Huawei Cloud Astro Canvas. Huawei Cloud Astro Canvas provides some widget templates (widget packages) for you to customize widgets.

Obtaining Widget Template Packages

  1. Log in to Huawei Cloud Astro Canvas by referring to Logging In to Huawei Cloud Astro Canvas.
  2. Choose Resource Management from the main menu.
  3. Choose Page Assets > Widget Templates.
  4. In the widget template list, click the required template.

    Figure 1 Preset widget templates

  5. On the template details page, click Download to download the template to the local PC.

Directory Structure of the Widget Package

Decompress the downloaded packages. For example, Figure 2 shows the directory structure of the decompressed EchartsWidgetTemplate widget package.

Figure 2 Directory structure of the widget package

{widget} is used to name the manuals whose names are not fixed.

  • i18n.json: Resource file for internationalization, which is used to configure multiple languages. For example, messages-en.json is the English version.
  • packageinfo.json: Metadata description file of a widget.
  • {widget}.css: A CSS file which defines the widget style.
  • {widget}.editor.js: A core rendering file of the widget. Widget attribute definition file, which is responsible for the GUI and logic to be rendered when the widget is in the editing state.
  • {widget}.ftl: Widget DOM structure file. The part that needs to be rendered on the server in advance can be written in this file, which is equivalent to an HTML file and is responsible for style display.
  • {widget}.js: JavaScript file of the core rendering logic. It is loaded and executed during widget editing and page publishing and running.