Help Center/ Huawei Cloud Astro Canvas/ User Guide/ Custom Widget Development Specifications/ Code Structure Introduction/ Code Directory Structure
Updated on 2025-11-28 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 is the core file responsible for rendering the GUI and logic when the widget is in the editing status.
  • {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.