Procedure of Customizing Standard Page Widgets

{
  "name": "imgButton",
  "private": true,
  "version": "1.0.2",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "node ./build/build.mjs",
    "format": "prettier --write src/",
    "preview": "vite preview"
  },
  "dependencies": {
    "element-plus": "^2.4.2",
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.6.2",
    "jszip": "^3.10.1",
    "kolorist": "^1.8.0",
    "sass": "^1.69.5",
    "unplugin-element-plus": "^0.8.0",
    "unplugin-vue-components": "^0.25.1",
    "vite": "^4.4.5",
    "vue-style-loader": "^4.1.3"
  }
}

{
  "name": "imgButton",
  "version": "1.0.10",
  "type": "uiPackage",
  "package": {
    "components": [
      "components/imgButton/imgButton.json"
    ]
  },
  "images": {
    "default": "./static/package-default.png",
    "previews": [
      "./static/package-preview1.png",
      "./static/package-preview2.png"
    ]
  },
  "publisher": "l84182839",
  "license": "MIT",
  "keywords": [
    "UI Component"
  ],
  "categories": [
    "ui:components"
  ],
  "bugs:url": "",
  "repository:url": "",
  "dependencies": []
}

In src\components\imgButton\static, replace default.png (normal status) and hover.png (mouse-over highlight).

