Go from insights to quick action showcase

The Go from insights to quick action Power BI embedded showcase demonstrates an app that creates meaningful customer campaigns based on real-time analytics. Users can slice and filter Power BI embedded report data to discover insights, then configure and start a customer discount or coupon campaign instantly from within the report.

This showcase demonstrates how an application uses:

  • The extend menu command API to add a custom command and menu item to a report.
  • Event handling to communicate between report events and application code.
  • The exportData API to export the underlying data of a report visual.

Go from insights to quick action showcase experience

Contoso, a fictitious sales company, uses the Go from insights to quick action showcase to generate insights and kick off campaigns directly from within a Power BI embedded report. The embedded report presents customers' purchases by customer name and region, purchase category, days since last purchase, and amount spent.

The report has table, column graph, and donut chart visualizations, and several slicing, filtering, and sorting mechanisms. For this report, Contoso is most interested in the past 30 days' higher-end purchases of $500-$799, so the report loads with those slicer ranges applied.

Screenshot showing the Insights to actions showcase.

Generate insights

To gain insights about the sales results, report users can filter or slice the data further by selecting specific values and ranges in the drop-down lists, visualizations, and slicers. For example, a Sales Manager for Professional Services selects several different regions, and realizes that although the Professional Services category had the highest total spend overall, it had the lowest spends in the MEA, UK, and United States regions, and no purchases in LATAM or Canada.

Screenshot showing United States region selected in the donut chart, which highlights the United States spend data compared to the total spend in the Total spend by Latest purchase category bar graph.

Create a campaign

The Sales Manager decides to promote Professional Services sales to Canada, LATAM, MEA, UK, and United States customers. To kick off a campaign any time using the current customer list, the Sales Manager can either select the Create a campaign button, or select Start campaign from the customer table visual's More options (...) menu.

Screenshot showing the Create a campaign button.

Screenshot showing the Start campaign option in the table visual More options menu.

Create a targeted customer list

Report users can use the report drop-down lists, visualizations, and slicers to narrow down the customer list to targeted recipients. In this case, the Sales Manager selects Canada, LATAM, MEA, UK, and United States from the Region drop-down list, and the customer table now lists customers from only those regions. When the customer list is ready, the Sales Manager selects Create a campaign.

Screenshot showing the Region dropdown with several regions selected, and the customer list showing only customers from those regions.

Create a discount campaign

The Campaign distribution list popup opens, listing the targeted recipients' names and contact information, and offering the choice to Send discount or Send coupon. The Sales Manager selects Send discount.

Screenshot showing dialog box with campaign distribution contact list and Send discount and Send coupon buttons.

In the Send discount to distribution list dialog box, the Sales Manager writes a message offering the targeted customers a 10% discount on Contoso professional services, and then selects Send.

Screenshot showing the message text box and Send button.

The app sends the discount offer emails to the distribution list, and displays a Sent notification.

The Sales Manager could also send a coupon to customers by selecting Send coupon on the distribution list screen.

Go from insights to quick action showcase code

The code for implementing the showcase is in the PowerBI-Embedded-Showcases GitHub repository.

  • The application HTML code builds the embedded report container and elements, dialog boxes, text fields, and buttons.

  • The report JavaScript code embeds the report and defines all the visualization interactions, data exports, and button handling functions.

Add the campaign command to the report

The report embedConfiguration uses the extend menu command API to add a campaign command to the report, which appears at the top of the More options menu of the table visual.

let config = {
...
    settings: {
        ...
        extensions: [
            {
                command: {
                    name: "campaign",
                    title: "Start campaign",
                    icon: base64Icon,
                    selector: {
                        $schema: "http://powerbi.com/product/schema#visualSelector",
                        visualName: tableVisualGuid
                    },
                    extend: {
                        visualOptionsMenu: {
                            title: "Start campaign",
                            menuLocation: models.MenuLocation.Top,
                        }
                    }
                }
            },
        ...
    }
}

Handle the Start campaign command

The following code handles the commandTriggered event for the campaign command. The code listens for the Start campaign menu item selection event, and sends the current filtered customer list data from the table visual.

// Adding onClick listener for the custom menu in the table visual in the report
reportShowcaseState.report.on("commandTriggered", async function (event) {
    if (event.detail.command === "campaign") {

        // Populate data according to the current filters on the table visual
        const result = await tableVisual.exportData(models.ExportDataType.Underlying);
        handleExportData(result);
        onStartCampaignClicked();
    }
});

Handle the Create a campaign button click

The following code handles the Create a campaign button click event. The code listens for the Create a campaign button selection event, and sends the current filtered customer list data from the table visual.

// Adding onClick listener for the button in the report
reportShowcaseState.report.on("buttonClicked", async function () {

    // Populate data according to the current filters on the table visual
    const result = await tableVisual.exportData(models.ExportDataType.Underlying);
    handleExportData(result);
    onStartCampaignClicked();
});

Next steps