Boost Productivity by Using Your Chrome Omnibox to Search in Salesforce

The inspiration behind this blog was an excellent Salesforce Developer Blog written by Caroline Roth – https://developer.salesforce.com/blogs/tech-pubs/2015/11/easier-developer-doc-and-salesforce-searches-on-chrome.html back in 2015.

This Salesforce Developer Blog details how you can use the Chrome Omnibox (Address Bar) to search Salesforce Developer Docs as well as your Salesforce Instance thus saving many clicks and improving user productivity.

If you have not read the above, I would strongly recommend reading it before you read this blog further.

However, since Caroline’s blog was written back in 2015, it was written with respect to the Classic User Interface of Salesforce. Things have changed and now, you have the all-new Lightning Experience. Unfortunately, this would no longer work in Lightning Experience.

I thought why not take a stab at it and make it to work in Lightning Experience too. Read along to find out how you can accomplish it!

Demystifying the Lightning Experience Search

When you do a search in Lightning Experience, you will not see an absolute URL or path (in the Address Bar like in Classic) to a specific Search Page. Instead, in Lightning Experience, the URLs are base-64 encoded. Under the hood, when you do a search in Lightning Experience, Salesforce navigates to a native Lightning Component that does the search and displays the results. But, what is that “native” Lightning Component? Let us find out.

Demystifying the Lightning Experience Search

If you watch the video, you will notice that, the base-64 encoded URL actually is a JSON (JavaScript Object Oriented Notation) that contains the name of the native Lightning Component (that does the search) along with the attributes that needs to be supplied for the Lightning Component to work.

What is the base-64 Encoded String.png

Yes, the native Lightning Component that does the search in Lightning Experience is –

forceSearch:searchPage

as mentioned in the componentDef node.

If you notice the attributes node, the sub-nodes that are relevant for us would be –

  1. scopeMap
  2. term

where term is the search term or keyword.

Now, the Chrome Search Engine Configuration would ONLY allow you to supply a URL and the Query String Parameters. In this case, there are NO absolute URLs and moreover we need to supply a base-64 encoded string too.

What if we had an absolute URL within Lightning Experience that could accept the Search Term as a Query String Parameter and then spawn the Lightning Experience Search with that term?

Creating an URL Addressable Aura Component – LightningSearch

The idea is what I just said – What if we had an absolute URL within Lightning that could accept the Search Term as a Query String Parameter and then spawn the Lightning Experience Search?

So, let us create a Lightning Component that can be spawned using a URL. To do the same, we need implement the interface – lightning:isUrlAddressable.

To read more about the interface, visit – https://developer.salesforce.com/docs/component-library/bundle/lightning:isUrlAddressable/documentation

Component Markup – LightningSearch.cmp

<aura:component implements="lightning:isUrlAddressable" access="global">

    <aura:attribute name="query" type="String" />

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

</aura:component>

Notice that the component implements the interface – lightning:isUrlAddressable and moreover all it does is, call the search() method on the controller upon initialization.

The attribute query is created to store the Query String Parameter.

That is EASY. Right?

Component Controller – LightningSearchController.js

({
    search : function(component, event, helper) {
        let params = {
            "componentDef":"forceSearch:searchPage",
            "attributes":{
                "term":component.get( "v.pageReference" ).state.c__query,
                "scopeMap":{
                    "type":"TOP_RESULTS"
                }
            }
        };       

        $A.get( "e.force:navigateToURL" ).setParams( {
            "url":`/one/one.app#${ encodeURIComponent( btoa( JSON.stringify( params ) ) ) }`
        } ).fire();
    }
})

What is happening inside the search() function?

  1. Read the search term from the Query String Parameter called c__query
component.get( "v.pageReference" ).state.c__query
  1. Construct the JSON with the term and scopeMap.
  2. Construct the base-64 encoded URL and use the force:navigateToURL to navigate to the same.

Note: I am using ES2015 Template Literals (Template strings) to construct the base-64 encoded URL instead of the ugly and conventional “concatenation” technique. (Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)

That is all you need to code!

Here is a video demonstration that will guide you through the development of the Lightning Component using the Developer Console –

Let us try running this Lightning Component!

In the above, notice how a URL Addressable Lightning Component is fired. The relative URL in our case looks like this –

/lightning/cmp/c__LightningSearch?c__query=edge

where c__LightningSearch is the name of the Lightning Component and c__query is the name of the attribute.

Configuring the Chrome Search Engines

Let us configure the Chrome Search Engine accordingly.

That is it. Feel free to comment and let me know if this helped to improve the productivity of your users.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s