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.

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.