Implementing a Grid UI with Interactive Buttons in Amazon Connect Agent Workspace

Question

Hi,

I'm currently working on customizing the Agent Workspace in Amazon Connect and need some guidance on creating a grid-like user interface. My goal is to display data in a tabular format similar to the one below, where each row ends with a button. When this button is clicked, I want to capture the action and trigger a transfer to another flow block.

Here is the layout I am aiming for:
| First Name | Last Name | Action|
| --- | --- | --- |
| John| Doe| Click Button|
| Jane| Doe| Click Button|

I understand that the List component in Amazon Connect Views can be used for similar purposes but it doesn't seem suitable for representing tabular data. I tried to use HTML Box component but the problem with that component is that I cannot capture Button Click; clicking button does not do anything. Is there a way to create a grid with buttons that can capture user interactions and connect to different parts of a flow? Any suggestions or examples would be greatly appreciated!

Thank you in advance for your help!

JD · Answer

This sounds like you want to (effectively) create a custom page that still has access to the data from the incoming events. Probably the easiest way to accomplish this today would be to build a standard HTML page and use normal JS to trigger your actions, call APIs, etc. Then integrate the page into Agent Workspace using the [Third-Party apps](https://docs.aws.amazon.com/connect/latest/adminguide/3p-apps.html) feature. There is also a section in the [Agent Empowerment Suite workshop](https://catalog.workshops.aws/amazon-connect-agent-empowerment/en-US/third-party-applications) that can help you get started. This will giver you the most control over the UI.

Implementing a Grid UI with Interactive Buttons in Amazon Connect Agent Workspace

Relevant content