Change browser title in Lightning Experience

Question

I want to change the default browser title when the user press my Lightning Component Tab. How can I do it?

In visualforce, I had the title attribute <apex:page title="My title">, but in Lightning Experience I found no way to accomplish this, the title is always Lightning Experience | Salesforce:

Any ideas?

Answer 1

You should do that in init handler of component.

Sample:

cmp file:

<aura:component implements="lightning:actionOverride,force:appHostable,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction,lightning:isUrlAddressable" access="GLOBAL">

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

</aura:component>

controller JS:

({
    doInit : function(component, event, helper){
        document.title = "My Custom Component";
    }
});

Output:

Answer 2

You can set the title in the initialization of your controller...

e.g. document.title = "Test"

Answer 3

The title attribute in <apex:page> will set the title of the window (since Summer '16).

To update the browser window title from a Visualforce page in Lightning Experience, you can send a message to the parent window:

window.parent.postMessage(JSON.stringify({"event":"force:setTitle","arguments":{"title": "NEW TITLE"}}) , window.location.ancestorOrigins[0]);