In our recent Skuid App-etizer webinar, we covered extending functionality for one of the most popular topics on the Salesforce Success Community: related lists. When it comes to related lists, here are some common requests we hear from customers:
- I need to be able to display more than just the 10-column limit.
- I need to inline edit a record quickly as opposed to editing in a modal.
- And from admins specifically: I want a default sort for my users and, with that, the ability to sort by more than one field. I also want my users to be able to show or hide fields at their discretion.
A couple of these long-standing features are highly sought after in the Trailblazer Community’s IdeaExchange. Check out these threads: allow related list sorting by more than one field and having more than 10 columns in a related list, for instance.
You could develop any one of these capabilities with custom code. And, while some occasions do call for coding, you want to be targeted when making any “to code or not to code” call. Why? Because coding will always be the most expensive option.
So, the goal of these Skuid App-etizer webinars is to discuss common code points to demonstrate how you can do that work declaratively using Skuid instead. During this webinar, Chris Stern, senior pre-sales solution engineer at Skuid, shared how to do just that. Specifically, he demonstrated how to extend the Lightning Account detail page using Skuid to display related Opportunities and Cases with advanced filtering, sorting, and interactive list capabilities. Let’s dive in.
Developer best practice: separating the data and visual layers
Before we get to the punchline, it’s important to establish this: Skuid splits out your management of pages into the data layer and the visual layer. That gives you the ability to go get any object (related or unrelated) and either tie them together or not and still have that rich layer of data on your page. And then you can separately configure how you want to display the data, be it in a table, chart, or form.
The ability to separate the data and visual layers is a good developer best practice alone, but Skuid allows you to bring this capability into the admin world so that an admin can set up their data layer, with access to all these objects and anything they might need, and then configure the way that data is presented to the end user.
In the case of related lists, that’s how Chris was able to demonstrate cross object interactions including filtering, in-line editing, and sorting on records from any object you need, even with different filtered views of those records. To get a complete overview of how to set up these lists in Skuid App Composer, be sure to check out the webinar.
Deploying the Skuid page in Salesforce Lightning
Skuid is a managed package that works natively in both Salesforce Classic and Lightning. You can also deploy Skuid in Communities and the Lightning mobile experience.
As you build Skuid pages by dragging and dropping components on the page, Skuid generates XML behind the scenes. So, it’s not creating Visualforce, Aura, Apex, or anything that might clash if you’re going between the Classic and Lightning experiences, and that allows it to be 100% native whether you’re building in any of those environments.
To quickly deploy a Skuid page within Lightning App Builder, open Lightning App Builder and you’ll find Skuid as a managed package on the bottom left. You can then drag the Lightning Skuid Page component into your canvas anywhere you want and point that Lightning component to the name of your Skuid page (Filtered Lists page in our webinar example).
And whether you’re using the Community App Builder or Lightning App Builder, that’s how you deploy a Skuid page. For larger-scale deployments, Skuid integrates with the Salesforce SFDX tool or you can use Skuid CLI.
Skuid helps you display related lists with advanced filtering, sorting, and interactive capabilities. All without writing code.
For the purpose of this demo, Chris walked through a sample Account Detail record page in Lightning next to the Skuid Page Lightning Component containing an Opportunities table and a Cases table he created in the Skuid App Composer.
When users arrive on the page, the view will be familiar to them and it won’t be a jarring experience to scroll down to the related lists. That’s because Skuid offers a Lightning design system out of the box so you can quickly match Lightning's look and feel if you’d like. In other words, your users won’t know the difference.
Skuid can also contextually display the right information for your users in a variety of ways. In this demo we leveraged the Account ID from the Lightning detail page URL and passed that into our query, ensuring we only saw records related to that account record.
How admins can improve the user experience
Many Salesforce admins want a default sort for users and, with that, the ability to sort by more than one field. This is easily configurable in Skuid. At the model level in the Skuid App Composer, you simply populate the “Fields to order records by” property with the fields you want to use for your default sort.
Ultimately, admins want users to be able to curate their own experience. For instance, they want users to show or hide fields so the Admin doesn't have to balance countless requests from users about which fields they want to see.
They also want to give users the ability to export table data.To provide this kind of end user personalization, when you’re building out the page within Skuid App Composer, simply check the boxes “Allow users to reorder columns” and “Allow column hiding.”
Those configurations also provide a three-dot menu on the top right of the Skuid table component that will allow users to export table data into a CSV. And as an admin, you can choose what fields get exported.
You have a lot of control over the end user’s options when it comes to interacting with this list.Another request we see a lot from admins is the ability to show more than 10 fields in a related list. This can also be achieved with Skuid, and the table will have horizontal scrolling to reveal any column that won’t fit within the display.
Given the challenges associated with horizontal scrolling, users can determine if they want a particular column to be “sticky” or frozen. And they can do all this without ever asking an admin to do it for them.
Skuid can also help with one of the most requested features we see, the ability to set up filters for related lists. In the webinar, we demonstrated a Closed Opportunities toggle and a multi-select filter for Stage.
Use conditional rendering to create interactive experiences
Another benefit to Skuid is that it lets you do conditional rendering of any of your components, even down to the individual field level. The rendering can be driven through a robust variety of logic, including data changing across other objects.
In the webinar, we showed how to conditionally render a column in the Opportunities table based on a field value from the Account record.In order to achieve this, you need to first get Skuid components listening to Lightning’s event publishing framework.
Within Skuid App Composer, go into your RelatedOpps model. In Advanced properties, check the box that says “Auto-sync with other Lightning Components” and save. For the purpose of the demo, Chris set up conditional rendering for the field “Lead Source.”
He set up the display logic to only render this column if the Account Type field is equal to Prospect. This is yet another powerful way you can make the experience most relevant for the user context, without building multiple pages to handle different variants. Last, users always appreciate charts and dashboards.
You set up charts by connecting them to the RelatedOpps model in the Skuid App Composer. And because the chart component is looking at the same Opportunities model that the table component is looking at, and because the filters are impacting that model’s query, when users update the filters, both the chart and the table will update accordingly in real-time.
This helps users do a quick slice and dice of data in the context of where they’re working and take action on it, as opposed to running a report that’s disconnected from the experience.
If you want to kick the tires on Skuid, everything we shared in the webinar is available for you to download in our Sample Pages Github repository which you can install in a dev org or sandbox. Specifically, check out our Sample Page for Related Lists. And if you have questions, please reach out to us in the Skuid Community.
