Tag Archives: Lightning


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.

Coming Soon to Boostr: “View Offending PB or Flow” link in Lightning

In BOOSTR: VIEW FLOW OR PROCESS BUILDER CAUSING ERROR, the “View Offending Process Builder or Flow” link works in Salesforce Classic BUT not in Lightning Experience (LEX).

I implemented the Boostr code so now it will. A future release, coming soon, will have this functionality.

Technical Bits

This Boostr Pull Request shows how it’s implemented in Javascript.

High-level Algorithm

  1. If in Lightning Experience, add a mutation observer that reports whenever a DOM element is added or removed on the page.
  2. When the DOM changes, is the Flow Error text added?
  3. If yes, create the “View Offending Process Builder or Flow” link and append it to that error message node.

Why It Didn’t Work in Classic?

The reason is the way that Boostr for Salesforce works. When a Salesforce page is opened, it inspects which page is opened and adds the page specific features to it. For example, when the generic flow error is opened, it adds the View… link. It doesn’t look for changes to the page.

In Lightning, since it’s a Single Page Application (SPA), the page is loaded and then dynamically generated via Javascript. A new page isn’t opened when you click different links and buttons. You’re still on the same page but its contents change as different actions are performed. Since the generic flow error page is never loaded, that’s why the link never showed.

Have a feature you’d like to have in Boostr? Submit a feature request issue in GitHub and a contributor may implement it. Or you can implement it yourself by following the Contribution instructions.

Lightning Component Dev Tips 2

Here are additional dev tips that I’ve learned in the past week from being in the trenches. See Lightning Component Dev Tips for other dev tips.

Set Component Attribute Again To Rerender

I’m leveraging a complex, nested object hierarchy for my main component attribute. This object has nested nodes and each node may have additional sub-nodes. A user can interact with these nodes in various ways and so each one may get updated. One thing I discovered was that updating an attribute’s “child objects” didn’t automatically update the component’s view, even though I may have used them in the view with the {! v.Object.ChildObjects…} syntax. This is quite unfortunate because other SPA frameworks such as Angular are smart enough to attach watchers to the object properties and automatically rerender the view appropriately.

To resolve this, set the component’s attribute again in the controller code and the framework will rerender the view. I.E. component.set(‘v.attribute’, attributeValue);

Leverage Existing Components Such as Lightning Strike IO

Whenever possible, leverage existing frameworks and tools so you don’t have to reinvent the wheel. Ideally, this would be open source software so that you can contribute and enhance them too, if desired.

For example, I discovered that there’s no lookup Lightning base component, which was totally unexpected after Lightning has been out for 2 years! I didn’t want to implement this myself so I searched around and asked around about it. Craig on Slackforce pointed me to Lightning Strike, an open source project containing commonly used Lightning components that aren’t or weren’t part of the Lightning base components.

After installing the components in my dev org, I had the strike_lookup component configured and in use within 5 minutes.

Leverage Tokens

Leverage Tokens to define your CSS values and reuse them throughout your components in your codebase. This allows a more consistent UI to be more easily developed and more importantly, maintained. If you have to change your margin from 1rem to 1.5 rems, update the token in one place and everywhere it’s used inherits it automatically.

This is another application of the Single Responsibility Principle.

What dev tips do you have?

What Lightning component architecture resources do you use?

Lightning Component Dev Tips

After officially starting my first “work” Lightning component, here are some tips learned so far when developing a lightning component.

Disable Browser Caching In Dev Sandboxes

One thing I noticed immediately was that after saving changes to a component, you have to refresh the page at least twice for the latest changes to be seen. Given that Lightning takes, at least, 2-3 seconds per page load, this really slows down development time.

The answer is to disable the “enable secure and persistent browser caching to improve performance” Session Setting.

Classic Steps

  1. Open Setup in Salesforce Classic. I haven’t found this setting in Lightning Setup yet.
  2. Under Administer, Security Controls –> Session Settings.
  3. Uncheck “enable secure and persistent browser caching to improve performance” under caching.
  4. Save at the bottom of the page.

Lightning Steps

  1. Click the gear at the top right and click Setup.
  2. In the left nav, expand Security and click Session Settings.
  3. Uncheck “enable secure and persistent browser caching to improve performance” under caching.
  4. Save at the bottom of the page.

Many thanks to the Slackforce community, especially Matt Simonis and Craig Ceremuga, for sharing this information.

Debugger; & Breakpoints Are Your Friend

With much of the Lightning framework handled on the client side in the browser, one can leverage the browser’s debugging tools to troubleshoot and step through Javascript as needed.

