URL “Hacks” as Buttons in Lightning Experience


Someone in the community was asking if there was a way in Salesforce Lightning Experience to display a report via a URL Parameter, using the new feature – Filter Reports via URL Parameters in Lightning Experience – added with Spring ’17 release.  We were able to easily meet the requirement for posting a URL as a custom field, as detailed by Beth Breisnes in her blog post, Supporting Report Filter URL Hacks In Lightning and Classic. But, we were asked, how do I do the same with a custom button?

This was a troubling problem indeed.  Using standard URL features available for a URL button, the merge URL never turned out right and conditionals were not working for rendering ‘Theme4d’ (lightning) or ‘Theme3’ (classic).  I was stumped.

Then, I thought, well what if I expanded a bit outside of my admin realm and went into a developer mindset by using some visualforce.  It turns out, this was the answer! As an admin, you’re probably thinking, “Woah, woah woah, hold the breaks!  I don’t want to do any visualforce!”  Don’t worry, most of it is a template for your report URLs.  You won’t have to do any controllers or extensions unless you really need to (odds are you won’t if these are existing URL “hacks”).

So… without further ado! The visualforce!

<apex:page standardController="Account" showHeader="false" sidebar="false">
    <script>
        if(typeof sforce !== 'undefined' && sforce !== null && '{!$User.UIThemeDisplayed}' === 'Theme4d'){
            sforce.one.navigateToURL('{!'/one/one.app#/sObject/00Oo0000005vU4jEAE/view?fv0=' & LEFT(Account.Id,15) }');
        } else {
            window.top.location = '{!'/00Oo0000005vU4jEAE?pv0=' & LEFT(Account.Id,15)}';
        }
    </script>
</apex:page>

To explain some things:

  1. The standardController in the first line is the Object you’re working with: Opportunity, Account, Contact, Case, etc.  This will let you pull in fields from the object for “free”.
  2. showHeader=”false” sidebar=”false” – you want these.  When you’re redirecting to the report, if you don’t have these parameters, the user will see the headers and sidebars in classic.
  3. Line 3 – This says, “if this is lightning experience, then redirect to this URL”
  4. Line 5 – This is for redirecting to Classic.

This line, there is some magic happening:

sforce.one.navigateToURL('{!'/one/one.app#/sObject/00Oo0000005vU4jEAE/view?fv0=' & LEFT(Account.Id,15) }');

This will open the report url with ID 00Oo0000005vU4jEAE and will pass in a parameter with fv0 for the Account ID.  Notice how the URL for Classic uses pv0 and only includes ‘/00Oo0000005vU4jEAE’ versus ‘/one/one.app#/sObject/00Oo0000005vU4jEAE/view’ for passing in a URL.

Special thanks to Mike Tetlow for directing me to the sforce.one documentation to solve this requirement!

 

Adding the Button to your object

  1. Navigate to your object.
  2. Select “New Custom Button or Link”
  3. Add a Label & please add a description (you’ll thank your future self!)
  4. Select “Detail Page Button”
  5. Set the Behavior to “Display in Existing Window without Sidebar or Header”
  6. Set the Content Source as your visualforce page (note: if it doesn’t appear here, make sure that your standard controller in your visualforce page is correct).
  7. Add the button to your page layout.
  8. Click on the “Salesforce1 and Lightning Experience Actions” section.  Your custom button will appear under the “Salesforce1 and Lightning Experience Actions” section in the top pane.


Let’s see it in action!

Leave a comment

Your email address will not be published. Required fields are marked *