Managing Libraries

Viewing Library 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 > Libraries to view all libraries.
   • Preset libraries: can be directly loaded and used. On the Global tab page, you can view all preset libraries.
   • Custom libraries: You can upload a custom library package and load it to pages. On the Tenant tab page, you can view all custom libraries.

5. Click a library. The library details page is displayed.

Downloading a Library

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 on the left, choose Global Elements > Page Assets > Libraries.
5. In the library list, click a library. The library details page is displayed.
6. On the library details page, click Download to download the library to the local host.

   You can also view the historical versions of the library on the Change Log tab page (the versions are sorted in sequence, and the latest version number is on the top). Select a library of a different version and download it.

Disabling a Library

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 on the left, choose Global Elements > Page Assets > Libraries.
5. In the library list, click a library. The library details page is displayed.
6. Click in the upper right corner of the page to lock the library.
7. Click Deactivate. In the dialog box that is displayed, click the confirm button.

   The Deactivate button is displayed only when the library is not protected. The preset libraries cannot be edited or disabled, but can only be downloaded.

   After a library is disabled, you can choose Global Elements > Page Assets > Deactivated Assets to view the disabled library. After a library is disabled, you can click Delete on the library details page and enter the name of the library to be deleted to delete the library. To enable the library, click Activate. In the dialog box that is displayed, click OK.

Customizing and Uploading a New Library

This section uses Vue (a preset library) and MintUI (a custom library) as an example to describe how to upload a custom library and use it in a widget.

1. Compress the files of the custom library into a ZIP package.

   Download the MintUI code files from the MintUI website, add a metadata file packageinfo.json, and list in the file the names of the JavaScript and CSS files contained in the library, and compress the files into a ZIP package. See Figure 1. You can also click MintUI.zip to download the MintUI.zip package.

   Figure 1 File structure of the MintUI library
   
   packageinfo.json contains the files to be imported. For example, if the js/index.js and css/index.css files need to be imported to the MintUI library, add the description of the two files to packageinfo.json. js and css define the file type, and name defines the file path and name.

   {
       "js": [
           {
               "name": "js/index"
           }
       ],
       "css": [
           {
               "name": "css/index"
           }
       ]
   }

2. Upload the custom library.
   1. In the instance list, click the access console button next to the low-code application instance to go to the application development page.
   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 > Libraries. On the displayed page, click Submit New Library.
   5. Enter basic library information, upload the ZIP package in 1, and click Submit.
      Figure 2 Submitting a new library
      

      Table 1 Parameters for uploading a library

      Parameter	Description
      Name	Name of the newly uploaded library.
      Upload Icon	Display icon of a library.
      Upload Source File(.zip)	Library file package. Upload the MintUI.zip package in step 1.
      Library ID	Only letters and digits are allowed. Start with a letter.
      Classification	Category to which the library belongs. Select a value from the drop-down list.
      Library Type	Type of the uploaded library. Currently, the uploaded library is a theme library.
      Release Notes	Description of the library. You can describe the function of the library.

3. Reference the library in a widget.
   1. Add the requires node to the packageinfo.json file in the widget package widget_demo_mintui.zip obtained in 1 and specify the library ID and version of the dependency library.

      name indicates the library ID, and version indicates the library version.

      Add the requires node. Obtain the library file name and version from the library details page.

      "requires": [{
            "name": "global_Vue",
            "version": "100.7"
          },
          {
            "name": "t0000000000qwwjxspaox_MintUI",
            "version": "1.0.0"
          }
        ]

      When you specify library files in requires, specify them in sequence based on the dependency between the library files. For example, global_VueI18n depends on global_Vue and needs to be written after global_Vue.

   2. Write a DOM form in the widget_demo_mintui.ftl file of the widget package widget_demo_mintui.zip obtained in step 1.

      <div id="widget_demo_mintui">
        <mt-field label="username" placeholder="Input username" v-model="username"></mt-field>
        <mt-field label="email" placeholder="Input email" type="email" v-model="email"></mt-field>
        <mt-field label="password" placeholder="Input password" type="password" v-modal="password"></mt-field>
        <mt-button type="primary" @click="submit">Register</mt-button>
      </div>

   3. Add a Vue instance to the render method in widget_demo_mintui.js of the widget package widget_demo_mintui.zip obtained in 1.

                  Vue.use(MINT);
                  var vm = new Vue({
                      el: $("#widget_demo_mintui", elem)[0],
                      data:{
                          username: "",
                          email: "",
                          password: ""
                      },
                      methods:{
                          submit: function(){
                              console.log(this.username + " registers");
                          }
                      }
                  })

   4. Compress the modified widget package.

4. Return to the Huawei Cloud Astro Zero environment configuration page, choose Maintenance > Global Elements > Page Assets > Widgets. On the displayed page, click Submit New Widget to upload the widget package in 3 to the widget library.
   Figure 3 Uploading a widget
   

   Table 2 Parameters for uploading a widget

   Parameter	Description
   Name	Widget name. The system automatically sets this parameter based on the widget package name.
   Upload Icon	Display icon of a widget. This parameter is not set in this example.
   Upload Source File(.zip)	Widget source file package, that is, widget_demo_mintui.zip in 3.
   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. In this example, set this parameter to Others.
   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	Scenario in which the widget package is used. The widget can be used in the development page of the selected scenarios.
   Release Notes	Widget description. You can describe the function of the widget.