Managing Custom Widgets for Advanced Pages

Prerequisites

You have downloaded the widgetVue3Template template and uploaded it to the custom widget library.

Updating a Custom Widget

1. Go to the Huawei Cloud Astro Zero console.
2. On the homepage, click Access Homepage. The application development page is displayed.
3. Click and choose Environments > Environment Configuration.
4. Choose Maintenance from the main menu.
5. In the navigation pane, choose Global Elements > Page Assets > Widgets.
6. On the displayed page, locate the target custom widget.
7. Click the target custom widget. The widget details page is displayed.
   Figure 1 Widget details
   

8. Update the widget.
   • Method 1: Updating a widget using the source package

     On the widget details page, click Update to upload the latest widget source code package.

     1. Compress the developed widget into a .zip package.
     2. On the widget details page, click Update.
     3. Select the widget package in 8.a and click Update.
     4. Return to the widget details page and view the newly uploaded version.
        Figure 2 New widget version
        
   • Method 2: Online editing and update
     1. Click Edit to access the widget editor.
     2. In the editor, click in the upper right corner of the page to obtain the lock.
        Figure 3 Obtaining the lock
        
     3. After the widget is locked, modify the widget file.

        The following shows how to edit a widget online. In this example, the value of name in the widgetVue3Template.js file is changed to Huawei Cloud Astro Zero Studio.

        Figure 4 Editing a widget online
        
     4. After the modification, click in the upper right corner of the page. The page for updating the widget is displayed.
     5. Click the update button to return to the widget details page.
     6. Click the preview button. The displayed text changes to Hello, I am Huawei Cloud Astro Zero Studio.
        Figure 5 Preview effect
        

Managing Custom Widget Versions

Go to Page Settings > Plugin to update the widget version for changes to take effect on advance pages.

1. Log in to the application designer by referring to Logging In to the Application Designer.
2. In the navigation pane, choose Page.
3. Choose More > Page Setting.
   Figure 6 Managing widget versions
   

4. On the Plugin tab page, click Check for Update.
5. In the widget list, click next to a widget to update the widget.

   After the widget is updated, its version automatically updates to the latest version in the widget list.

   Figure 7 Viewing the version of the updated custom widget