Custom Elements with dataset

Ask the community
,
1

Is there a way of using a dataset query inside of a custom element. On the support page (https://support.wix.com/en/article/custom-element-faqs) its says the following:

‘Can I Connect Custom Elements to Data in a Collection?
Yes, you can connect custom elements to collections using Corvid’s Data and Dataset APIs.’

But I don’t know how to do it. I have have tried importing wixData from wix-data at the top of my custom element however this stops my custom element from displaying.

I need to create checkboxes based on the number of items in a dataset. I have been able to create the checkboxes based on a static array in the custom element but want to do it based on the dataset so I don’t have to manually keep changing the array in the custom element.

Below is what I need in my custom element.

import wixData from 'wix-data';

wixData.query('testdata')
        .limit(1000)
        .find()
        .then(results => {
            console.log(results.items)
        });

Or if it is possible to send in an array from my page file to the custom element that would work.

2

You can send data from your Page code to Custom Element through attributes.

  1. In your Custom Element observedAttributes() observe an attribute for change.
  2. Use attributeChangedCallback() to treat the changes in the attribute. Use its new value in your Custom Element logic.
  3. In the Page code use $w(‘#customElement’).setAttribute( ‘attribute-name’, value )
    *) Note that the value of an attribute must be a String so use JSON.stringify() and JSON.parse()
3

If you are not familiar with CUSTOM-ELEMENT → use a HTML-Component for your purposes.