Listing tags in a specific order

Ask the community
,
1

Hello,

I am using tags to enable users to sort my database, linked to a repeater below (in this case, the user can select the day of the week). Is there some code I can use to sort these selection tags in a particular order? I.e., Monday, Tuesday, Wednesday… (image attached)

1310×246 11 KB

Thank you.

2

Wish I had an answer for you. Having the same problem for what should be a basic sort option when setting up tags in the Editor. Have tried assigning labels & values with $w(“#mySelectionTags”).options but seems it won’t work if the tags are linked to a dataset.

3

Here’s the Wix Velo code that iterates through a list and transforms each value into a label-value object suitable for tags:

export function transformListToTags(list) {
  // Check if input is a list
  if (!Array.isArray(list)) {
    console.error("Input must be a list of values.");
    return;
  }

  // Create an empty array to store the transformed objects
  const tags = [];

  // Loop through each value in the list
  for (const value of list) {
    // Create a new object with label and value properties (assuming value is a string)
    const tagObject = {
      label: value, // Set label to the current value
      value: value, // Set value to the current value (you can customize this)
    };

    // Add the object to the tags array
    tags.push(tagObject);
  }

  // Return the array of label-value objects
  return tags;
}

Explanation:

  1. transformListToTags Function: This function takes a list of values as input.
  2. Input Validation: It checks if the input is indeed a list using Array.isArray . If not, it logs an error and exits.
  3. Initializing Tags Array: An empty array named tags is created to store the transformed objects.
  4. Looping Through List: The code iterates through each value in the list using a for...of loop.
  5. Creating Tag Object: Inside the loop, a new object named tagObject is created with properties:
  • label : Set to the current value from the list.
  • value : Also set to the current value (you can customize this property to hold a different value).
  1. Adding to Tags Array: The tagObject is pushed into the tags array.
  2. Returning Transformed List: Finally, the function returns the tags array containing label-value objects.

How to Use:

  1. Copy and paste the code into your Velo module.
  2. Call the transformListToTags function, passing your list of values as input. For example:

const myList = ["Value 1", "Value 2", "Value 3"];
const tags = transformListToTags(myList);
console.log(tags); // Output: [{ label: "Value 1", value: "Value 1" }, ...]

This will log an array of objects with labels and values, ready to be used for your tags object. Remember to customize the value property within the tagObject if you need it to hold something different than the original value.

1 Like
4

Thanks for that. Was able to use your code on pages where the tags are sorting a repeater populated using Velo code, but it doesn’t work on pages where the repeater is linked to the Collection by a dataset (in Editor).

Until a recent update, Wix Editor used to let you filter a dataset (eg. courses offered) by a user-selected dropdown (choose day) with its item list connected to another dataset (eg. days of week, in order). This was hugely useful, especially when multiple user-selected data filters were required.

For those stuck trying to sort tags in a specific order without code, I did find one workaround.

Since all selection tabs will be listed in alphabetical order, go to the CMS and edit the name and value of each tag in the day of week field, padding it with spaces from 6 to 0 according to position. Eg. 6 spaces Monday (_______Mon), 5 spaces Tuesday (_____Tue), 4 spaces Wednesday (____Wed), and so on.

The spaces will force the days of the week list into the proper order and will not be visible in the selection tag on the screen.

2 Likes
5

You’re a life saver - thank you!