Lightning Lookup Component – <aura:if> workaround

For those of you having tried to implement the Lightning Lookup from my post: https://meltedwires.com/2015/10/31/salesforce-lightning-lookup-component-v2/

You may have experienced what appears to be a platform bug surrounding <aura:if> that results in the friendly, yet uninformative error: “Something has gone wrong. Cannot read property ‘childNodes’ of null. Please try again.”  Thanks to Vipul for finding this, it worked when I first published the article but clearly something has changed in the matrix.

After doing a bit of digging it seems to be related to the rerendering of <aura:if> in the AccountLookup.cmp. There’s a whole thread on it here. So until Salesforce apply a fix, I’ll post the workaround here.

Note: The bug doesn’t show up in the lookup component itself but in the example AccountLookup component.

The workaround is to use CSS to show/hide the <force:recordView> rather than an <aura:if>.

To do that we need add some style to the AccountLookup Component as follows by clicking the Style link in the Dev Console or adding the AccountLookupStyle.css to the bundle:

.THIS.hideme {
    display: none;
}

Next, we modify the AccountLookup.cmp to use a <div> instead of an <aura:if>:

<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable">
    <!-- Attributes -->
    <aura:attribute name="recordId" type="Id" description="The current record Id to display" />
    
    <!-- Event handlers -->
    <aura:handler name="updateLookupIdEvent" event="c:UpdateLookupId" action="{!c.handleAccountIdUpdate}"/>
    <aura:handler name="clearLookupIdEvent" event="c:ClearLookupId" action="{!c.handleAccountIdClear}"/>
    
    <!-- Lookup component -->
    <c:LookupSObject label="Account" pluralLabel="Accounts" sObjectAPIName="Account" instanceId="MyAccount" listIconSVGPath="/resource/SLDS092/assets/icons/standard-sprite/svg/symbols.svg#account" listIconClass="slds-icon-standard-account" />

    <!-- Record view -->
    <div aura:id="accountview" class="hideme">
    	<force:recordView recordId="{!v.recordId}" />
    </div>
</aura:component>

Finally we add a Renderer to the AccountLookup and override the rerender method to show/hide the <force:recordView> depending on whether there is an Id present. We can do that by clicking the Renderer link in the Dev Console or adding the AccountLookupRenderer.js to the bundle:

({
	rerender: function(cmp, helper) {
		this.superRerender();

		// Get the Id and Record View
		var accountId = cmp.get('v.recordId');
 		var accountView = cmp.find('accountview');

		// Show or Hide the Account View depending on the Id value
        if (!accountId)
        {
            $A.util.addClass(accountView, 'hideme');
        }
        else
        {
            $A.util.removeClass(accountView, 'hideme');
        }
    },
})

It’s not quite ideal, as the <force:recordView> appears to be rerendered asynchronously and you get the message: “Invalid Record Id or Record not accessible.” briefly appearing.

It should, however, get you round the problem for now.

Advertisements

Author, brainstormer, coder, dad, explorer, four chord trickster, gig goer, home worker, inquisitor, joker, knowledge seeker, likes: marmite, note scribbler, opinionator, poet, quite likes converse, roller skater, six music listener, tea drinker, urban dweller, vinyl spinner, word wrangler, x-factor hater, Yorkshireman (honorary), zombie slayer (lie).

Posted in apex, code, force.com, lightning, salesforce, Uncategorized
10 comments on “Lightning Lookup Component – <aura:if> workaround
  1. Vipul says:

    Hi Tony,I have some query regarding my lightning component, and it is not related to this post. And may be you can provide your advice , so the current situation is , I am implementing sfdc approval process using lightning cmp . And here is the bottleneck:
    When user clicks on custom “Submit Button”, status on the record field of custom object is to be changed from ‘value A’ to ‘value B’. So it means on some execution and all processing inside lightning , I want to refresh the parent sfdc page so that value should be changed but it doesn’t happens (but if I refresh the page F5 second time , value B reflects back).
    I have tried most of the JS syntax to refresh the sfdc parent page , but it seems not working.

    Please help ,
    Again thanks for all the advice/help you have been giving ..cheers 🙂

  2. Vipul says:

    1 information I missed to add :
    I have created a vf page in that VF page I have added my lightning component and then added inline vf page in page layout of my custom object.

    This is the way I am accessing

    • Tony Scott says:

      Hi Vipul, without seeing the code and screen it’s difficult to comment. However, I’m assuming what you are trying to do is refresh the standard detail page of your custom object. Since you’ve added your Visualforce page to a page-layout it will render that inner page as an iFrame. As such you have no communication between that frame and the parent frame. Salesforce serve up Visualforce pages from a different domain to prevent situations like this. If you open up the debug console in chrome you will likely see something like: Uncaught SecurityError: Blocked a frame with origin “https://mynamespace.eu5.visual.force.com” from accessing a frame with origin “https://.my.salesforcemynamespace.com”. Protocols, domains, and ports must match. You could write your own detail page for your custom object in Visualforce but I suspect this is overkill for your needs.

  3. Vipul says:

    Thanks Tony … at least I have some information now.

  4. Vipul says:

    Hi Tony, how are you?
    Your post https://meltedwires.com/2015/10/31/salesforce-lightning-lookup-component-v2/ , there is a “LookupSObjectController” , So I am writing the test class for it and flow is like , create a record of sObject , query it with all required field and store it in a list and then call the LookupSObjectController .lookup(‘Test’,’Test__c’), but it is not going inside the FOR loop and wrapper class. I have tried almost everything and not sure where is the issue.
    I have also tried @TestSetup in a different method.
    SO just wanna know your comments on the same.

    Thanks for your assistance.

    • Tony Scott says:

      Hi Vipul, sorry I’m away from my laptop right now. Since the query uses SOSL rather than SOQL you’ll need to mock the data returned. If you have a look in the Apex user guide it should give you the info you need.

  5. vipul says:

    Hi Tony, How are you.. and yes thanks. There is a different way for SOSL I got it. Something like… Test.setFixedSearchResults(fixedSearchResults);

    Okay , I found something new which I saw is already mentioned above in this new post, “Invalid Record Id or Record not accessible.”, it appears for a 1-2 seconds before the record loads and then it is gone . Earlier I was not using the Renderer but now I added it but still that message appears . I know it is standard error message from lightning and is there any way we can overcome it.
    Thanks for your assistance.

    • Tony Scott says:

      It’s down to the way Salesforce loads the record detail asynchronously. If the aura:if worked correctly it wouldn’t be a problem. You might get away with using a JavaScript settimeout to delay the showing of the doc to allow Salesforce to catch up otherwise you’ll have to live with it I think.

  6. Michael Beck says:

    Hi Tony, this is great! Question about . On Mobile this looks great, but in the browser (Communities template) it has a View Detail link that redirects to a blank page as a result of a missing /profile/ in the URL redirect.

    I am looking to use a workaround where I use SOQL to pull the same data from the . I made a separate component that does this to plug into your code:

    However because it has a separate Apex class I am having trouble getting the recordId to pass through?

    Any thoughts? Thanks in advance! And thanks for this great component!

Comments are closed.

About Me
Product Services Developer at:
FinancialForce.com
All views expressed here are my own. More about me and contact details here.

Enter your email address to follow this blog and receive notifications of new posts by email.

Copyright (there isn’t any, feel free to reuse!)

CC0
To the extent possible under law, Tony Scott has waived all copyright and related or neighboring rights to MeltedWires.com Examples and Code Samples. This work is published from: United Kingdom.

%d bloggers like this: