Implement a 'Back' or 'Cancel' button in a Lightning Component, in a VF Page, in Lightning Experience

Question

In order to take advantage of the standard set controller in Lightning Experience we have a slightly convoluted setup.

We have:

• Using Lightning Experience.
• A Visualforce page and controller that works out which records are selected and creates...
• A Lightning Component.

The Lightning Component can also be embedded as a Quick Action.

The difficulty we have is implementing a 'Back' or 'Cancel' button in the component that will direct us to the right place (the referring page) when embedded in VF.

We have managed to get the 'closeQuickAction' event to bubble up to the Visualforce page, and can instruct the page to re-direct successfully. However, we can't find where to send the user to.

E.G.

From a list view, the user clicks on the List Button, to get into the Visualforce Page. How do we get the user back onto the List View with the right filter selected?

We have tried:

ApexPages.currentPage().getHeaders().get('Referer');

However, this just gives you:

https://OUR-DOMAIN/one/one.app

Any ideas?

Answer 1

In the end it was sufficient for us to assume that the screen was being launched from the List View. If we need variations then I think we'll try to make a VF component and wrap that with different pages for different contexts. We'll cross that bridge when we come to it.

For now we have the following on the VF controller:

public String getReferer(){
    Id filterId = setController.getFilterId();
    String baseUrl = ApexPages.currentPage().getHeaders().get('Referer');
    String fullUrl = baseUrl + 'one/one.app#/sObject/Contact/list?filterName=' + filterId;
    return fullUrl;
}

In the VF we then pass a handler into the component when we construct it:

closePopoverHandler = function( event )  {
                                            window.top.location = '{!referer}' ;
                                         };


$Lightning.use( "c:OurLightningApp", function() {
      $Lightning.createComponent( "c:OurLightningComponent",
                                  { param1: 'value1' },
                                  "DivToReplace",
                                  function(cmp) {
                                          $A.eventService.addHandler({
                                               event: 'force:closeQuickAction',
                                               handler: closePopoverHandler
                                           });
                                   });
                               });

And then ensure that the LightningApp has the following dependancy:

<aura:dependency resource="markup://force:*" type="EVENT"/>

That said, as an alternative for finding the URL to return to - a more generic solution would be to use the ApexPages parameters, which sometimes contains the return url.

String retUrl = ApexPages.currentPage().getParameters().get('vfRetURLInSFX' );
if ( String.isNotEmpty( retUrl ) ) {
    //
    // the retUrl is in the parameters, so we should just return it
    //
    return retUrl;
}
//
// We can assume have been launched from a related list on an object, and so the url has to be constructed
//
String baseUrl = ApexPages.currentPage().getHeaders().get('Referer');
return baseUrl + 'one/one.app#/sObject/' + apexpages.currentpage().getparameters().get('id');