It’s been a while since I’ve posted anything on Lightning but now that I’m back in the thick of it, here are some additional tips I’ve learned from doing some more advanced, for me at least, Lightning work.
Checkout my Lightning Component Dev Tips and Lightning Component Dev Tips 2 for other tips.
Component.getReference For Dynamically Building References
getReference returns an object that can resolve itself at runtime or be able to bind to attributes. For example, you can dynamically attach event handlers to a component at run time.
Another example is dynamically binding to fields at run time. The use case is you have a field set or other metadata that defines a list of fields to display on a lightning component. If an admin wants to update the list of fields, they can easily do so without a developer updating the code. Unfortunately, this is not as straight forward in Lightning as it was in Visualforce. The following is NOT allowed to dynamically show a record’s fields.
getReference to the Rescue
When the list of fields are returned from an Apex callout, where the callout gets them from a field set or some other metadata, one can use the getReference function on the component to dynamically create a reference that will resolve to retrieving the field’s value from the record. Below is an example of that.
Now that the field value has been bound to the FieldValue on the Field, it’s a simple matter of iterating over it in the markup. Of course, you’d probably want to format the output further depending on the field’s type. For example, localizing a datetime or date field.
Another place where this was helpful for me was dynamically creating an input component and binding it to the component’s value field. This allowed for the two-way binding to still work for dynamically created components so that when the input value’s changed, it would also update the record’s value to easily allow the record to be upserted via an action.
Using the above helped in the creation of a FieldSetForm component that builds a dynamic set of inputs for a given SObject record driven by a field set.
Use “and” and “or” keywords in place of “&&” and “||”
The && and || operators are now allowed in the {! } component markup for some reason. Instead, use the “and” and “or” functions that take a list of predicates and evaluate as expected.
Event Parameters Are Pass-By-Value
When passing a Javascript object through a fired event in one component as an event parameter and it’s modified on another listening component’s event handler, the object’s modified state isn’t visible on the original component that fired the event.
In other words, an event’s parameters are pass-by-value and are copied instead of pass-by-reference.
Can’t Create div, span & Other HTML elements in CreateElement or CreateElements
The ‘Type’ parameter to CreateElement and CreateElements must be an Aura or Lightning component. It can’t be a simple HTML element such as “div” or “span”. Even though they get created successfully, they don’t render on the page.
What other tips do you have? Let me know in the comments.