Up next in 10
Display Salesforce Lightning Web Component Data Table in Agentforce Output
Jun 26, 2025
This blog post will delve into:
Why use LWC Data Tables in Agentforce?
Designing your Apex Invocable Method for Agentforce compatibility.
Building a reusable Lightning Web Component (LWC) for data display.
Configuring Custom Lightning Types for seamless integration.
Putting it all together: A practical example with Product Search.
Blog Post:
https://www.infallibletechie.com/2025/06/display-salesforce-lightning-web-component-data-table-in-agentforce-output.html
Show More Show Less View Video Transcript
0:07
hello everyone in this video we are
0:10
going to see how to display Salesforce
0:14
Lightning data table using lightning web
0:17
component in agent force agent
0:21
the type of agent force agent I'm using
0:24
here is employee agent force agent
0:28
as of now this uh particular feature
0:32
whatever we are going to see um with the
0:35
lightning web component and lightning
0:37
data table is applicable only for agent
0:39
force employee agent we cannot make use
0:43
of this same lightning web component
0:45
display for other types like agent force
0:47
service agent so make sure the type of
0:50
agent force agent you are using is
0:52
employee agent force agent to test this
0:55
uh feature let's uh dive into a demo and
0:59
later we will come into the technical
1:02
side of it i'm going to
1:05
use a sales agent force agent the type
1:08
is still employee agent force agent i'm
1:12
going to say would
1:15
like to buy products
1:24
it is picking up the right uh topic for
1:27
me it is asking me to provide the name
1:31
and it is not the quantity but it is the
1:33
limit of uh the products which will be
1:36
displayed so I'm going to say name is
1:40
test and I wanted to see five products
1:48
so here I'm making use of a lightning
1:51
data table
1:53
inside my lightning web component to
1:55
display
1:58
the first thing is I created an apex
2:00
class in this apex class I will get the
2:04
product name and as well as the number
2:06
of records they wanted to see
2:09
i am fetching the product records
2:13
matching the name
2:16
and I'm limiting the number of products
2:18
they wanted to see
2:22
i have wrapper classes so that it can be
2:26
um passed uh back to the agent force
2:30
agent widget and then it will display
2:34
so this is the response that will be
2:37
passed back and then it will display
2:42
next thing is you have to create
2:45
lightning type
2:48
so here I created a lightning type
2:51
called product search response
2:54
inside this folder this is the
2:56
schema.json
2:58
so this is the JSON I'm using this is
3:01
the apex class and this is the wrapper
3:05
so
3:07
so it will look for product name and
3:09
product code
3:11
and this is my uh wrapper class
3:17
and uh inside the product search
3:20
response we have to create a folder
3:22
called lightning desktop genai and
3:26
inside that I have this renderer.json
3:28
JSON
3:30
here
3:32
I am making use of product search
3:35
lightning web component and this is my
3:39
product search lightning web component
3:41
HTML
3:43
where I'm using lightning data table
3:46
and this is my JavaScript so it will
3:50
return the response to this value
3:52
attribute or the value variable I'm
3:56
iterating each and every value and then
3:59
I am uh making use of this uh temper
4:03
products variable as an array and then
4:06
I'm getting the product name and product
4:07
code here
4:10
in order to make use of this lightning
4:13
web component as an output in the agent
4:16
force agent uh display I am making use
4:19
of lightning
4:21
aent force output
4:24
here I'm making use of list type
4:28
and uh for the type name I'm using
4:31
product search response so this product
4:34
search response is my
4:37
lightning type
4:42
so product search response is my
4:44
lightning type
4:46
so we should have an apex class to
4:48
handle the uh querying of records so
4:53
here I will have to display multiple
4:56
records so I'm using uh um renderer list
5:01
so this is my lightning web component to
5:04
display the lightning uh data table and
5:07
this is my lightning type schema and as
5:11
well as I have renderer.json
5:19
when you do this development
5:22
try to package Apex class lightning type
5:27
and the lightning web component in one
5:29
single package and deploy it if you
5:32
wanted to do the deployment one by one
5:35
then first create this Apex class next
5:41
uh create this lightning type and in the
5:43
lightning type
5:48
do not deploy it
5:51
and then create this lightning web
5:52
component and deploy it when you deploy
5:55
this lightning web component do not add
5:58
target configs
6:00
once you deploy the lightning type then
6:04
try to add this uh target configs back
6:07
to this lightning web component and
6:09
deploy it so that you will not have any
6:12
dependency issue
6:14
next thing is we should create an agent
6:18
action action for this apex class and
6:20
method in the output rendering use the
6:24
lightning type so here my lightning type
6:26
name is product search response so I
6:28
have selected it
6:36
so here I created a simple topic called
6:38
product interest
6:41
the instruction is uh very uh simple
6:43
like ask the product name and count use
6:46
the search product actions action to
6:48
fetch and to fetch and display the
6:51
products so we can fix it so here this
6:55
is the Apex action
7:04
so if you want to edit it you can click
7:06
edit in detail page and then you should
7:08
be able to select the output rendering
7:13
please check the video description in
7:15
the video description I have shared my
7:17
blog post from the blog post you should
7:19
be able to get the sample Apex class
7:22
Lightning type and the Lightning web
7:24
component code for your reference
7:34
i hope it was helpful
7:40
thank you for watching
#Internet Software