7

As per the LC documentation and answers to the below questions:

1.Jquery selector is not working properly in subsequent loads in lightning component.

2.DOM modification feasibility in lightning.

It's clear that,DOM manipulation should be done afterRender,which makes sense.

But if i were to use 3rd party libraries(like charts,fullcalendar,jquery...) ,then they are not available when the afterRender is called,which really a problem.So only the way to make sure the libraries are available,before i could use them in the helper is using afterScriptLoaded.

So which implies ,the code is doing DOM manipulation outside the renderer which conflicts with above answers and the docs.

So My question is,

1.Is there's a way ,to do the DOM manipulation using 3rd party libraries in Renderer.if so how can i make sure libraries are available in helper?

2.Is it okay,to do the above in afterScriptLoaded?

I really need a clarification on the above,so that i can properly follow the best practices in LC.

Improve this question
1
  • 3
    I'd really like to see a good answer for this question and not only from the Best Practice point of view, from the Security Review process point of view as well. We had to remove every 3rd party library from our app because it was a real pain during the Security Review process.
    – Vrakmhare
    Commented May 16, 2016 at 8:47

2 Answers 2

Reset to default
8

Those restrictions were never correctly stated and I have been working with the App Exchange review team and our technical writers to get this corrected. That "requirement" was only meant for DOM elements that the LC framework creates and manages on your behalf. It was never meant to include DOM subtrees you create yourself or via React, Angualr, etc. Trying to stay inside a renderer method is an unnatural act for DOM nodes you create and manage.

BTW I write and published ltng:require over a year ago in response to our security review team requiring a Salesforce approved way to load external JavaScript and they were involved in the design of the component and its event model. I only found out recently that we were communicating a very mixed message on this and apologize on the company's behalf for the confusion.

The other part of the AppExchange policy on 3rd party JavaScript that we are also addressing with Locker Service starting with the initial (phased) rollout now in Summer'16 and into Winter'17 is allowing their use in the first place. One of my main goals of the LS project has been to get everyone to "yes" on allowing 3rd party libraries in published/listed packages. Once LS is fully deployed - current schedule is for this to be completed in Winter'17 (safe harbor of course) - 3rd party libraries will be approved. The time to start doing your part is now though - take the the time do the work to make sure your JavaScript is LockerService compliant. LS is available in Summer'16 - the prerelease version is a bit rough around the edges but we have addressed all but a few issues in the "R0" release starting to rollout to production servers in the next few weeks. I will be working on those remaining issues (mostly uses of undocumented or non standard APIs that we have to security review and in some cases write a new LS secure virtual object/method to handle). In at least one very recent case a Lightning Platform internal API was being used but instead of just saying No we are discussing exposing it as part of the public/supported API.

Improve this answer
1
  • 1
    Much awaited thing. We are stuck at the Security Review process due to this.
    – Pintu Francis
    Commented May 17, 2016 at 4:49
2

Praveen,Peter

The issue here is to be able to invoke the rerender() method of Renderer, when we want it to. We are able to achieve this by using following approach :

  • We go to a helper method using 'afterScriptLoaded'

  • In the helper method we fire a dummy event(which is not handled anywhere) after setting a boolean(firing an event always invokes re-render life cycle).

  • and in the rerender(), we perform all the plug in related logic depending on the boolean's value.

Can you try this approach and tell if this works for you.

Thanks

Improve this answer
1
  • Quoting the text from Doug's answer Trying to stay inside a renderer method is an unnatural act for DOM nodes you create and manage,which makes it clear that DOM created/managed by the ext libraries can be done outside the renderer.
    – Praveen
    Commented May 23, 2016 at 8:30

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .