Select to view content in your preferred language

Hub-components Gallery not accepting facet list

414
2
05-04-2022 02:16 PM
sccwrp
by
Emerging Contributor

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>
`;

 

Tags (1)
0 Kudos
2 Replies
TomWayson
Esri Contributor

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

 

0 Kudos
sccwrp
by
Emerging Contributor

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

0 Kudos