Embedding a CRM Analytics Dashboard in Aura Component Filter doesn't work!

Question

I am trying to filter a dashboard using an aura component, my dashboard works fine but filtering doesn't work. I get this error: Unexpected non-whitespace character after JSON at position 1 The Dashboard developer name and dataset I am getting from apex, so it does set to the wave:dashboard component.

Here's how the filter json appears:

{
    "datasets": {
        "anagrafiche_incomplete_ma": [{
                "fields": ["AccountCop.PARTNER__c"],
                "filter": {
                    "locked": true,
                    "operator": "in",
                    "values": ["1000014470"]
                }
            }
        ]
    }
}

Here's my component:

<aura:component controller="SFI_WaveDashboardController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="selectedDashboard" type="String" default="" />
    <aura:attribute name="filterInput" type="String" default="" />
    <aura:attribute name="dashboardOptions" type="List" default="[]" />
    <aura:attribute name="filter" type="String" default="" access="GLOBAL"/>
    <aura:registerEvent name="update" type="wave:update"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
    
    <lightning:card title="Select and then filter the dashboard.">
        
        <div class="slds-p-around_medium">
            <lightning:select aura:id="dashboardSelect" label="Select" value="{!v.selectedDashboard}" onchange="{!c.dashboardSelected}">
                <aura:iteration items="{!v.dashboardOptions}" var="option">
                    <option text="{!option.label}" value="{!option.value}" />
                </aura:iteration>
            </lightning:select>

            <lightning:textarea aura:id="filterInput" label="filter" value="{!v.filterInput}" />
            <lightning:button label="Apply filter" onclick="{!c.filterDashboard}" />

            <wave:waveDashboard openLinksInNewWindow="false" height="1000" showTitle="false" showSharing="false" aura:id="embedDashboard" developerName="{!v.selectedDashboard}" filter="{!v.filter}" />
        </div>
    </lightning:card>
</aura:component>

Here's my controller:

({
    doInit : function(component, event, helper) {
        var action = component.get("c.getDashboardOptions");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.dashboardOptions", response.getReturnValue());
                console.log("response ", response.getReturnValue());
            }
            
        });
        $A.enqueueAction(action);
    },
    
    dashboardSelected : function(component, event, helper) {
        var selectedDashboard = component.find("dashboardSelect").get("v.value");
        component.set("v.selectedDashboard", selectedDashboard);
    },

    filterDashboard : function(component, event, helper) {
        var filterInput = component.get("v.filterInput");
        var selectedDashboard = component.get("v.selectedDashboard");
        var dashboardOptions = component.get("v.dashboardOptions");
        console.log("FilterInput ", filterInput);
        
        var selectedOption = dashboardOptions.find(function(option) {
            return option.value === selectedDashboard;
        });
        
        if (selectedOption) {
            var dataSet = selectedOption.dataset;
            console.log("Dashboard ", selectedDashboard ," DataSet ", dataSet);
            //var filtri = '';
            
            //filtri = "{'fields':['"+"AccountCop.PARTNER__c"+"'],'filter':{'locked': true,'operator':'in','values':['" + filterInput + "']}},";
                
            var filter = {
                datasets: {
                    [dataSet]: [ 
                        {
                            fields: ['AccountCop.PARTNER__c'],
                            filter: {
                                locked: true,
                                operator: 'in',
                                values: filterInput.split(',')
                            }
                        }
                    ]
                }
            };
            //console.log("JSON ", "{'datasets':{'" + dataSet + "':[" + filtri.replace(/,([^,]*)$/, '$1') + "]}}");
            console.log("JSONStringy ", JSON.stringify(filter));
            component.set("v.filter", filter);
            
            var waveUpdateEvent = $A.get("e.wave:update");
            if (waveUpdateEvent) {
                waveUpdateEvent.setParams({
                    value: selectedDashboard, // ID della dashboard da aggiornare
                    type: "dashboard",
                    id: selectedDashboard
                });
                waveUpdateEvent.fire();
            } else {
                console.log("wave:update event not found");
            }
        } else {
            console.log("Dashboard not found: " + selectedDashboard);
        }
    }
})

I have tried before of creating the json as an object and then passing it to the component.set(), I have also tried by using find component.find("embedDashboard").set(),I have also tried building the Json myself, but now I really don't know what I am doing wrong, I have looked up the documentation but there are no examples, it just tells you how the json filter should be.

I am not sharing apex because the only thing it does is, retrieve the dashboards and datasets by a callout to /services/data/v57.0/wave/dashboards.

Answer 1

I managed to fix my problem, I passed the dashboard DeveloperName to the value of the update event, when I actually needed to add the filter attribute to it. I feel so stupid after finding out just now.

Here's the modified code for anyone who has the same problem:

filterDashboard : function(component, event, helper) {
        var filterInput = component.get("v.filterInput");
        var selectedDashboard = component.get("v.selectedDashboard");
        var dashboardOptions = component.get("v.dashboardOptions");
        console.log("FilterInput ", filterInput);
        
        var selectedOption = dashboardOptions.find(function(option) {
            return option.value === selectedDashboard;
        });
        
        if (selectedOption) {
            var dataSet = selectedOption.dataset;
            console.log("Dashboard ", selectedDashboard ," DataSet ", dataSet);
            //var filtri = '';
            
            //filtri = "{'fields':['"+"AccountCop.PARTNER__c"+"'],'filter':{'locked': true,'operator':'in','values':['" + filterInput + "']}},";
                
            var filter = {
                datasets: {
                    [dataSet]: [ 
                        {
                            fields: ['AccountCop.PARTNER__c'],
                            filter: {
                                locked: true,
                                operator: 'in',
                                values: filterInput.split(',')
                            }
                        }
                    ]
                }
            };
            //console.log("JSON ", "{'datasets':{'" + dataSet + "':[" + filtri.replace(/,([^,]*)$/, '$1') + "]}}");
            console.log("JSONStringy ", JSON.stringify(filter));
            component.set("v.filter", JSON.stringify(filter));

            var filterAttribute = component.get('v.filter');

            var waveUpdateEvent = $A.get("e.wave:update");
            if (waveUpdateEvent) {
                waveUpdateEvent.setParams({
                    value: filterAttribute,
                    type: "dashboard",
                    id: selectedDashboard
                });
                waveUpdateEvent.fire();
            } else {
                console.log("wave:update event not found");
            }
        } else {
            console.log("Dashboard not found: " + selectedDashboard);
        }
    }

So after setting the filter to the component I added this line to get the filter attribute:

var filterAttribute = component.get('v.filter');

and then I passed it to the event:

waveUpdateEvent.setParams({
      value: filterAttribute,
      type: "dashboard",
      id: selectedDashboard
});