RECORD LOOKUP COMPONENT

OVERVIEW

When developing Visualforce Pages, there are multiple occasions wherein you would have to access records from a specific object based on some conditions and display it to the end users for selection. It is difficult to search for records when you have lots of them in your org and when you want the records to be filtered based on a specific condition. Everytime we cannot go into the code and add WHERE clauses to meet the need. The process of categorizing and viewing the records based on a certain condition becomes difficult and tedious through the course of time.

Record Lookup is a component which displays a list of List Views defined on the object and selecting a List View would display the records pertaining to that specific List View. For this we can use the List View APIs to get the List View details and then obtain the SOQL query behind it and execute the same to get the respective records.

It also lets you to select records from a selected List View or via a Global Search.

GOALS

  1. Extensible. Ability to customize the filters to meet varying needs.
  2. Re-usable. Creating a component that can work for any SObjects in Salesforce.
  3. Lightning Experience Friendly. All interactions will be asynchronous without involving page-reloads. We also need to avoid the notion of using pop-ups instead display the results inline and an intuitive fashion.
  4. Developer Friendly API. Building a component with an extensible API and one that is easy to implement and use.

SPECIFICATIONS

The mockup of the proposed Record Lookup Component is as shown below –

 

^D17CC71A10AD9219BD46D3303BB58E87568D6EAC8EA9749883^pimgpsh_fullsize_distr

The ability to filter the results is achieved by using the List Views in Salesforce. The “Change Filter” link would show the list of available List Views in Salesforce defined on the particular object. Thus one can fine tune the results that are being displayed by creating new List Views in Salesforce and the same would be displayed here.

BUILDING IT

I have defined a controller which will be used by the Record Lookup Component.

It contains 5 Remote Action annotated methods :

  • fetchListViews to fetch the List Views available on the particular object.
  • fetchDefaultRecords to fetch recently viewed records of a particular object to display in the Record Lookup Component drop down.
  • fetchRecords to fetch the records of a selected List View in the Record Lookup Component.
  • searchRecords to perform a global search for records when a user starts typing in the Record Lookup Component.
  • setSelectedRecord to set the selected record in the Record Lookup Component.

I have then created a JS file which would facilitate the communication between the client side components and the Apex functions. It helps me to bind events and invoke the Remote Action methods.

Also, I have defined many attributes on the component in order to make as customizable as possible.

The attributes defined on the component are :

  • id : This attribute is important when there are more than 1 component on the same page
  • sobject : API name of the Object from which we need the records
  • label : Label to be displayed alongside the component
  • defaultValue : Default value that needs to be displayed upon the initial load of the component
  • componentWidth : Width of the component
  • filterListClass : CSS class applied to the select tag displaying the List Views
  • recordsListClass : CSS class applied to the select tag displaying the Records
  • load3rdPartyLib : Determine whether to load 3rd party libraries or not
  • globalSearchFilter : WHERE Clause to be considered when doing a global search
  • onselect : The JavaScript function that will be invoked upon selecting a record
  • callback : The JavaScript function that will be invoked after rendering the records list
  • ns : The NamespacePrefix (if available) that needs to used in order to access the Controller methods

I also have a Visualforce Page where I have used the Record Lookup Component for the sake of demo.

In order to use this VF Component, all you have to do is to just include the component on the VF page:

TESTING IT

Here is a link if you wanna get a hang of it. For the demo, I have used 3 objects – Account, Contact and Lead.

Feel free to play around with it –
http://shrutis22-developer-edition.ap2.force.com/Projects/componenttest

DEPLOYING TO YOUR SALESFORCE ORG

Visit this link in order to deploy the same to your Salesforce org in single click –
https://github.com/shrutis22/Record-Lookup#deployment

POST DEPLOYMENT

The host or the domain of the Salesforce orgs varies and hence we will have to add a Remote Site Setting that is specific to your Salesforce org.

Hence, after deployment please carry out the following steps:

  1. Open the Visualforce page called ComponentTest.
  2. Copy the domain from the address bar –
    Screenshot_2
  3. Create a new Remote Site Setting for the domain.
  4. Now refresh the page to see it in action.

For more details visit the GitHub repo – https://shrutis22.github.io/Record-Lookup/

Advertisements

One thought on “RECORD LOOKUP COMPONENT

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s