How to obtain clicked ID of a nested object that is stored within an HTML component template

[AJVancattenburch]

Okay, this is a problem I have been spending way too long trying to solve, let alone elegantly.

Overview:

• Data Structure: We have 2 arrays of data (segment 1 and segment 2) in which we display one of these arrays conditionally. Each array has multiple levels of nested data with the following structure:

  [
      {
      	"SEGMENT_ID": 2,
      	// ...other keys / values
      	"portfolios": [
      		{
      			"PORTFOLIO_ID": 5,
      			// ...other keys / values
      			"clusters": [
      				{
      					"CLUSTER_ID": 26,
      					// ...other keys / values
      					"groups": [
      						{
      							"OPERATION_GROUP_NUMBER": "XXXXX",
      							// ...other keys / values
      							"entities": [
      								"XXXXX",
      								"XXXXX"
      							],
      							"xData": [
      								"Feb-25",
      								"Jan-25"
      							],
      							"yData": []
      						},
      						{
      							"OPERATION_GROUP_NUMBER": "XXXXX",
      							// ...other keys / values
      							"entities": [
      								"XXXXX",
      								"XXXXX",
      								"XXXXX",
      								"XXXXX"
      							],
      							"xData": [
      								"Feb-25",
      								"Jan-25"
      							],
      							"yData": []
      						}
      					]
      				}
      			]
      		}
      	]
      }
  ]
  

• HTML Structure: In our transformer, we loop through this data to create the HTML for our HTML component. Below is the section of our HTML where we attempt to invoke an action that will get the ID of the clicked HTML element:

   <div class="button" data-click-target="${group?.OPERATION_GROUP_NUMBER}" data-id="${group?.OPERATION_GROUP_NUMBER}">…</div>
  

• Goal: We want to be able to target this data-click-target or data-id attribute on the above div element so we can pass it as a variable that stores the OPERATION_GROUP_NUMBER that was clicked, but you cannot set data within a transformer, only a query. I have been struggling on exactly how to capture that ID from our HTML element within our HTML template so we can use that ID to display more granular metrics about that specific operation group.

We had to build this as a custom HTML component as the table component offered by retool has some shortcomings when it comes to properly displaying aggregated metrics for this complex data, which is a table we built that has collapsible rows for each level (segment level > portfolio/market level > cluster level > operation group level).

Does anyone have any insight on the best way to go about this when working with nested for / of loops of complex data from an HTML element from within an HTML component?

I'm also happy to provide any other details like code snippets, etc. for further clarity. I just didn't want to post a long slew of code unless prompted as it is a lot to look at.

Any information would be appreciated from anyone who's had to configure data for a similar situation! Thank you in advance, retool community!

[Tess]

Hi @AJVancattenburch,

Thanks for reaching out!

I think it's a little hard to visualize without the transformer

I made a simplified example with dummy operation group numbers and passed only the groups array into my html component:

I mapped over the groups and returned the html from your code snippet above with slight modifications (quotes `` around the html, remove the double quotes around the target and id, and add a button label Test). It successfully triggers confetti only when the first "button" is clicked.

You could also do all of the above code in a transformer and then make the transformer your html data source.

Not sure if this helps at all, but happy to take a look at your transformer

[AJVancattenburch]

Hey @Tess! I appreciate the reply. We actually ended up needing to go with building and deploying a custom component.

We had some shortcomings with what the HTML component was able to handle -- as with our complex and large data source we weren't able to run a query on a deepest level of aggregation to get an id of a clicked button...at least not without performing a really hacky solution.

Creating a custom component utilizing .useState method options from the retool library along with .useEventCallback to get a returned ID on click ended up solving our problem.

[Tess]

Got it! Thanks for the update Makes sense, the custom component is a lot more powerful - glad to hear it worked for your use case!

[AJVancattenburch]

Honestly -- I am thrilled it ended up needing to be a custom component I've always been overly fascinated with front and back end development. So being given the opportunity to learn how to infuse the power of retool with a component you can code from scratch is an amazing experience that I can't wait to delve into further!