Help Center/ Huawei Cloud Astro Canvas/ User Guide/ Interaction Configuration/ Interactions Between Pages
Updated on 2025-03-24 GMT+08:00
View PDF
Share

Interactions Between Pages

Scenario

Interactions between pages are the switching between different pages. You can jump to any page in the same project or an external page. When jumping to the internal page of a project, you can set related parameters.

Jumping Between Different Pages of the Same Project

When there are many project scenarios, one screen cannot cover all content or extra query is required. To ensure performance, parameters are transferred to another page for query and then displayed on the current page. In this case, you need to switch between different pages in the same project.

For example, create three pages (page 1, page 2, and page 3), drag the rose pie chart and basic pie chart to page 1 (default home page), drag the multi-region line chart to page 2 and publish it, drag a basic bar chart to page 3 and publish it.

  1. Create a large screen project, for example, interaction between pages. For details, see Creating a Large Screen and PC Project.
  2. Create a blank page, for example, page 1, and drag the rose pie chart and basic pie chart to the page. For details, see Creating a Page Using an Empty Canvas.

    Figure 1 Page 1

  3. Click to save the page, and click to publish the page.
  4. Repeat the preceding operations to create pages 2 and 3, drag the multi-region line chart and basic bar chart, and publish them.

    Figure 2 Page 2
    Figure 3 Page 3

  5. On page 1, select the rose pie chart and click above the widget to set the interaction between the rose pie chart and page 2.

    Figure 4 Interaction with page 2
    • Page type: Select the type of the page to be redirected to. You can select an internal page or an external page of the project.
    • Internal page: Select the page to be redirected to. This parameter is displayed only when the page type is set to the internal page.
    • External page address: Select the address of the external page to be redirected to. You can directly enter the address or set it to a global variable. This parameter is displayed only when the page type is set to the external page.
    • Page opening mode: Set how the redirected page opens (e.g., new window, current window, or pop-up window). If this parameter is set to pop-up window, you can specify the height and width of the pop-up window. In this example, the pop-up window is set, and the height and width of the pop-up window are set to 50%.
    • Page parameters: You can set page parameters as fixed or variable. If set as variable, you can set the parameter value to a global variable. And the address of the redirected page will include the parameter, in the format of redirected page URL?parameter name=parameter value.
      Figure 5 Setting the page parameters to fixed parameters
      Figure 6 Setting the page parameters to variable parameters
      Figure 7 Configured parameter in the redirected page URL

  6. On page 1, select the basic pie chart, click above the widget, and set the interaction between the basic pie chart and page 3.

    Figure 8 Interaction with page 3

  7. Click to save the page, and click to preview the effect.

    Figure 9 Page 2 displayed after clicking the rose pie chart
    Figure 10 Page 3 displayed after clicking the basic pie chart

Redirecting to an External Page

External page redirection is similar to internal page redirection. The only difference is that the options of interaction actions are different. In addition, you need to enter the connection address of the external page.

  1. Create a large screen project, for example, interaction between pages. For details, see Creating a Large Screen and PC Project.
  2. Create a blank page and drag the rose pie chart to the page. For details, see Creating a Page Using an Empty Canvas.
  3. Select the rose pie chart and click above the widget. The interaction setting page is displayed.
  4. Redirection between the current page and an external page.

    Figure 11 Setting the page for external interactions
    • Due to the same-origin policy, pop-up windows are not supported for external pages.
    • When entering the external page address, you need to enter the http:// or https:// request header.

  5. Click to save the page, and click to preview the effect.