topic Re: Hub-components Gallery not accepting facet list in ArcGIS Hub Questions

Hub-components Gallery not accepting facet list

sccwrp — Wed, 04 May 2022 21:16:40 GMT

I am able to create a gallery, but I have not been able to hand off my facet list to the component via the facet attribute.

The JSON facet list I have created works in the storybook demo.

I'm guessing there must be some other method, interface, or component I have to pass the list through in order to turn it into an IFacet, but I haven't been able to find this in the hub-components or hub.js docs.

Thanks

const facets = [ { "label": "From", "key": "from", "display": "single-select", "options": [ { "label": "SCCWRP", "key": "sccwrp", "value": "", "selected": true, "filter": { "filterType": "content", "owner": "sccwrp" } } ], "accordionClosed": true }, { "label": "Types", "key": "types", "display": "multi-select", "pageSize": 5, "options": [ { "label": "Data", "key": "featurelayer", "selected": true, "filter": { "filterType": "content", "type": "Feature Service", "tags": { "exact": "bight18-sediment-chemistry" } } } ] } ] document.querySelector("body").innerHTML += ` <arcgis-hub-content-gallery query='' layout='list' show-search=true show-sort=true sort-order='desc' facet={${facets}}> </arcgis-hub-content-gallery> `;

Re: Hub-components Gallery not accepting facet list

TomWayson — Thu, 05 May 2022 14:32:11 GMT

First I notice in the snippet above you have `facet=`, but the property is `facets`

But even after you fix that, I think you'll still have a problem b/c you are trying to pass the facets as an attribute. For non-scalar properties (i.e. objects and arrays), the way to set them on custom elements is render the element w/o specifying any attribute value for that property, and then use JS after the element has rendered like:

const el = document.querySelector('arcgis-hub-content-gallery') el.facets = facets

Re: Hub-components Gallery not accepting facet list

sccwrp — Thu, 05 May 2022 17:19:00 GMT

@TomWayson not sure how that facet typo slipped in there. But your solution worked! Thank you again