How To Design Modern Custom Lightning Components

When developing custom Lightning components it makes a big difference if the component is visually appealing. While a lot of Salesforce developers are not “front-end” developers, it does not mean they cannot produce good looking components by following some basic UI/UX principals.

Lightning components by nature are independent components. This means they can be placed next to different component in different places within Salesforce and can adjust to different widths on the screen. Since it’s very likely our custom components would be placed right next to the Salesforce standard components, by making our components follow the same design principals our end solution would look cohesive.

Let’s cover a few basic principles:

Cards are the Base

You should use cards for almost every Lightning component you’re adding. To follow the same design pattern as Salesforce, use the title, icon, footer and actions section of cards. When developing a Lightning component use the tag to create these easily. 

Another small tip is to add to our card the “slds-card_boundary” class so that it has a border when we put the component inside tabs. That border really adds a lot to the component. Use the footer for links. Alternatively, if you have a table, it’s great for the pagination part. The actions section is great for any actions, filters or overall indicators.

Show Information

When showing information in our component we have a few good basic options. If we’re showing information about a specific record, we can display the information in the form of labels and fields. 
You can choose if you want the label to be in the same line or about the data you’re presenting. Things to keep in mind are:

• Make sure your component works well for every screen width, for wider screens show more information in every row and for narrow screen width have fewer data points in every row so that they collapse under each other.
• Very basic in any UI design, make sure all your labels and fields are aligned.

When we need to display multiple items, we can then choose to either use a table or tiles. When putting a table inside a card it usually looks well when the table is stretched all the way to the edges of the card. If you don’t stretch the table don’t forget to add borders on it.

If you’re not using a table, put a div inside your card with the class “slds-card__body_inner” to create some space between the content on your card and the edges of the card.

If you want to create a table, make sure you use the standard Salesforce data table design. You can choose between, column dividers, striped rows and fixed column width (use fixed width and truncation if you think you table data might overflow). If you’re using tiles, you can use the standard tag .

Other basic ways to show information are in a timeline:

And a slightly different way to present information can be a list of tiles or another card with the main image which looks very good for products:

The last one when we want to show some of the main KPIs of our solution, we can use a card with nice styled numbers and labels:

Capture Information

When capturing information there are usually fewer options. The most common one is a form. Same as before, make sure all your form items are aligned. You can choose between having the labels of your input fields above them or next to them.

The is very handy when creating input forms, it allows us to give a great user experience of client-side validations without a lot of development. We can also capture different types of data in the right format by setting a few attributes.

Another way we can capture information on multiple items at the same time is by using a table. When allowing a user to add multiple items at the same, make sure it’s easy to remove items and add new items. Also, use the “label-hidden” variant as it won’t look well that every row repeats your label, especially when we have our table column header specifying what is the content of the field.

That’s pretty much it for collecting information. You can make it appear nicer by showing the same input forms in a modal or within a wizard with multiple steps. 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Thanks for reading, if you enjoyed this post please feel free to share it and tag us @Pexlify.

If you’re interested in Salesforce Solutions, contact us today to set up a hassle-free consultation.