Expose a Salesforce Classic URL With Your Own Lightning Component (even if you don’t know any JavaScript)

Michael Kolodner, Salesforce MVP, guest-blogger

Michael KolodnerMy 50+ users are in Classic but I’m working in Lightning Experience to start figuring out what it’s going to take to transition our Salesforce instance. It’s only been a couple of weeks, but I can already see that I must have access to the Classic URLs for Salesforce records.

Since Spring ‘17, the Lightning URL contains the record ID and putting a Classic URL into Lightning will just work. Great! But the URL format for Lightning users is different than it was. In Classic, the format is very simple: your instance’s My Domain and then the record ID after the slash. It looks like this:

https://yourcompany.my.salesforce.com/recordID

But in Lightning, the URL format is different:

https://yourcompany.lightning.force.com/one/one.app#/sObject/recordID/view

If a Classic user goes to that URL they get a pop-up message telling them that Lightning isn’t enabled for them.

alt

And when they click OK they don’t even go to the record in question! So that’s no good. It means that while I’m doing my work in Lightning, I can’t copy and paste a URL to send to any of my colleagues.

Subscribe to our PUB Crawl newsletter for weekly recaps and insights from the Salesforce Power of Us Hub.

Why not use Chatter?

Some of you probably wonder why I don’t just use Chatter to @mention my colleague on the record in question. That will automatically notify them and give a link to the record. I think that’s more-or-less the official Salesforce advice on the matter. But Chatter isn’t appropriate for all uses.

There are plenty of times when a conversation started in email so the continuation should be there--anything else would be confusing. I also don’t want to write to one of my colleagues on the open Chatter feed that I noticed a mistake they’ve made--it might embarrass them. Or I might need to email with a manager about repeated mistakes by members of their team, which I definitely wouldn’t want on the feed!

Why not create a formula field?

The very smart Katie McFadden, Salesforce MVP and Senior Technical Consultant & Community Evangelist at Swift River Consulting, when I brought this problem to her, asked why I didn’t just create a formula field to give the URL. Good idea, but:

  1. I would have to create the formula field and add it to the page layout on each object.
  2. I would have to add it to page layouts that users would see in Classic.
  3. Once we all transition to Lightning, those formula fields will be clutter.

A Lightning component can be built once and then used on the Lightning Record Page for any object. That seems much closer to what I need.

I’ve done a handful of Trailhead modules and projects about creating Lightning components but I’m the first to admit that I don’t really understand it because I can’t code (yet!) nor can I interpret JavaScript. I just needed to figure out how to pare down what was in those modules to give a simple record ID. I was already certain (see here, for example) that it’s practically built-in that components know what record ID they’re displaying on. And I know enough HTML to manipulate the output to meet my desired format.

Unfortunately, that’s where I was stumped. Then the amazing Salesforce community came to my rescue! After trying a lot of dead ends, I posted on the Salesforce Developers forum. Within hours I had an answer that gave exactly the help I needed. Now I have a custom component that does exactly what I want. You can have one too! I’ll show you the steps to create your own.

Step 1 - Open the Developer Console and Create a New Lightning Component

  1. In Lightning Experience, click the Gear and choose Developer Console.
  2. In the Developer Console, click New > Lightning Component.
  3. Name your component ClassicURL, give a Description, and check the option for Lightning Record Page.

alt

Step 2 - Build your component

  1. Once you click Submit, you will have a new tab open in the Developer Console with your ClassicURL.cmp (component) open.
  2. Notice that the aura component definition that’s auto-generated already includes force:hasRecordID in it. That sound promising!
  3. Rather than type out line-by-line updates, I’m going to have you replace the generated code with what we need. Select all the text, delete it, then paste in this:
        
        
        
        
        This is recordID {!v.recordId},a {!v.sObjectName} record. 
        If you need the url, it's  https://cunning-raccoon-112384-dev-ed.my.salesforce.com/{!v.myRecordID}  
        
    
  4. Make sure you replace the domain in the URL with the domain of your Salesforce org.
  5. This version of the component actually gives bonus information including the name of the object you’re viewing (sObjectName) and puts that into a sentence before the URL we’re looking for. You can easily edit the HTML to be simpler (or more complex). Everything from the first red (for bold) to the ending (for end bold) is just plain ole’ HTML that you can edit with impunity and easily search the web for formatting and syntax. The items between curly braces--{!v.recordId} and {!v.sObjectName}--are the variables for the record ID and the object name that get merged in the output. (I’m going to let you figure out which is which.) Those are the real key here.
  6. Click Save.
  7. Your component is now ready. But if you test it, you’ll find that it will insert blank values for the variables. You need a controller.

Demo the Soapbox Engage Donations App to see how it can supercharge your online fundraising.

Step 3 - Build your Controller

  1. In the upper right of the Developer Console, click on Controller (Ctrl+Shift+2) to open the controller for your component. This will give you a tab named ClassicURLController.js. This is the Javascript controller that runs your new component. (Honestly, I only barely understand what I just said there.)
  2. Replace the auto-generated code with:
    ({
        doInit : function(cmp) {
            cmp.set("v.myRecordID",cmp.get("v.recordId"));
        }
    })
    
  3. To the extent that I understand this JavaScript at all (not much), I think it says that when the component is initialized (loaded on the page), this controller should fill a variable (called myRecordID) with the record ID. The controller makes that variable available to the component that we built in Step 2. I honestly don’t understand why I didn’t have to do the same thing with a variable called sObjectName to be able to use that in the component. But I didn’t do so and it works, so I’m not complaining...
  4. Click Save.

That’s it! You’re actually done now. Your component is built and ready to be placed on any record page layout. You can close the Developer Console if you’d like.

Step 4. Place the Component on a Lightning Record Page

    1. Go into a record on any object, standard or custom. Here we’re looking at the contact Andy Young in my developer edition.

alt

    1. Click on the gear and choose Edit Page.

alt

    1. Your new component will show up at the bottom of the list of components, under Custom.

alt

    1. Place it on the page wherever you’d like. It’s in the upper right at the moment. Because the Lightning page builder is dynamic, you’ll immediately see the component display the text and record ID!
    2. Click Save and, if necessary, activate the page.
    3. When the page reloads, you can enjoy your Lightning access to a standard Classic record URL!

alt

  1. As you go about your business on other objects, just add that component to the page layout and you’re ready to copy and paste URLs for any Salesforce item that will work for both Classic and Lightning Experience users.

(One Last Tip: If your code ends up in the Developer console without nice tabs and spaces, select all and press Shift+Tab. Your code will be cleaned up as though you’re a programmer that knows what you’re doing!)

Try Soapbox Engage for free and see why more than 500 organizations use it to shape a better world.