Lightning User Experience and User Interface Patterns

Using SDLS Grids and Base Lightning Components for
Responsive Application Design

Philippe Ozil provides a deep-dive into the Salesforce Lightning Design System grid and how developers can leverage the grid for responsive component design by implementing out-of-the-box base Lightning components.

In this article you will learn about what the SLDS grid is and how it works, as well as how you can implement the grid using the base lightning:layout and lightning:layoutItem components.

Using Toasts and Modals for User Notifications

Philippe Ozil provides us with patterns and best practices for displaying notification messages to users with user interface patterns called Toasts and Modals.

Philippe demonstrates how to display Toasts in Lightning Experience and Salesforce1 by leveraging an event that is native to the underlying one.app container application. For Modals, he wrote a custom component and is freely sharing his code for developers to review and reuse.

UI Pattern for Uploading Files to Salesforce in Lightning Components

Although Salesforce plans to introduce a basic file upload component in the future, as of Spring 2017, there is none for Lightning components. This article covers one of two methods for creating a file uploading component. This brief tutorial is for developers who are already familiar with Lightning Components. It also includes a 4-minute video showing the process and results.

Jaswinder Rattanpal shows how to how to build a file uploader in Lightning components using Visualforce by attaching them to a Salesforce record. His method allows the Lightning component to communicate with Visualforce. Once the upload process is complete, Visualforce will display a success or error message.

Jaswinder’s Visualforce approach allows uploading larger files (up to 10 MB) in Lightning Experience through Lightning components. Presently the Visualforce view state is limited to 135 KB. This component can be dropped onto any record.

All source code used in this post is available in a GitHub repository.

A Pattern for Implementing Pagination in Lightning Components

Piyush Soni gives us a pattern for implementing pagination in Lightning Components.

Pagination is a pattern that provides data in “pages” of a set number of rows or records, with navigation controls to navigate the user through the pages of data.

Typically the navigation patterns come in the form of buttons or links that use terminology such as “FIRST,” “LAST,” “PREVIOUS” and “NEXT.”

This solution is solid but it does have a couple of potential limitations as it uses calls to an Apex controller method, and that method uses a SOQL clause called “OFFSET” to skip over the specified number of records returned by the query.

Calling the Apex controller every time you need data will subject you to potential performance bottlenecks as you are leaving the Lightning Component Framework to traverse the network and retrieve additional data from the server. The round trip itself has a cost, and the amount of data that gets returned from the server could have a very high cost from a network perspective, especially in low bandwidth situations.

The “OFFSET” clause has a limitation of 2,000 records that it can skip, after that you’ll throw an exception. This requires some defensive coding, such as adding a “LIMIT” clause to the SOQL query to ensure that you don’t get back more than 2,000 records.

Piyush provides all of the code for his solution, so if you are exploring pagination options in Lightning, this is a good resource to review to generate ideas.

Deep Dive Into Implementing Pagination in Lightning Components to Improve Component Performance

Sara Morgan Nettles provides us with another pattern for implementing pagination in Lightning Components, very similar to the pattern introduced by SFDC Monkey.

Sara details a robust solution that includes example code, but the same caveats of using the SOQL “OFFSET” clause for pagination apply.

Use this post to learn about pagination patterns and how to apply them to your Lightning Components.

Comparing Strategies for the Conditional Rendering of Lightning Components

The official Lightning Developers Guide recommends using CSS to toggle markup visibility. However, Sara Morgan Nettles suggests the best method might be to use the built-in aura:if component.

Sara explains that Christophe Coenraets’ method for using aura:if results in performance warning messages in your console output. Her simple fix when following the aura:if approach is to add a second attribute called isError.

As Lightning design patterns and best practices emerge, understanding the rendering lifecycle of Lightning Components will enable developers to build high-performing components and applications.

Overview of Out-of-the-Box Base Lightning UI Components That Apply Salesforce Lightning Design System (SLDS) Styling

In the Winter ‘17 release, Salesforce introduced Base Lightning Components in an attempt to reach parity with out-of-the-box Visualforce components. In this blog, Sara Morgan Nettles gives an overview of how Base Lightning Components work.

Different from the legacy components in the ui:* namespace, these new Base Lightning Components implement Salesforce Lightning Design System (SLDS), have built-in validation, and simplify the code required to implement them.

Most developers can’t afford to waste time tracking down specific CSS tags as well as add custom validation code to the JavaScript controller. Base Lightning Components provide an out-of-the-box solution for developers for entering and displaying data.