• Modify the basic properties of the widget definition file.

  In the imgButton.json file, set name, title, and description to imgButton, and restrict properties to height, width, and text. The code is as follows:

  {
    "name": "imgButton",
    "title": "imgButton",
    "description": "imgButton",
    "category": "add-on",
    "icon": {
      "default": "./static/default.png",
      "hover": "./static/hover.png"
    },
    "definition": {
       "props": {
        "type": "object",
        "properties": {
          "height": {
            "category": "common", //Tag to which the property belongs, including common (common), general (basic), and style (style)
            "type": "integer", //Value type of the property, which can be integer (number text box), date (date selection box), string (text box), select (drop-down list), or switch (switch)
            "title": "Image height",//Property title
            "description": "Set the image height.", //Property description, which is displayed when the pointer is hovered over the title
            "default":16 //Default value of the property
          },
          "width": {
            "category": "common",
            "type": "integer",
            "title": "Image width",
            "description": "Set the image width",
            "default":16
          },
          "text": {
            "category": "common",
            "type": "string",
            "title": "framework.label.text",
            "description": "Button text",
            "default":"Button"
          }
        }
      },
    "main": "./index.js",
    "mainDesignTime": "./design-time/index.js",
    "dnd": {
      "cname": "workCards",
      "dname": "workCards-design",
      "ctype": "Control",
      "displayName": "workCards",
      "selectable": true,
      "targetable": true,
      "draggable": true,
      "deletable": true,
      "wholeRow": true
    }
  }

  After saving the changes, the standard page shows the widget with only height, width, and text properties.

  Figure 7 Widget properties
  

• Modify the event in the widget definition file and change the event name to click.

  "on": {
        "type": "object",
        "properties": {
          "click": { // Event name triggered in the code, which is triggered using emit in the widget
            "title": "Click", //Event name
            "description": "Action executed upon clicking", //Event description
            "type": "object"
          }
        }
      },

• Modify the drag behavior in the widget definition file. Set cname, displayName, and dname to imgButton and imgButtonDesign.

  "dnd": {
      "cname": "imgButton",
      "dname": "imgButtonDesign",
      "ctype": "Control",
      "displayName": "imgButton",
      "selectable": true,
      "targetable": true,
      "draggable": true,
      "deletable": true,
      "wholeRow": true
    }

  cname indicates the widget displayed in the application engine, dname indicates the widget displayed in the application development tool, and displayName indicates the text displayed for the widget in the page builder.

After these modifications, the final imgButton.json is as follows:

{
  "name": "imgButton",
  "title": "imgButton",
  "description": "imgButton",
  "category": "add-on",
  "icon": {
    "default": "./static/default.png",
    "hover": "./static/hover.png"
  },
  "definition": {
     "props": {
      "type": "object",
      "properties": {
        "height": {
          "category": "common",
          "type": "integer",
          "title": "Image height",
          "description": "Set the image height",
          "default":16
        },
        "width": {
          "category": "common",
          "type": "integer",
          "title": "Image width",
          "description": "Set the image width",
          "default":16
        },
        "text": {
          "category": "common",
          "type": "string",
          "title": "framework.label.text",
          "description": "Button text",
          "default":"Button"
        }
      }
    },
    "on": {
      "type": "object",
      "properties": {
        "click": {
          "title": "Click",
          "description": "Action executed upon click",
          "type": "object"
        }
      }
    },
    "methods": {
    }
  },
  "main": "./index.js",
  "mainDesignTime": "./design-time/index.js",
  "dnd": {
    "cname": "imgButton",
    "dname": "imgButton",
    "ctype": "Control",
    "displayName": "imgButton",
    "selectable": true,
    "targetable": true,
    "draggable": true,
    "deletable": true,
    "wholeRow": true
  }
}

• Modify the layout structure of the view file.

  Add an img and a span to the layout (div tag) and configure the parameters according to the example. The code example is as follows:

  <img
    src="./static/hover.png"
    :height="comHeight"
    :width="comWidth"
    :class="classes + '-img'">
  <span :class="classes+ '-title'">
    {{ currentText }}
  </span>

  img indicates the image in the imgButton button, and span indicates the text in the imgButton button.

• Modify the property definition of the view file imgButton.vue and change cssprefix to imgButton and add the height, width, and text properties.

  <script>
  const cssprefix = "imgButton";
  
  import { defineComponent } from "vue";
  
  export default defineComponent({
    name: "imgButton",
    data() {
      return {
        currentText: this.text,
      };
    },
    props: {
      /*Image height */
      height: {
        type: [String, Number],
        default: "",
      },
      /*Image width */
      width: {
        type: [String, Number],
        default: "",
      },
      /*Tag text content */
      text: {
        type: String,
        default: "Button1",
      },
    },

• Modify computed, watch, and methods in the imgButton.vue view file.

    computed: {
      classes() {
        return cssprefix;
      },
      comHeight() {
        return this.height || "16";
      },
      comWidth() {
        return this.width || "16";
      },
    },
    watch: {
      text(newVal) {
        this.currentText = newVal;
      },
    },
    methods: {
      onclick(e) {
        this.$emit("click", e);
      },
      setButtonText(newText) {
        console.log("setButtonText params:", newText);
        if (newText) {
          this.currentText = newText;
        }
      },
    },

  Table 5 computed, watch, and methods parameter description

  Parameter	Description
  cssprefix	Constructs the style class name to improve flexibility.
  currentText	Displays the button text.
  comHeight	Obtains the image height.
  comWidth	Obtains the image width.
  classes	Returns the style class name. You can also replace the variable with a character string to increase flexibility.
  onclick	Triggers the service logic of the click event when the image button is clicked.
  setButtonText	Changes the text in the button. This method is exposed externally. All methods defined in method can be directly called in events. Figure 8 shows the calling mode.

  Figure 8 Calling the method
  
• Modify the style in the view file imgButton.vue to define the style class of the image button. The style class includes the image button frame, image, and text.

  .imgButton {
    display: inline-block;
    background-color: #8cdcdb;
    border: blue1pxsolid;
    cursor: pointer;
  }
  .imgButton-img {
    margin-top: 5px;
    margin-left: 5px;
  }
  .imgButton-title {
    padding-bottom: 10px;
    padding-right: 10px;
    font-size: 16px;
    cursor: pointer;
  }

import imgButton from './imgButton.vue'

export default imgButton

1. On your local PC, press Windows logo key+R and enter cmd to open the command prompt.
2. Go to the folder where imgButton is located and run the following command to generate the custom widget package dist\imgButton-***.zip:
   If a message is displayed indicating that the Yarn is not installed when you run the yarn commands, run the bnpm install -g yarnb command to install it.

   yarn install
   yarn run build

   Figure 9 Generating a custom widget package
   

   You have completed customizing and packaging the widget. You can compare your generated widget package with the provided imgButton.zip sample.

After the upload is successful, the custom widgets page is displayed. You can view imgButton in the widget list.

Figure 13 Viewing the uploaded custom widget

1. On the Huawei Cloud Astro Zero console, click Access Homepage to go to the application development page.
2. In the navigation pane, choose Applications. On the displayed page, click Low-Code or .
3. In the displayed dialog box, choose Standard Applications and click Confirm.
4. Enter a label and name of the application, and click the confirm button. The application designer is displayed.
   Figure 14 Creating a blank application
   

   Table 6 Parameters for creating a blank application

   Parameter	Description	Example
   Label	The label for the new application; Max. 80 characters. A label uniquely identifies an application in the system and cannot be modified after creation.	My first application
   Name	Name of the new application. After you enter the label value and click the text box of this parameter, the system automatically generates an application name and adds Namespace__ before the name. Naming rules: Max. characters: 31, including the prefix namespace. To prevent duplicate data names among different tenants, each tenant must define a unique namespace when first creating an application. A tenant can only create one namespace, and once it is created, it cannot be modified. Start with a letter and use only letters, digits, and underscores (_). Do not end with an underscore (_).	A

Click in the upper part of the standard page to save the settings. After the settings are saved, click . The preview page is displayed. On the preview page, click Hide. The input widget is hidden. Click Display. The input widget is displayed.

Figure 24 Preview effect

After the update, the custom widget list shows version 1.0.6. Go to the standard page where the custom widget is used. The widget content is updated.

Figure 29 Widget version: 1.0.6