We launched a new version of the Lookup Field component! It has many valuable and additional features for development.
First of all, let us say a huge thank you for your feedback and propositions. According to our customers' reviews, we could determine specific requirements for the product and enhance it. Many of those who downloaded our Lightning Universal Lookup Component were anticipating a new version where we would include all requests, and there it is.
The latest version has already passed a security review and is available on the AppExchange. But let's see what new you can spot there.
1. Handle Event from Lookup Component and execute your actions
Catch events and selected values changes when focus appears or goes. Execute your methods meanwhile.
In one of the feedbacks, one developer wrote that he needs to capture the event of changing the selected value in the link and perform his actions simultaneously. Now it's easy to implement.
In all three events, there is a parameter cmpId. In addition, it returns aura:id specified in the component (after all, you can have several lookups in one component, which will allow identifying the field). Similarly, the onChange event returns an additional attribute oldValue, which returns the previous value of the lookup.
Example of the onFocus event
Code to handle event:
<aura:handler name="onblur"
event="l_lookup:OnFocus"
action="{!c.handleFocus}"/>
Attribute for selected value and lookup:
<aura:attribute name="mySelectedId"
type="String" />
<l_lookup:Lookup aura:id="uniqueLookupId"
objectType="Account"
selectedRecordId="{!v.mySelectedId}" />
Action in controller:
handleFocus : function(cmp, event, helper) {
console.log('Lookup component Id: ' + event.getParam("cmpId"));
}
Additional examples you may find in the documentation.
2. Ability to change the selected value by code
This is very useful when you specify a default value for a particular action or condition. Sometimes there are such requirements that it becomes necessary to manipulate the value in the component through the code. Now it is possible. A new attribute and method have been added to the component.
Note: To use this feature, you need to specify aura:id. Without it, you can not evoke the method.
Attribute for changing value is setTo. We have to check the validation of the selected value in Lookup before it will be adjusted. For instance, there is an attribute queryCondition (described as a filter) to write a condition for filtering. In this case, you can only select users with a profile System Administrator.
At the same time, it is possible to change the selected value by coding (for example, there is a button, when you click it, the field is filled with the value Name)
If we have specified in the queryCondition that we can choose only the System Administrators and *Name* is not such – the value will not change because (Name) does not fit the condition.
To change the value by controller, you need to add attribute setTo and execute the method from lookup fireChanging(). Also, for this, you need to define aura:id.
E.g.:
Component:
<aura:attribute name="selectedId"
type="String"/>
<aura:attribute name="changeTo"
type="String" />
<l_lookup:Lookup aura:id="lookupId"
objectType="User"
setTo="{!v.changeTo}"
selectedRecordId="{!v.selectedId}" />
Action in controller to change record Id:
changeIt : function(cmp, event, helper) {
var newVal = cmp.get("v.changeTo");
cmp.set("v.changeTo", newVal);
cmp.find("lookupId").fireChanging();
}
Notice also:
- the value will be not set if readOnly is true
- the value will be not set if the new value is invalid
- the value will be not set if you use queryCondition attribute and the new value do not match the criteria
3. Customizable additional field
Specify your additional field, which will be displayed under the name and used as an additional field for searching. Previously, it used to work only for standard objects, following how the standard lookup works in Salesforce. Now you can specify your field, which will be displayed under the name and be used as an additional field for searching.
For more information about limitations and opportunities, read the documentation.
4. Additional filter
You may easily select users of a specific profile or accounts with a particular record type. Also, you may need to add a filter to the lookup. For example, you can choose users of only a specific profile or cases of only a certain status, and so on. To do this, a new queryCondition attribute has been added, in which you can specify an additional search term.
Be careful when adding a condition and ensure that it does not contain syntax errors.
Example:
<l_lookup:Lookup aura:id="uniqueLookupId"
objectType="User"
selectedRecordId="{!v.selectedUserId}"
queryCondition="Profile.Name = ‘System Administrator‘" />
Additional examples you may find in the documentation.
5. Exception handling
Avoid small mistakes. Now you can see the catch in the developer's browser console, where you will find a problem description and a solution hint. When writing the code, there is a possibility of making some mistakes, such as indicating invalid values in the attributes or missing the required attribute.
The component will tell you what's going on in the new version. If there is an error interfering with the correct operation of the component, it will look like this:
To make an error description less intrusive was not interfering with the page's structure. It's displayed in the developer's browser console. For example, an invalid value is specified in the additionalField:
<l_lookup:Lookup aura:id="lookupId"
objectType="Contact"
additionalField="Email"
selectedRecordId="{!v.selectedId}"/>
A few less global but also exciting innovations:
- Attribute isRequired includes red star by the label
-
- Attribute styleClass allows adding style grades to inputs
Bottom Line
Hope this guide was helpful for you. For more information, you may read the documentation. If you have any questions, do not hesitate to email us at contact@synebo.io or simply leave your comment below.
Editor's Note: This post was updated for accuracy and comprehensiveness in December 2021.
