1

I am trying to create a lightning component which will apply filter to a dashboard using wave:update event. This feature is available from Summer'17 release.

Code for component:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" 
                access="global" >

    <aura:attribute name="dashboardId" type="String" />
    <aura:attribute name="filter" type="String" />

    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <aura:registerEvent name="update" type="wave:update"/>

    <div class="container">
        <div class="slds-form slds-form_stacked">
            <div class="slds-form-element">
                <label class="slds-form-element__label">Dashboard Id</label>
                <div class="slds-form-element__control">
                    <ui:inputText class="slds-input" value="{!v.dashboardId}"/>
                </div>
            </div>
            <div class="slds-form-element">
                <label class="slds-form-element__label">Filter</label>
                <div class="slds-form-element__control">
                    <lightning:textarea class="slds-textarea" value="{!v.filter}" minlength="1000"></lightning:textarea>
                </div>
            </div>
            <div class="slds-form-element">
                <button label="Fire" class="slds-button slds-button_brand" onclick="{!c.handleEvent}">Fire</button>
            </div>
        </div>
    </div>
</aura:component>

Code for JS controller:

({
    doInit : function(component, event, helper) {

        var filter = {

            "filters": [
                {
                    "dataset": {
                        "id": "0Fb1I0000000HEXSA2",
                        "name": "ADDTest",
                        "url": "/services/data/v41.0/wave/datasets/0Fb1I0000000HEXSA2"
                    },
                    "fields": [
                        "AccountSource"
                    ],
                    "operator": "in",
                    "value": [
                        "Partner"
                    ]
                }
            ]
        };
        var json = JSON.stringify(filter, null, 2);
        console.log("json--"+json)
        component.set('v.filter', json);
    },

    handleEvent : function(component, event, helper) {
        var filtertext = component.get('v.filter');
        var dashboardId = component.get('v.dashboardId');
        console.log("filter---"+filtertext);
        console.log("dashboardid---"+dashboardId);
        var evt = $A.get('e.wave:update');
        evt.setParams({
            value: filtertext,
            Id: dashboardId,
            type: "dashboard"
        });
        evt.fire();
    }
})

I am creating two design attributes: one that will accept the dashboardId and other that will accept the filter. I am currently using the default filter I have given in JS controller. However, the update event does not fire. Can you help me to see if I am missing anything else in the code?

  • what makes you think that it is not firing? are you handling the event in some other component that you have not included? – glls Apr 22 '18 at 21:19
  • Hi. Sorry I am unaware of any such functionality. Do we need to do that? if so, can you share a sample code on how to go about doing it? – Ms.Mocha Apr 23 '18 at 21:22
  • Check this video where they actually filter and show real code. I see some difference to you code: youtube.com/… – Robert Sösemann Jul 6 '18 at 12:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.