[SalesForce] Lightning Components: is the Standard Tab component firing app events when switching tabs

I need to know when a tab is switched. Can I subscribe to an event and get notified?

In my usecase I need to commit pending changes before user switches tabs or at least notify the user. Just need an event or any mechanism to track, the rest is easy on my own.

Is there a way to extend this Standard Component?

I've seen there is also a lightning:tab here https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/lightning_overview.htm but using it will kill the feature to add subcomponents via the App Builder, right?

Best Answer

There is a Lightning even when navigation happens by adding aura:locationChange. It fires also when user switches tabs. I believe you can determine if tab has been switched or refreshed by value of

var loc = event.getParam("token");

in the handler for

({
    update : function (component, event, helper) {
        // Get the new location token from the event
        var loc = event.getParam("token");
        // Do something else
    }
})

event

<aura:handler event="aura:locationChange" action="{!c.update}"/>

Related Solutions

[SalesForce] SF lightning design system slds-Tabs rendering issue when switching between 2 lightning component tabs from salesforce custom left navigation Tabs

Noticed a few things: 1. your attribute names were different between the component (v.thisSelected, v.thatSelected) and the controller (v.aSelected, v.pSelected). 2. the component markup had both tabs set to slds-show at first.

Try this out to start, hope it works for you.

component:

<aura:component >
<ltng:require styles="/resource/SLDS/assets/styles/salesforce-lightning-design-system-vf.css"/>
<aura:attribute name="thisSelected" type="Boolean"/>
<aura:attribute name="thatSelected" type="Boolean"/>
<div class="slds"> 
<div class="slds-tabs--default">
    <ul class="slds-tabs--default__nav" role="tablist">
        <li aura:id="thisTab" class="slds slds-tabs--default__item slds-active" title="This" onclick="{!c.onClickThis}" role="presentation">
            <a class="slds-tabs--default__link" role="tab" tabindex="0" aria-selected="{!v.thisSelected}" aria-controls="thisTab" id="tab-default-1__item">This</a>
        </li>
        <li aura:id="thatTab" class="slds slds-tabs--default__item" title="That" onclick="{!c.onClickThat}" role="presentation">
            <a class="slds-tabs--default__link" role="tab" tabindex="-1" aria-selected="{!v.thatSelected}" aria-controls="thatTab" id="tab-default-2__item">That</a>
        </li>
    </ul>
    <div id="thisTab" aura:id="thisTabData" class="slds-tabs--default__content slds-show" role="tabpanel" aria-labelledby="tab-default-1__item">
        tab 1 (This)
    </div>
    <div id="thatTab" aura:id="thatTabData" class="slds-tabs--default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-2__item">
        tab 2 (That)
    </div>
</div>

controller:

({
onClickThis: function(component, event, helper) {
    var thisTab = component.find('thisTab');
    var thisTabData = component.find('thisTabData');

    var thatTab = component.find('thatTab');
    var thatTabData = component.find('thatTabData');

    $A.util.addClass(thisTab, 'slds-active');
    $A.util.addClass(thisTabData, 'slds-show');
    $A.util.removeClass(thisTabData, 'slds-hide');
    component.set("v.thisSelected", true);

    $A.util.removeClass(thatTab, 'slds-active');
    $A.util.removeClass(thatTabData, 'slds-show');
    $A.util.addClass(thatTabData, 'slds-hide');
    component.set("v.thatSelected", false);
},

onClickThat: function(component, event, helper) {
    var thisTab = component.find('thisTab');
    var thisTabData = component.find('thisTabData');

    var thatTab = component.find('thatTab');
    var thatTabData = component.find('thatTabData');

    $A.util.removeClass(thisTab, 'slds-active');
    $A.util.removeClass(thisTabData, 'slds-show');
    $A.util.addClass(thisTabData, 'slds-hide');
    component.set("v.thisSelected", false);

    $A.util.addClass(thatTab, 'slds-active');
    $A.util.removeClass(thatTabData, 'slds-show');
    $A.util.addClass(thatTabData, 'slds-show');
    component.set("v.thatSelected", true);
},
})

[SalesForce] Lightning Components for Visualforce firing events

There is a blog post here with the below working example where clicking the button fires the event and then the event is handled on the visualforce page:

-- Component --

<aura:component>
  <div> Hello World !!!! </div>
   <aura:registerEvent name="myevent" type="c:myEvent" />
  <ui:button label="fireEvent" press="{!c.fireevent}" />
</aura:component>

-- Component Controller --

({
    fireevent: function(component, event, helper) {
        var myEvent = $A.get("e.c:myEvent");
        myEvent.setParams({"data":"Test"});
        myEvent.fire();
    }
})

-- Application Event --

<aura:event type="APPLICATION">
  <aura:attribute type="string" name="data" />
</aura:event>

-- Lightning App --

<aura:application access="GLOBAL" extends="ltng:outApp">
  <aura:dependency resource="c:myComponent" />
</aura:application>

-- Visualforce Page --

<apex:page showHeader="false" sidebar="false">
    <apex:includeLightning />
    <div id="lightning"> Hello world VF ..!!! </div>
    <script>

        $Lightning.use("c:myEventApp", function() {
            $Lightning.createComponent("c:myComponent", {}, "lightning", function(){
                $A.eventService.addHandler({ "event": "c:myEvent", "handler" : visualForceFunction});

            });
        }); 

    </script>

    <script>

    var visualForceFunction = function(event){
            var myEventData = event.getParam("data");
            console.log(myEventData);
        };

    </script>
</apex:page>

Best Answer

Related Solutions

[SalesForce] SF lightning design system slds-Tabs rendering issue when switching between 2 lightning component tabs from salesforce custom left navigation Tabs

[SalesForce] Lightning Components for Visualforce firing events

Related Topic