Create Data Actions in Visualizations Embedded in External Containers

You can embed visualizations in external containers (for example, an HTML page or consumer’s application page), and you can include data actions in the visualization. An embedded data action allows you to interact with the embedded visualization in the external container. In the external container, you can also retrieve the set of data elements values that were selected in the visualization. You can add any number of embedded data actions.

The Publish Event is one such data action type, which can be defined in a visualization. When the Publish Event data action is invoked on the visualization, it enables external applications to receive the visualization context. In this situation, the word “context” means the set of data element values at the selected location in the visualization.

  1. Create or open a project. Confirm that you’re working in the Visualize canvas.
  2. In the project menu select Data Actions.
  3. Click Add Action, and enter a name in the Name field for the new data action.

    For example, DV Embedded Content DA1. You can use letters and numbers in a data action’s name.

  4. Click Type and select Publish Event.
  5. Click Add Data or Select Data in the Anchor To field, and select one or more data elements that you want to pass values when the data action is applied. Don't select measure columns or hidden columns.
  6. Enter an Event Name. The event name is provided in the external container and is passed when you publish the context event. The word “context” here means the set of data element values at a selected location in the visualization. If the data action is used across multiple projects or multiple data elements in a project, provide a unique event name for easier tracking.

    For example, if you entered DV Embedded Content DA1 as the action name, then in the Event Name field, you might enter Event from DA1 to indicate which data action the event comes from.

  7. Click the Pass Values field and select which values you want the data action to pass to the consumer.

    For example, if in the Anchor To field you specified Order Number, then in the Pass Values field, select Anchor Data to pass the Order number values.

    Values Description
    All Dynamically determines the intersection of the cell that you click (for example, "Product and Year") and passes those values to the target.
    Anchor Data Ensures that the data action is displayed at runtime, but only if the required columns specified in the Anchor To field are available in the view context.
    None Opens the page (URL or canvas) but doesn't pass any data. For example, you might want to navigate to without passing any context.
    Custom Enables you to specify a custom set of columns to pass.
  8. Click OK to save.

    After saving the project, you can embed the project in external containers. The external container shows the embedded visualizations. When you right-click the visualization and it includes applicable data actions, they’re displayed in the visualization in a drop-down menu. If you click an embedded data action, it determines the context information for the visualization and passes that information to the navigation action service to process it. The navigation service raises an event with the context payload information. You can subscribe to this event to receive the payload in the event callback and use the payload in other areas.

  9. In the external container, you execute data actions that contain embedded content by following these steps:
    1. Add or modify the path location of the project.
    2. Subscribe to the published event for the visualization.
    3. Define an event listener and an event callback.