Is there a way to dynamically update available options in a Selection Tags element?

Discussion Ask a question
, , ,
1

Question:

I’m looking to see if there is a way to get options in a selection tags element updated to reflect changes that were done to items in a collection. If a collection has items for both Food and Drinks categories, the selection tags element would show both options. But if dataset has been updated and the only items are available belong to a single category, then only one corresponding option would show in Selection Tags element.

Does anyone know if that is something that’s possible?


Product:

Editor X


Added Context

I have a list of items in a dataset that a user can remove. Each item in a dataset has a field with values that is being used within Selection Tags element.

Let’s say there are 4 items in a list. 1 item belongs to Food category and 3 items belong to Drinks category.

I display all 4 items in a repeater with an option for user to delete items. I also have Selection Tags element that is displaying the category options, Food and Drinks in this example, for available options.

When page loads, the dataset contains items for both Food and Drinks categories and Selection Tags element rightfully shows both Food and Drinks options.

But if a user deletes the only available item from Food category, the selection tag element options don’t update - selection tags element still shows the Food option even though there are no longer any items in the dataset that fall under Food category.


What I have already tried

I tried running a refresh() function on a dataset that is used as a data source for the Selection Tag values but that didn’t impact available selection options in the Selection Tag element. Repeater updated to show that the deleted item is no longer available in the collection but Selection Tags element wasn’t impacted.

I also looked through documentation for Selection Tags but didn’t see a function that would refresh options based on latest available items in a dataset.

2

Can you share the code you’ve tried?

3

Hi @anthony!

It’s not much of a code. They code that I have tried to refresh the dataset to which Selection Tags element is connected to is this:


$w('#dynamicDataset').onReady(() => {
	$w('#dynamicDataset').refresh();
});

ADDITIONAL CONTEXT
To give a more complete context, I added to a page a dataset that contains list of items, then I added Selection Tags element and connected it to the dataset to have the Selection Tags element pull its tag options from the dataset. No code involved. I got the idea from this Wix Forum post.


REMOVING ITEM
That worked fine, no issues there. However, if I click on a button on the page to remove an item from collection that the dataset is connected to and refresh the dataset using the code above, the options in Selection Tags are not updated.


WHAT I EXPECTED TO HAPPEN
I would think that if an item has been removed from a collection and a dataset has been refreshed to pull in updated list of items from a collection, the Selection Tags element would also get updated to only show the options for available items, but it doesn’t do that.


ADDITIONAL VERIFICATIONS
Just to confirm that the dataset was refreshed and contains updated data, I connected a repeater to the same dataset that the Selection Tags element is connected to. The repeater accurately updated when item was removed from a collection and dataset refreshed. Once dataset was refreshed, the repeater no longer showed the item that was removed, but the options in Selection Tags element weren’t updated.

4

onReady only runs once when the dataset has loaded on the page. It won’t run whenever something in the dataset changes. You might want to try onItemValuesChanged() instead.

5

I have an event handler that fires of when user clicks button to delete an item in a collection. That shouldn’t be an issue unless I’m missing something.

I made a quick video with a simple example to demonstrate exactly how I have the elements setup, the code I have running and the issue I’m seeing. Here’s the link to the video:

OneDrive - Selection Tags Issue Demo

6

Can you share the full piece of code here then? What was shared in the earlier post doesn’t contain an onClick handler. Videos aren’t the best format for debugging.

From what’s described though, the moment a user clicks a button to delete an item in a collection doesn’t mean the item is deleted just yet. It means it will be shortly. So if the code is doing a refresh() in the onClick handler then the refresh() might be firing before the item is actually deleted.

7

Fair point. Here’s the full code:

$w.onReady(function () {
    const menuDataset = $w('#menuDataset');
    const deleteMenuItemButton = $w('#deleteItemButton');
	
    deleteMenuItemButton.onClick(event => {
        menuDataset.onReady(() => {
            menuDataset.refresh();
        });
    });
});

The code I mentioned earlier is inside of the onClick event handler that’s on deleteMenuItemButton element.

It seems strange that the repeater updated and Selection Tags element didn’t. They’re connected to the same data source - the Menu dataset. I would think that if a dataset was refreshed before item was deleted from a collection, then both the repeater and the Selection Tags element would still show data for all four items.

Are you saying that if two elements share same data source, it’s still possible for one element to display different data than the other element?

8

I’m not sure why the selection tags don’t update automatically. However this code won’t work as it defines an event handler that runs when a dataset is ready. Datasets are only ready one time shortly after the page loads. So this handler isn’t running.

Even if menuDataset.onReady executed regularly it wouldn’t execute based on the onClick telling it to. Event handlers only define what to do when some event happens at some point in the future. Defining them doesn’t make them execute immediately.

In general it’s unlikely we’d want to define an event handler (ex. dataset ready) inside another event handler (ex. onclick)

    deleteMenuItemButton.onClick(event => {
        menuDataset.onReady(() => {
            menuDataset.refresh();
        });
    });

To get refresh() to execute you probably want to do what I mentioned above with onItemValuesChanged().

So something like:

$w.onReady(function () {
    const menuDataset = $w('#menuDataset');
    menuDataset.onItemValuesChanged(() => {
        menuDataset.refresh();
    });
});

Less elegant/reliable would be putting this in the click handler with a small timeout:

$w.onReady(function () {
    const deleteMenuItemButton = $w('#deleteItemButton');
    deleteMenuItemButton.onClick(event => {
        setTimeout(() => {
            menuDataset.refresh();
        }, 500);
    });
});
9

I see. So the the onReady() function is not designed to be used to check the state of a dataset, it is meant to be used to communicate the state of a dataset. onReady() communicates that the initial process of loading data from a collection into a dataset and updating relevant elements that use dataset’s data is complete. Or if something in that initial process went wrong.


Once dataset is flagged as “ready”, its state doesn’t change from “ready” to something else even if there are changes being done to a dataset after it was flagged as ready. Is that right?

10

Regarding onItemValuesChanged() function, it looks like it’s designed to work on a single item. Meaning, if a dynamic page to display data for one item is created and on that dynamic page an update action is executed updating a value in one of item’s fields in a dataset, then onItemValuesChanged() function is triggered.

It is not triggered on a page that displays multiple items, which is what I’m looking for, nor is it triggered when an item is deleted.

11

In any case, after confirming that deleting an item doesn’t trigger onItemValuesChanged() function, I went ahead and simply added a button, this one:


image
image800×441 11.7 KB

and attached to it an event handler that refreshes the dataset. Here’s the code that I used in button’s event handler:

$w('#refreshButton').onClick(() => {
    $w('#menuDataset').refresh();
});

The entire code for the page was just this:

$w.onReady(function () {

});

$w('#refreshButton').onClick(() => {
    $w('#menuDataset').refresh();
});

I confirmed that the button works by adding and removing items from the collection in CSM and clicking it. Clicking the button did make the repeater update and show new list of item so I knew that the refresh functionality worked. However, the Selection Tags element still didn’t update.

It looks like the issue is not that the dataset didn’t refresh but that there’s something wrong with the Selection Tags element causing it to fail to pickup on additions to and deletions from a dataset.

Is there anything else that you would suggest I try? Or is the only way to get option updated in Selection Tags element is to write a custom code that looks for changes in a collection and updates Selection Tags options as items are deleted or created?

12

I believe at the moment you’d need to manually refresh them with custom code. However I’ll check with the team on this and see if the selection tag behavior here is intended.

1 Like
13

Thanks @anthony! I appreciate it. If the behavior is intended, I’m interested in learning what the designed intent was.