Help Center/ Huawei Cloud Astro Zero/ User Guide (Low-Code)/ Frontend Development/ Standard Pages/ Setting Properties of Standard Page Widgets/ Setting Properties of the Breadcrumb Widget
Updated on 2025-08-15 GMT+08:00
View PDF
Share

Setting Properties of the Breadcrumb Widget

This widget displays the hierarchical structure of a website and notifies users of the current location.

Figure 1 Breadcrumb

Data Binding

Binds a property of a breadcrumb widget, such as hiding, style, and jump, to a specific model field. Once bound, these properties automatically update in sync with the model field's value, functioning in a manner akin to Vue's v-bind directive.

  1. In the Data Binding area, click + next to Property Binding.

    Figure 2 Clicking the add icon

  2. Select a property of the container from the Properties drop-down list.
  3. Under Field, click . The model selection page is displayed.

    Figure 3 Clicking the setting icon

  4. Click New.
  5. Set Model Name and Source, and click Next.

    Figure 4 Defining a model

    There are four types of models: Custom, Objects, Services, and Events. Each type of model contains parameter definitions and method definitions. Methods are APIs defined on models. In general, these APIs are called in event scripts (such as page loading events and mouse click events) associated with frontend widgets to implement certain logic.

    Table 1 Model types

    Type

    Model Description

    Model Parameter Description

    Model Method Description

    API Calling Method

    Custom

    Models defined by developers.

    Defined by developers. Subnodes can be added.

    Developer-defined method.

    $model.ref("modelName").actionName();

    Objects

    Object models are generated based on the mapping of the object table. For details about the object model, see Objects.

    The system automatically obtains all fields of an object. Developers can select some fields as parameters.

    The system automatically generates four methods: query, save, delete, and count.
    • Query: $model.ref("modelName").query(param);
    • Save: $model.ref("modelName").save();
    • Delete: $model.ref("modelName").delete();
    • Statistics: $model.ref("modelName").count();

    Services

    Service models are generated by mapping backend services. Currently, service models can only be mapped to flows or scripts. For details about the service model, see Flows and Scripts.

    The parameters are mapped to the inputParam and outputParam sections based on the input and output parameters of backend services.

    The run method is automatically generated to execute a flow or a script associated with the model.

    $model.ref("modelName").run();

    Events

    For event models, data binding is created based on fields of a backend event. Model data can be updated based on the web socket.

    Parameters are generated by mapping fields of backend events.

    Directly use.

    Directly use.

    In addition to the methods defined in models, the platform provides the following standard APIs for all models:

    • Obtaining model data: $model.ref("modelName").getData();
    • Setting model data: $model.ref("modelName").setData();
    • Setting model field values: $model.ref("modelName").setValue(key,value);

  6. On the Settings page of the new model, perform the following operations:

    • If Source is set to Custom in the previous step, you need to add customized parameters and types of subnodes.
    • If Source is set to Objects in the previous step, you need to configure the object and fields associated with the model.
    • If Source is set to Services in the previous step, you need to configure the backend service associated with the model. The backend service can be a script, flow, or public API.
    • If Source is set to Events in the previous step, you need to configure the event and event fields associated with the model.

  7. Click Next.

    Generally, you do not need to add a method. If you need to add or modify a method, refer to the method generated by the object and service by default.

  8. Click OK.

Basic Properties

After basic attributes are bound through data, the values of the bound data are used during running.
  • Configuration Menu: Click Settings to configure menus.
    • icon: Configure the icon of the menu. You can use the icon preset in the system or in the customized library.
    • text content: Configure the display name of the menu.
    • URL type: URL type of the page to which a menu is redirected. The options are Custom, Standard Page, and Advance Page.
    • address: When URL type is set to Custom, you need to configure the URL of the page to be redirected to. When URL type is set to Standard Page or Advance Page, you need to select a specific redirection page created in the system.
    • link target: display mode of the page after redirection.
      • New window: The page is displayed in a new window.
      • Current frame: The page is displayed in the current frame.
      • Parent frame: The page is displayed in the parent frame.
      • Current window: The page is displayed in the current window.
  • Separator: separator between menu names.
  • Jump: Click the menu label of the breadcrumb widget to enable or disable automatic redirection. This function is enabled by default. If this function is not enabled, you can define the redirection implementation method on the Events tab page, that is, orchestrate events.

Common

  • Name: name of the current widget.
  • Hid: indicates whether to hide the widget. In this mode, the widget is statically hidden. You can also set the attribute value of the widget to a model field of the Boolean type. In this way, you can control the value of the model field in the customized JavaScript code to determine whether to hide the widget. This dynamic setting has the highest priority.

Style

  • Layout: Set the width and height of the widget.
  • Font: Set the font size, style, and color.
  • Background: Set the background color and transparency.
  • Border: Set the border color and width. The unit can be px, em, or %.
  • Shadow: Set the shadow color and style. The units px, em, and % are supported.
  • Advance
    • Style Code: Style code of the widget. After the widget style is set, the style code is automatically displayed in this area. You can also customize the style code to configure the widget in detail. The customized code can be entered in multiple lines and the style parameters are highlighted.
    • Style Class: name of the CSS style class of the widget, which can be referenced in the CSS code.
Parent Topic: Setting Properties of Standard Page Widgets