How to build a custom lightning component related list with real-time REST data. For this tutorial, I’ll show a technique on how to integrate external data and display the data real-time as a related list in Salesforce. This would not use an external object but a simple custom related list component that uses lightning:datatable base component and a controller than retrieves data via callout to an external REST resource and display them in Salesforce.

This is how it would look like.

For this, I’m calling this a static REST resource that returns the following JSON response.

Next, we need to display this data in a related list in Salesforce. We create a simple lightning component that we can add using Lightning App builder.

Start with the following lightning component markup.

And controller that calls a helper.

The helper creates a server-side call that creates the REST callout. Then on the successful response, I’m setting the value for the mycolumns attribute by assigning a Javascript object assigning the properties of the column for the datatable. Then I simply assign the mydata attribute assigning and using JSON.parse to turn the response to a Javascript object. With that simple code, I have a related list.

Note: you do not need the var actions as this is for another method I’m working on.

Then for my controller, I have this simple call to my server

Then I simply drop the component on Lightning App Builder to the related list section for a quick UI match. That should be it.

Recommended Books: