Steps

Chart style

The Steps widget is a control that you can use to display a process flow. You can customize the global, icon, title, and description styles of the Steps widget.

Configuration panel

• Search for Configurations: In the right-side panel of Canvas Editor, click the Settings tab, and click Search for Configurations in the upper-right corner. Enter the required configuration item in the search box, and click the search icon to quickly locate the configuration item. Fuzzy match is supported. For more information, see Search for Configurations.
• Size: indicates the size of a widget, including its pixel width and height. You can click the icon to proportionally adjust the width and height of a widget. After you click this icon again, you can adjust the width and height as needed.
• Position: the position of a widget, which is indicated by pixel X and Y coordinates. 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.
• Rotation Angle: the angle of a rotation that uses the center point of a widget as the rotation point. The unit is degrees (°). You can use one of the following methods to control the rotation angle of a widget:
  • 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.
  • Drag the black dot in the icon.
  • Click the icon to horizontally flip a widget.
  • Click the icon to vertically flip a widget.
• Opacity: the opacity of a widget. Valid values: 0 and 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

  Parameter	Description
  Default Current Step	Enter the title of the default step. If the title field on the Data panel contains data, the data from the Data panel is used.
  Arrangement	The arrangement of the steps. You can select Horizontal or Vertical.
  Alignment	The alignment of the steps. You can select Top, Center, or Bottom.
  Controlled Size	Turn on the switch to customize the width of the entire step group, in pixels. Turn off the switch to make the size uncontrolled.
  Navigation Mode	The navigation mode of the steps. You can select Normal mode or Navigation mode. This parameter is available only when Arrangement is set to Horizontal.
  Connector Style	The style of the connectors between steps. This includes the margin between the connector and the sides, the line thickness, the background color in the normal state, and the background color in the selected state. This parameter is available only when Navigation Mode is set to Normal mode.
  Navigation Bar Style	The style of the navigation bar between steps. This includes the margin from the top, the thickness, and the color of the navigation bar. This parameter is available only when Navigation mode is selected.

• Icon

  Parameter	Description
  Size	The size of the step icons, including the width and height in pixels.
  Normal Style	Set the icon style for steps in the normal state. Background Color: The background color of the step icons. Border Style: The border style of the step icons. This includes the line type, border radius, border width, and border color. Text Style: Set the text style within the step icons. This includes the font, weight, size, and color.
  Selected Style	Set the icon style for steps in the selected state. Background Color: The background color of the step icons when selected. Border Style: The border style of the step icons when selected. This includes the line type, border radius, border width, and border color. Text Style: Set the text style within the step icons when selected. This includes the font, weight, size, and color.

• Title

  Parameter	Description
  Margin	The margin between the step title and the left and bottom sides, in pixels.
  Normal Style	Set the title text style for steps in the normal state. This includes the font, weight, size, and color.
  Selected Style	Set the title text style for steps in the selected state. This includes the font, weight, size, and color.

• Description

  Parameter	Description
  Left Margin	The margin between the step description and the left side, in pixels.
  Normal Style	Set the description text style for steps in the normal state. This includes the font, weight, size, and color.
  Selected Style	Set the description text style for steps in the selected state. This includes the font, weight, size, and color.

Data panel

Field descriptions

Table 1. Parameters

Parameter	Description
Controlled Mode	If you turn on the switch, data is not requested when a widget is initialized. Data requests are triggered only based on callback IDs or the method configured in Blueprint Editor. If you turn off the switch, data requests are automatically triggered. By default, the switch is turned off.
Auto Data Request	After you select the Auto Data Request check box, you can enable dynamic polling, and manually specify the polling interval. If you do not select this check box, data is not automatically requested. You must manually refresh the page to request data or use Blueprint Editor or callback ID events to trigger data requests.
Data Source	In the right-side panel of Canvas Editor, click the Data tab. Click Set next to Static Data. In the Configure Datasource panel, select a data source from the Data Source Type drop-down list. Enter code for data query in the code editor, click Preview Data Response to preview the response of the data source, and then view the response. For more information, see Configure asset data.
Data Filter	If you select the Data Filter check box, you can convert the data structure, filter data, and perform simple calculations. If you click the plus sign (+) next to Add Filter, you can configure the script for the data filter in the editor that appears. For more information, see Use the data filter.
Data Response Result	The response to a data request. If the data source changes, you can click the icon next to Data Response Result to view the data response in real time.

Interaction panel

To enable the interaction feature for the Steps widget, select Enable next to When Current Value Changes. This feature allows the widget to trigger a data request and pass a callback value to other widgets when its current value changes. By default, the `title` and `description` values from the Data panel are passed. For more information, see Configure a widget callback ID.

Blueprint Editor interaction configuration

1. In Canvas Editor, right-click a widget in the Layer panel and select Add to Blueprint Editor.
2. Click the icon in the upper-left corner of the page.

3. On the Blueprint Editor configuration page, click the Steps widget in the Imported Nodes bar. The configuration parameters for the Steps widget are displayed on the canvas, as shown in the following figure.

   • Events

     Event	Description
     When a data API request is successful	This event is triggered after a data API request is successful and the response is processed by a filter. The processed data is passed as a JSON object. For a data example, see the Data Response section on the Data tab of the widget's configuration panel in the canvas editor.
     When a data API request fails	This event is triggered after a data API request fails and the response is processed by a filter. A request can fail because of network issues or API errors. The processed data is passed as a JSON object. For a data example, see the Data Response section on the Data tab of the widget's configuration panel in the canvas editor.
     When the current value changes	This event is triggered when the current value changes. The data item that corresponds to the new value is passed.

   • Actions

     Action	Description
     Request data API	Re-requests server-side data. Data from input data processing nodes or layer nodes is passed as a parameter. For example, if a step bar's API data source is https://api.test and the data passed to the Request data API action is { id: '1'}, the final API request is https://api.test?id=1.
     Import data API	Processes data in the widget's rendering format, then imports the data to re-render the widget. This action does not re-request server-side data. For a data example, see the Data Response area on the Data tab of the widget's configuration panel in the canvas editor.
     Get current value	Gets the current value of the input box.
     Set current step	Sets the current step and passes an object that contains the following field. return{"title": "Second" // Title}
     Clear widget to default value	Clears the widget data to its default value.
     Update widget configuration	Dynamically updates the widget's style configuration. In the widget's Configuration panel, click Copy Configuration to Clipboard to get the configuration data. Then, in the data processing node on the blueprint editor's configuration page, change the field values for the styles as needed.
     Show	Shows the widget. No parameters are required. return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
     Hide	Hides the widget. No parameters are required. return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
     Toggle visibility	Toggles the widget between shown and hidden. See the following data example. return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } };
     Move	Moves the widget to a specified position. See the following data example. return { // Move type. 'to' specifies absolute positioning, 'by' specifies relative positioning. The default is 'to'. "positionType": "to", // Target position, specified by x and y coordinates. "attr": { "x": 0, "y": 0 }, // Animation settings. "animation": { "enable": false, // Animation duration. "animationDuration": 1000, // Animation curve. Valid values are 'linear', 'easeInOutQuad', and 'easeInOutExpo'. "animationEasing": "linear" } };