All Products
Search

This Product

    DataV:navigation-menu

    Document Center

    DataV:navigation-menu

    Last Updated:Dec 03, 2024

    This topic describes the meaning of each configuration items when you select All in the navigation menu bar.

    Note

    The navigation menu bar cannot be displayed on mobile devices. Follow the information on the DataV official website.

    Chart style

    The navigation menu bar is a type of advanced control widget. It allows you to customize the menu layout, submenu styles, option icons, background colors, and text styles, and submit user input to the backend for processing. image

    Style Panel image.png

    • Search Configuration: Click the Search configuration items icon imagein the upper-right corner of the Style panel. In the Search Configuration panel, enter the name of the configuration items that you want to search for and locate the configuration items. Fuzzy match is supported. For more information, see Search configuration items.

      • Size: the width and height of the widget. Unit: pixels.

      • Positioning: the x-axis and y-axis of the component. Unit: pixels. X-coordinate indicates the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate indicates the pixel distance between the upper-left corner of the widget and the upper border of the canvas.

      • Rotate: The widget is rotated around the center of the widget. Unit: degrees.

        • Directly enter the degrees in the Rotation Angle spin box or click the plus sign (+) or minus sign (-) to increase or decrease the value in the Rotation Angle spin box.

        • Click the imageicon to flip the widget style.

        • Click the imageicon to flip the widget style.

      • Opacity: Valid values: 0 to 1. If this parameter is set to 0, the widget is hidden. If this parameter is set to 1, the widget is completely displayed. Default value: 1.

    • Menu

      Menu Layout: the menu layout style of the navigation bar. You can select Inline, Vertical, or Horizontal.

      Metric

      description

      Default Display

      Indicates the number of navigation menu bar options displayed by default. Use the value of the id field in the data. The configuration is displayed only when the Menu Layout parameter is set to Embedded.

      Option Height

      The height of each option in the navigation bar. Unit: pixels. The configurations are available only when Menu Layout is set to Embedded or Vertical.

      Submenu Width

      The width of the navigation bar submenu. Unit: pixels. Configurations are available only when the Menu Layout parameter is set to Vertical or Horizontal.

      Submenu Height

      The height of the navigation bar submenu. Unit: pixels. Configurations are available only when the Menu Layout parameter is set to Vertical or Horizontal.

      Option Right Spacing

      The spacing value from the right side of the option. Unit: px. The configuration is displayed only when Menu Layout is set to Embedded.

      Option Margins

      The margin of the option, including the margin from the left side and the margin from the right side, in px. Configurations are available only when the Menu Layout parameter is set to Vertical or Horizontal.

      Options icon

      Select options for the navigation bar to set custom icons, including the link of the icon, the size of the icon, and the distance between the icon and the left and right sides. The unit is px.

      Text Style

      Set the font style of the option text, the weight of the text, the font size of the text, and the color of the text, including the default color of the text, the color of the text over the option, and the color of the text when the option is selected.

      Background Color

      Set the background color of the option, including the default background color of the option, the background color of the option over the mouse, and the background color of the selected option.

      Right Arrow

      Set the right arrow's margin from the right, the size of the dimension, and the color of the arrow. The configurations are available only when the Menu Layout parameter is set to Embedded or Vertical.

    Data Sources panel image.png

    Column

    Description

    id

    Unique identifier of the navigation bar option.

    value

    The actual displayed value of the navigation bar option.

    unicode

    Icons for the navigation bar options.

    children

    Subset nested data.

    Configure data items

    Description

    Data sources

    You can use the code editor or visual editor to view the data fields contained in the widget. You can also modify the data type to flexibly configure the component data.

    Data Mapping

    If you need to customize chart field configurations, you can set different field mapping content in the Data Mapping module and field mapping these content to the corresponding fields of the widget. This allows you to match data without modifying the fields in the data source. You can also click the imageicon to configure the field style.

    Configure a filter

    Turn on Filter, select an existing data filter or create a data filter, and configure a data filter script to filter data. For more information, see Manage data filters.

    Data Response Result

    The Data Response Result section displays widget data in real time. If the data source of the widget changes, this section displays the latest data. If the system response is delayed, you can click the imageicon on the right to view the data response result. You can also click the imageicon on the right to obtain the latest data of the widget. You can also click View Example to view an example of the response result of the current component.

    Forbid Loading

    If you select the check box, you will not see the loaded content during component initialization when you update the component and preview the data kanban. If you select the check box, the opposite is true. By default, the status is deselected.

    Controlled Mode

    If you select the check box, the component does not request data in the initialized state, and only requests data by using global variables or the method configured in Blueprint Editor. If you clear the check box, you can use automatic update to request data. By default, the status is deselected.

    Auto Data Request

    Select the check box to manually enter the time frequency of polling to set dynamic polling. If you clear the page, the page is not automatically updated. You need to manually refresh the page or use Blueprint Editor and global variable events to trigger a request to update data.

    Advanced Panel image

    Turn on the switch to enable the associated global variable feature. When you click the end node or click the node, a data request is triggered, a temporary variable is thrown, and the configuration is used in other components. By default, the item and itemPath values configured in the Data Source panel are displayed. For more information, see Component interaction configuration.

    Blueprint Interaction

    1. Click the imageicon in the upper-left corner to go to the Blueprint page.

    2. On the Layer Nodes tab, add the widget to the main canvas.

    3. View blueprint configuration parameters. image.png

      • Event

        Event

        Description

        When the data interface request is completed

        The event is triggered with the processed JSON data after a data interface request is responded and processed by a filter. For more information about specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel of the canvas editor.

        When the terminal node is clicked

        The event that is raised when the terminal node is clicked, and the data item corresponding to the value is also raised. For more information, see the data example. 

        {
  "item": {
    "id": "4",
    "value": "optionA-I"
  },
  "itemPath": [
    "4",
    "3",
    "2",
    "1"
  ],
  "key": {
    "id": "4",
    "value": "optionA-I"
  },
  "keyPath": [
    "4",
    "3",
    "2",
    "1"
  ]
}

        When a node is clicked

        The event that is raised when a node is clicked. The data item corresponding to the value is also raised. For more information, see the data example. 

        {
  "item": {
    "id": "12",
    "value": "optionB-A",
    "unicode": ""
  },
  "itemPath": [
    "11"
  ]
}

      • Action

        Action

        Description

        Import data

        After data of a widget is processed in accordance with its drawing format, the widget is imported for redrawing. You do not need to request server data again. For more information, see the data example. 

        [
  {
    "id": "15",
    "value": "optionC",
    "unicode": "",
    "children": [
      {
        "id": "16",
        "value": "optionC-A"
      }
    ]
  }
]

        Request Data Interface

        This action is performed to request the server data again. The data sent by an upstream data processing node or layer node is used as a parameter. For example, if the API data source is set to https://api.test in the navigation menu bar and the data passed to the request data interface is { id: '1'}, the final request interface is https://api.test?id=1.

        Set Selected Entries

        Specify the entries selected in the navigation menu bar. For more information, see the data example. 

        {
  "value": "optionA-C"
}

        Clear selected entries

        Clear the selected entry in the navigation menu bar. No parameters are required.

        Move

        Move a widget to a specified location. For more information, see the data example. 

            {      
      // The positioning type. to indicates absolute positioning, whereas by indicates relative positioning. The default value is to. 
        "positionType": "to",
      // The location, which is indicated by the x and y coordinates. 
      "attr": {
        "x": 0,
        "y": 0
      },
      // The animation type. 
      "animation": {
        "enable": false,
        // The duration in which animation is displayed. 
        "animationDuration": 1000,
        // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. 
        "animationEasing": "linear"
      }
    }

        Switch Display /Display

        Toggles whether the widget is displayed or hidden. No parameters are required.

        Display

        Display the widget. For more information, see Data example. 

        {
  "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. 
  "animationDuration": 1000,// The animation delay. Unit: ms. 
  "animationEasing": ""// animation curve
}

        Hide

        Hide the component. For more information, see Data example. 

        {
  "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. 
  "animationDuration": 1000,// The animation delay. Unit: ms. 
  "animationEasing": ""// animation curve
}

        Update component configurations

        Style configurations of widgets are dynamically updated. In the Style panel, click Copy Configuration to Clipboard to obtain the configuration data of the widget. After that, change the style field for the data processing node in Blueprint Editor.