Render nested content in widget view

BenRomlein — Mon, 10 Aug 2020 17:33:06 GMT

Using 4.X api and TypeScript to create a custom widget. I'm having trouble rendering nested lists. My render method renders a list of layer groups, and lists of layers within each group:

render() {

const groupList = this.viewModel.layerGroups.map((layerGroup: LayerGroup, i) =>

<div key={i} data-layer={layerGroup} onclick={this._expand} id={layerGroup.group}> {layerGroup.group}

{layerGroup.layers.map(layer => <div data-layer = {layer} class={layer.status==="active" ? CSS.layerActive: CSS.layerInactive} onclick={this._toggle}>{layer.name}</div>)}

</div>

</div>);

return (<div>{groupList}</div>);

}

The problem I have is that this renders the layer containers as children of the group element. Because of this, any time a click event happens on a layer (to call _toggle), an event happens on the group (inadvertently calling _expand), since the layer is within the group. How can I add elements to my VDOM so that they are appended, rather than added as children?

In other words, with nested lists like:

groups = [ { name: group1, layers: [layer1, layer2, layer3] } { name: group2, layers: [layer4, layer5] } ... ],
how can I get a structure like this:

<div id='group'>{group name}</div>
<div id='container'>
<div> Layer Item </div>

...
</div>

instead of what I'm currently getting:

<div id='group'> {group name}
<div id='container'>

<div> Layer Item </div>

...
</div>

</div>

Re: Render nested content in widget view

BenRomlein — Mon, 24 Aug 2020 16:31:11 GMT

I ended up breaking up my original render method into two functions, one to render the groups and one to render the layers. I added a renderable property (openGroup) to my viewModel, then changed the _expand method to set that property to whichever group was clicked. Then I added a condition to the render method that will call whichever function it needs (render groups, or render layers) depending on the value of the openGroup property.

topic Render nested content in widget view in ArcGIS JavaScript Maps SDK Questions

Render nested content in widget view

Re: Render nested content in widget view