Tag Archives: Lightning Component Dev

Lightning Prototypes Unmanaged Package

Recently, Ryan Headley, a Salesforce MVP and a co-host of System Dot Debug, announced that System Dot Debug is accepting Lightning Components from the Salesforce developer community to share on their podcast. To submit components, one has to provide an unmanaged or managed package. View this tweet for details.

To share the components I’ve developed for learning purposes over the last year, I decided to create an unmanaged package for this. Below are the components included.

Installation Instructions

  1. Install the unmanaged package using either the Production / Developer Edition Installation Link or the Sandbox Installation Link
  2. See the Blog Posts below for configuration and other details.

Field Set Form Component

This component allows one to create a one column form of inputs for an Object whose fields are configurable via a field set. It allows one to create or edit a record and is generic enough for most objects.

See the Field Set Form Blog Post for more details.

Field Set Form V2 Component

This provides the same functionality as the Field Set Form above but was redesigned to use the new in Spring 18 lightning:inputField and lightning:recordEditForm components.

See the Field Set Form V2 Post for more details.

Lookup Dropdown Component

This component provides a dropdown of all the parent records for a specified lookup or master-detail on a child record.

See the Lookup Dropdown Post for more details.

Field Set Record Display Component

This component provides a one column readonly display of fields to shown on a record detail page. The fields and their order are configurable using a field set and this uses lightning:outputField and lightning:recordViewForm components.

See the Field Set Record Display Post for more details.

Use showToast for taking Action After Lightning Record Edit

Whenever possible, I leverage the out-of-the-box Salesforce functionality to implement the desired functionality. One Lightning development feature I’ve used recently is the e.force:editRecord event. In a Lightning component, you can fire this event with a record id and that record’s default edit page will open in a new modal.

That’s great and saves a lot of custom coding, if that’s acceptable. However, after someone edits the record successfully, you’ll want to probably take some action such as updating the display to show the latest edits.

Problem: The force:recordSaveSuccess and force:recordSave don’t fire after the record is edited successfully, at least in Winter 18.

Solution: Use the showToast event to take action after a record is edited successfully.

In the handleToastMessage function, the code is checking for a specific “object saved message” and if it’s found, some specific actions are taken.

If you have a better way of doing this, please let us know in the comments!


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.

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?