Using UI Builder, display a tree of data with nested repeaters???

[DrewW]

So I have a data structure I need to display on a workspace.  It is three tables connected to each other.  So we have a structure like this and I need to display it in the same way as below.

• Type 1
  • SubT 1
    • Det 1
    • Det 2
    • Det 3
  • SubT 2
    • Det 4
• Type 2
  • SubT 3
  • SubT 4
    • Det 5
    • Det 6
  • SubT 5
• Type 3
  • SubT 6
• Type 4
  • SubT 7
    • Det 7
    • Det 8
  • SubT 8

So far the way I got it to work way setup a Data Resource for each table.  I then used a Repeater and put a Card Base Header and then another repeater and another Card Base header.  Like so

First Repeaters data source was easy.  Just point it at the first table, done.  The nested repeater is where my concern is.  Right now I'm using a script to copy the elements from the second table into an array when the SubT's parent is the same as the current parent repeater.  So with this code.

/**
  * @Param {params} params
  * @Param {api} params.api
  * @Param {TransformApiHelpers} params.helpers
  */
function evaluateProperty({api, helpers}) {
	var data = [];
	api.data.complaint_subtype_selections.results.forEach(function(item){
		if(item.type.value == api.item.value._row_data.uniqueValue) {
			data.push({
				label: "" + item.name.displayValue,
				size: "md",
				sys_id: "" + item.sys_id.value
			});
		}
	});
	return data;
}

So before I put in the third repeater in I would like to know if I'm doing this the hard way?  Is there a way to have the system on demand go get the data for the second table and eventually the third from the server with the correct filter using a Data Resource?  Right now my method is duplicating the data in memory and I don't like that but I would also like to keep the calls to the server down.

Any thoughts on this would be appreciated.

[Paul Bloem]

Running into a similar situation with nested repeaters. Feels like the "item" from the first repeater should be available in the second repeater's data bindings, but I don't see it either. Did you find out if there's a way to do this without code?

[DrewW · Accepted solution]

I found that the interface does not show it to you but you can manually enter

@item.value.<Property that is an array of items>

to get at what you need for the lower levels when the "Repeater" selection is not available.

As for the data I had to build a custom data resource that returned all of the data in the needed structure.  I could not find a good way to build as needed.  So I have to load all of the data into memory on the client but the server builds it for the client.

The only issue I'm running into now is trying to figure out how to update the data only when the number of records changes or the value in certain fields changes.  A record watch has no options for monitoring the count of records.  So my data resource is refreshing more than it needs to which is causing some delays at times.

[SeamusSmyth]

Hi @DrewW ,

how did you present the data to the user? which uib component did you use?

thanks

[DrewW]

I used Cards and nested repeaters to display the data since I needed to have buttons at some levels and text boxes at others.  I also found that the best way to get the data from the server was to use a transform source since there does not appear to be a way to tell the system to load different data a per item basis in a repeater.  Since I have built this thou there have been several updates to UI Builder that fixed picking the data you want from a repeater so that at least has gotten easier.