I’ve returned to an old friend, the “debugger;” statement, to put in temporary programmatic breakpoints in my Javascript code so I can inspect the code as it runs. This has been especially helpful troubleshooting AJAX calls from the component controller and troubleshooting events.

Attach Browser Events To Container Elements

One problem I’ve ran into is that sometimes a Lightning base component, such as a lightning:card, doesn’t have an event handler that I need such as “onclick”. Also, the framework disallows adding custom event handler attributes to Lightning base components that don’t support them and you’ll get a compiler error if you try.

My solution is to wrap the Lightning base component in another HTML element, such as a div, and attach the desired event to it.

I’m not a big fan of this workaround but it’s easier than using one of the “aura” components and then styling it for Lightning. If you have a better way to do this, please share in the comments below.

Attach Data To Element Data Attributes For Later Use

To the best of my knowledge, you can’t pass parameters directly into a browser event method handler when it happens. For example, you can’t do this:

In order to access some contextual data in the event handler, I’ve resorted to adding “data-” custom attributes to HTML elements that can then be accessed by event handlers in the component’s controller. This has been particularly helpful for elements that are rendered from within an aura:iteration, usually when iterating over records. Here’s an example of this approach:


Component Controller

Leverage the Lightning Design System Styling

Use the Salesforce Lightning Design System (SLDS) to ensure your components will look like Lightning. Don’t forget you can add slds- classes to your elements to easily stylize them!

Leverage the Lightning Component Developer Guide

The Lightning Component Developer Guide provides an in-depth resource at developing Lightning components. It also acts as a good reference for the aura and Lightning base components.

What tips do you have for developing Lightning components?

Reflecting on 10 Months in Business

While it’s technically a week shy of 10 months, close enough.

What’s New

Awesome New Client!!!

This contract started in April and it’s been great. The people are smart, friendly, know what they want, and are easy to get along with. I was onsite for a week and provided training and other services. Also, the work is interesting and I have the opportunity to do more Lightning development.

Turned down additional work.

The prospect from March reached out to me recently asking if I’m available for an urgent project they have but unfortunately I’m not. Instead, I referred them to some colleagues who will provide what they need. We kept the door open for future engagements.

More Lightning Development.

I’m currently implementing my first official Lightning component that’s like a Kanban board where one can drag-n-drop various items from one column to another.

Overall, the UI looks better but currently I still prefer developing, from a developer’s perspective, in Visualforce because performance is better, the amount of coding required is less than Lightning since more code is needed for basic plumbing and wiring, and the overall infrastructure is better.

There are also little things, such as Locker Service, that drive me nuts in the name of security. For example, I can’t add a custom attribute to a Lightning base component or even add an onclick event attribute to one.

Another little thing is always having to remember to add the v. prefix in {! v. } bindings to access attributes. I wish specifying the attribute alone was enough like it was in Visualforce and the framework could figure out where the binding originates.


Matt Addy and I started a Salesforce Slack team named Slackforce where Salesforce professionals can hangout and have real time communication with others. See Introducing Slackforce for more detail and on how to join.

One nice, somewhat unexpected, benefit of Slackforce is that it has helped fill the “Missing Professional Camaraderie” void by helping connect to many great professionals I’ve worked with in the past and present.

Changed Student Loan Payment Option

When I started the business, I changed my student repayment option to the graduated, extended 25 year plan so that my monthly payment would be the lowest possible because my revenue expectations were projected but unknown at the time.

With business doing well and my confidence in it steady, I’ve switched my student loan payment back to the graduated plan so that I can still pay the loans off within the original 10 year timeframe, which is in 4 1/2 years.

What’s Next

More Lightning

This recurring theme will most likely stay for a while since more and more people are showing interest in it. Additional blog posts are coming too.

Learning Other Salesforce Technologies

With Salesforce, there’s always something more to learn. Besides Lightning, I want to learn more about:

Platform Events – This native messaging bus could be very interesting for integrations and other pub-sub type architectures.

DX – I am now in the pilot but have to still try it. It’s on the backlog.

Einstein – Another thing on my learning backlog.

Keep Expanding the Network

Slackforce has helped with the networking goal but I want to keep expanding so I’ll do this by getting more involved in the community by attending conferences, meetups, open source projects, and other activities.

No Upcoming Product

I’ve given some serious thought about doing a Salesforce product but have decided against it for now because I’m not that passionate about the product idea I have. If I’m going to build something, I’m going to be passionate about it.

How’s your business or professional goals going for 2017 and how will you reach them? What’s your experience with Lightning been like?

Related Posts