How to display Lambda response records in a table with row actions and detail view in Amazon Connect UI

Question

Hi, I'm working on building an Amazon Connect view and need some guidance on implementing a specific UI requirement. My setup is as follows:

* I receive data from a Lambda function, and the response structure matches the JSON content below. Each record contains fields like *StartDate, EndDate, EntitlementName, EntitlementStatus*, etc.

* The UI layout is split: the left 30% of the screen is an Attribute Section (for showing details of a selected record), and the right 70% is a table listing all records.

My requirements and challenges:

1. I want to display the records in a table with 3 main columns (e.g., *EntitlementName*, *EntitlementStatus*, *StartDate*).
2. Each row in the table should have a custom button (e.g., “View Details”).
3. When the button is clicked, all details of that particular record should be shown in the Attribute Section on the left.
4. I’m unsure how to add a custom button for each row and wire up the action so that clicking it updates the Attribute Section with the selected record’s details.

Could anyone provide guidance, sample code, or point me to tutorials/blogs that cover this kind of UI pattern. Any best practices for handling this interaction in Amazon Connect Views would also be appreciated.

```
{
  "statusCode": 200,
  "body": {
    "entitlements": [
      {
        "StartDate": "01/01/2025",
        "EndDate": "12/31/2025",
        "EntitlementName": "SAMPLE ENTITLEMENT",
        "ExternalNumber": "12345",
        "Notes": "Demo data for forum post.",
        "EntitlementId": "DUMMY-ENT-001",
        "AgreementName": "Demo Agreement",
        "EntitlementStatus": "Current",
        "EntitlementType": "DemoType",
        "CurrentQuota": "10",
        "InitialQuota": "10"
      },
      {
        "StartDate": "01/01/2024",
        "EndDate": "12/31/2024",
        "EntitlementName": "EXPIRED ENTITLEMENT",
        "ExternalNumber": "54321",
        "Notes": "Expired demo data.",
        "EntitlementId": "DUMMY-ENT-002",
        "AgreementName": "Demo Agreement",
        "EntitlementStatus": "Expired",
        "EntitlementType": "DemoType",
        "CurrentQuota": "0",
        "InitialQuota": "5"
      }
    ]
  }
}
```

Thank you!

Eric Robles · Accepted Answer

Should you use HTML or the No-code JSON UI?
	•	Use the JSON / No-code UI Builder for your case. You already have the Lambda response in Contact attributes, you’re not using API Gateway, and you want a table + “View details” without hosting anything. The No-code view can bind directly to contact/view data, no extra infra, no CORS, no S3 site.  ￼
	•	Use HTML (URL view) only if you need full custom styling/logic and you’re OK hosting a page and wiring security/CORS yourself. HTML gives total control but adds ops overhead.  ￼

⸻

How to do it with the No-code UI Builder (table + row button + left-side details)

A) In your flow
	1.	Lambda block → return your entitlements array (exact JSON you posted).
	2.	Store it as a Contact attribute (stringify JSON if needed).
	3.	Show view block → open your custom View and pass the JSON as view input (block supports passing complex JSON).  ￼

B) In the No-code UI Builder (create the View)
	1.	Add a two-column layout: left 30% panel (details), right 70% (table).
	2.	Table component:
	•	Data source: bind to the JSON you passed (e.g., view.input.body.entitlements or to the contact attribute if you didn’t use Show View input).
	•	Columns: EntitlementName, EntitlementStatus, StartDate.
	•	Row action button: label “View Details” → Action: set view state selected = this.row.
	3.	Details panel (left):
	•	Add a Key/Value list (or multiple text fields) bound to state.selected..
	•	When nothing is selected, show “Select a record → View Details”.

The No-code UI supports dynamic fields so you can bind component properties to runtime data (contact attributes or the view’s input) without code.  ￼

C) Optional alternative
If you prefer to skip contact attributes for large payloads, pass the JSON only through Show view → Input and bind the table to view.input.... (AWS explicitly supports passing complex JSON to Views.)  ￼

⸻

Why this beats the custom HTML approach for you
	•	No hosting / no CORS / no API Gateway needed.
	•	Native: lives inside Agent Workspace; permissions & data remain in Connect.
	•	Faster changes: you edit the JSON view config, not code.  ￼

⸻

References (for the exact knobs you’ll click)
	•	Views & Agent Workspace basics (how Views work)  ￼
	•	No-code UI component library (table, key/value, actions)  ￼
	•	Show view block (pass complex JSON into a View)  ￼
	•	Dynamic fields (bind UI to contact/view data at runtime)  ￼
	•	Display contact attributes in views (if you keep it in attributes)  ￼

Eric Robles · Answer

Attributes

Select a record → “View Details”

EntitlementName	EntitlementStatus	StartDate	Action

Loading…

re:Post Agent · Answer

To display Lambda response records in a table with row actions and detail view in Amazon Connect UI, you can use the Show view block with a combination of List view and Detail view components.

First, ensure your Lambda function is properly configured to return the entitlements data in the format you've shown. The output from your Lambda function should be a flat object of key/value pairs, and the size must be less than 32 KB of UTF-8 data.

To implement your UI requirements:

1. Create a flow with a Lambda function block to fetch your entitlements data.

2. Add a Show view block after the Lambda function block.

3. In the Show view block properties, you can use the List view to display your table of records and the Detail view to show the selected record's attributes.

4. You can customize the view using JSON in the Show view block. Here's how you might structure it:

For the List view component (right 70% of the screen):
- Configure it to display the EntitlementName, EntitlementStatus, and StartDate columns
- Add a "View Details" action button for each row
- Set up the action to update the Detail view when clicked

For the Detail view component (left 30% of the screen):
- Configure it to display all attributes of the selected entitlement record
- Initially, it can be empty or show a default message

You can use the Views UI template in the Amazon Connect admin console to build the JSON object structure. Navigate to your instance, go to Routing > Flows, select the Views tab, and use the UI template to create your layout.

If you encounter schema errors when configuring your JSON, make sure your JSON structure matches the schema criteria for your contact flow. For example, if you're using dynamic fields in your List items, ensure the schema properly defines the expected data types.

The Show view block properties will be dynamically populated based on which View resource you choose, allowing you to configure the necessary actions for your table rows and detail view interactions.  
**Sources**  
[Flow block in Amazon Connect: Show view - Amazon Connect](https://docs.aws.amazon.com/connect/latest/adminguide/show-view-block.html)  
[Customize views for the Amazon Connect agent workspace by using HTML and JSX - Amazon Connect](https://docs.aws.amazon.com/connect/latest/adminguide/customize-views-jsx-sg.html)  
[Troubleshoot step-by-step guide schema errors in Amazon Connect | AWS re:Post](https://repost.aws/knowledge-center/connect-step-by-step-errors)  
[Grant Amazon Connect access to your AWS Lambda functions - Amazon Connect](https://docs.aws.amazon.com/connect/latest/adminguide/connect-lambda-functions.html)

How to display Lambda response records in a table with row actions and detail view in Amazon Connect UI

Add your answer

Relevant content