steps

Chart style

The step bar is an advanced widget that displays a step-based flow. You can customize its global, icon, title, and description styles.

Style Panel

• Search Configuration: Click the Search configuration items icon in 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 icon to flip the widget style.

    • Click the icon 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.

• Global level

  Metric	description
  Default Current Step	Enter the title of the default step. If the title field of the data panel contains data, the content of the data panel prevails.
  Arrangement	The arrangement of step bars. Valid values: Horizontal and Vertical.
  Alignment Mode	The alignment mode of the step bar. Valid values: Top Alignment, Center Alignment, and Lower Alignment.
  Size Controlled	Turn on the switch to set a custom overall group width for the step bar in pixels. Turn off the switch to disable size control.
  Navigation Mode	The navigation mode of the step bar. You can select Normal Mode or Navigation Mode. This configuration is available only when Arrange Mode is set to Horizontal.
  Connection Line Style	The connection line style between steps, including left and right spacing, line thickness, and background colors for the normal and selected states. Available only when the Navigation Mode is set to Normal Mode.
  Navigation Bar Style	The navigation bar style between steps, including top spacing, thickness, and color. Available only when you select Navigation Mode.

• No.

  Metric	description
  Dimensions	The width and height of the step bar icon, in pixels.
  Normal Style	The icon style in the normal state. Background Color: the background color of the icon. Border Style: the border style of the step bar icon, including line type, corner radius, border width, and color. Text Style: the text style in the step bar icon, including font style, weight, size, and color.
  Selected Style	The icon style in the selected state. Background Color: the background color of the step bar icon. Border Style: the border style when the icon is selected, including line type, corner radius, border width, and color. Text Style: the text style of the icon in the selected state, including font style, weight, size, and color.

• title

  Metric	description
  Spacing	The left and bottom spacing of the step bar title, in pixels.
  Normal Style	The title text style in the normal state, including font style, weight, size, and color.
  Selected Style	The title text style in the selected state, including font style, weight, size, and color.

• Description

  Metric	description
  Left Spacing	The left spacing of the step bar description, in pixels.
  Normal Style	The description text style in the normal state, including font style, weight, size, and color.
  Selected Style	The description text style in the selected state, including font style, weight, size, and color.

Data Sources panel

Advanced Panel

Turn on the switch to enable the global variable association feature. When the current value changes, a data request is triggered and temporary variables are generated for use in other components. By default, the title and description values from the Data Source panel are used. For more information, see Component interaction configuration.

Blueprint Interaction

1. Click the icon 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.

   • Event

     Event	Description
     When the data interface request is completed	Triggered after a data interface request completes and the response is processed by a filter. The event carries the processed JSON data. For 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 current value changes	Triggered when the current value changes, returning the data item that corresponds to the value. For more information, see the data example. { "title": "Step 1", "description": "The first content" }

   • Action

     Action	Description
     Import data	Imports pre-processed data in the widget's drawing format for redrawing, without requesting server data again. For more information, see the data example. [ { "title": "Step 1", "description": "The first content" } ]
     Request Data Interface	Requests server data again, using data from an upstream data processing node or layer node as parameters. For example, if the API data source is https://api.test and the data passed to the request data interface is { id: '1'}, the final request interface is https://api.test?id=1.
     Obtain the current value	Obtains the current input box value. No parameters are required.
     Set Current Step	Sets the current step by passing in a data item. For more information, see the data example. { "title": "Step 2" // Title }
     Clear a component to its default value	Resets the component data to its default value. No parameters are required.
     Move	Moves 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 /Hide	Toggles whether the widget is displayed or hidden. No parameters are required.
     Display	Displays the widget. For more information, see the 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	Hides the widget. For more information, see the 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	Dynamically updates the style configuration of a widget. In the Style panel, click Copy Configuration to Clipboard to obtain the widget's configuration data, then modify the style field for the data processing node in Blueprint Editor.