Custom Actions

Scenario

When configuring widget interaction, you can compile code to customize interaction actions to meet service requirements.

Figure 1 Customizing an action

Parameters for Customizing an Action

In custom actions, the following parameters can be directly used:

• eventParam: parameter transferred by the widget.
  The following uses the date selector widget as an example to describe how to obtain eventParam.

  1. On the page, drag a date selector widget to the canvas.
     Figure 2 Dragging the date selector to the canvas
     
  2. Select the date selector and click . The interaction setting page is displayed.
  3. Set the custom action, as shown in the following figure.
     When customizing a widget action, add a keyword to associate the widget information.

     Figure 3 Setting a custom action
     

     /*
      * You can obtain the widget object as shown in the example and compile the JavaScript code.
      * In the example, widget 16 is hidden after the current event is triggered.
     * Help document: https://support.huaweicloud.com/intl/en-us/usermanualcanvas-astrozero/astrozero_05_7025.html
      * Parameters that can be directly used
      * eventParam: parameter transferred by the widget.
      * data: interaction action information object.
      * $pageStore: object for storing global variables on the page.
      * You can use $pageStore.setItems([{key:'id',value:'123'}]) to update global variables in batches.
      */
     // {widget16}.hideWidget()
     console.log(eventParam);
     console.log(data);
     console.log($pageStore);

  4. Click at the top to save the page.
  5. Click . On the preview page, set the start time and end time of the date selector.
     Figure 4 Preview
     
  6. After the setting is complete, press F12. On the Console tab page, view eventParam.
     Figure 5 eventParam
     
• data: stores the most detailed action information object.
  Figure 6 Viewing data
  
• $pageStore: object for storing global variables on the page.

  If a field variable is configured and the default value is 1, you can obtain it by printing $pageStore (as shown in Figure 3) in a custom action.

  Figure 7 Defining global variable field
  
  Figure 8 Viewing $pageStore
  
• $pageStore.setItems([{key:'id',value:'123'}]): updates global variables in batches. Key indicates the global variable name, and value indicates the global variable value.
  Figure 9 Global variable
  

Obtaining and Operating Widget

1. Obtain the widget.
   1. On the Layers tab page, select the date selector widget.
      Figure 10 Choosing the date selector widget
      
   2. Hover the pointer over the date selector widget. The widget name is the widget ID.
      Figure 11 Obtaining the widget ID
      

2. Perform operations on a widget.

   After obtaining the widget ID, you can use the platform's API to display or hide the widget. For details about the APIs, see Built-in APIs.

   // Display widget {widget2}.showWidget();
   // Hide widget {widget2}.hideWidget();