CRM Analytics Aura Events - SelectionChanged Event

React to selections in your dashboard and get the row data for the selection.

Example - Reacting to a Selection with the selectionChanged Event

The dashboard component also generates Lightning events when the user changes a selection. The payload for these events is effectively the row data for the current selection. Datasets can be from many sources, so the actual payload may only be meaningful when the user has knowledge of the datasets being used. This example shows how to receive and iterate through the payload, which is an array of objects representing the current selection.

This example uses the same dashboard used for the update event example, so be sure to follow those steps first.

Using the Developer Console, create an Aura component named recordView. Copy the following markup into the component.

1<aura:component implements="force:appHostable,
2                flexipage:availableForAllPageTypes,
3                flexipage:availableForRecordHome,
4                force:hasRecordId,
5                forceCommunity:availableForAllPageTypes,
6                force:lightningQuickAction"
7                access="global" >
8  <aura:handler event="wave:selectionChanged" action="{!c.handleSelectionChanged}"/>
9  <aura:attribute name="msg" type="String" default="Please make a selection in CRM Analytics that contains a record ID" access="GLOBAL"/>
10  <aura:attribute name="recordId" type="String" default="" access="GLOBAL"/>
11  <aura:dependency resource="markup://force:navigateToSObject" type="EVENT"/>
12  <div class="container">
13    <aura:if isTrue="{!v.recordId == ''}">
14      <div class="msg">
15        {!v.msg}
16      </div>
17      <aura:set attribute="else">
18        <force:recordView recordId="{!v.recordId}"/>
19      </aura:set>
20    </aura:if>
21  </div>
22</aura:component>

Add a Controller (recordViewController.js) to the bundle and copy the following JavaScript into it:

1({
2  handleSelectionChanged: function(component, event, helper) {
3    var params = event.getParams();
4    var payload = params.payload;
5    if (payload) {
6      var step = payload.step;
7      var data = payload.data;
8      data.forEach(function(obj) {
9        for (var k in obj) {
10          if (k === 'Id') {
11            component.set("v.recordId", obj[k]);
12          }
13        }
14      });
15    }
16  }
17})

This example references recordId, an Opportunity record identifier. If you don’t use this in your dashboard, substitute a different field.

Payload data can contain other objects, each in turn containing key-value pairs. For example, aside from the Id, you can also get the noun (for example, “dashboard”) and the verb (for example, “selection”).

Add a Style (recordView.css) to the bundle and copy the following CSS into it:

1.THIS.container {
2  min-height: 650px;
3  min-width: 200px;
4  height: 100%;
5  width: 100%;
6  border: 1px solid #A0A0A0;
7  margin: 5px auto;
8}
9
10.THIS .msg {
11  vertical-align: middle;
12  text-align: center;
13  margin: 2em auto;
14}

For a better experience in Lightning App Builder, add a Design (recordView.design) to the bundle and paste in the following:

1<design:component label="Record View">
2  <design:attribute name="recordId" label="Record ID" description="ID of the record"/>
3  <design:attribute name="msg" label="Message" description="Message to display"/>
4</design:component>

The page you created using Lightning App Builder should now show the Record View component in the palette. Drag this component onto the page, then save the page.

Go back to Lightning Experience, and make a selection in your CRM Analytics Dashboard component. The corresponding Salesforce Opportunity record (or the record type you specified in recordViewController.js) will be displayed in the newly added component.

Resources

For more information about Aura events and other Lightning development features, see the Lightning Aura Components Developer Guide.