Supporting <select> options rendering + more

[alexiglesias93]

Update: #4 (comment)

The problem

The render a list of element in Wized we offer the Render list action, that (surprise surprise) renders a list of elements based on the defined template element.
For it to work we require adding a wized attribute to the template element, so Wized can identify it.

The problem comes when trying to render a list of <select> options using Wized.
Webflow has a built-in Select Field that's very convenient to use, but it has one major drawback: we can't target the child <option> elements. To dynamically render the select options with Wized, we need to define the wized Attribute to an <option> element that will act as the template.

Potential solutions

I can think of three different solutions:

1. Using HTML Embeds as a workaround
2. Adding a new Target option in the Render list action
3. Creating a new Render options list action

Using HTML Embeds as a workaround

Not much to say here, we would just educate users to create their <select> elements using an HTML Embed, this way they could add the wized attribute to the <option> element:

This is the simplest solution, but the least convenient as users loose some of the benefits of Webflow's Designer.

Adding a new Target option in the Render list action

When you select an element for the Render list action, that element is the one used as the template that will be replicated for each list item instance.
I am thinking that we could add a new optional setting field called Target or similar, where users can explicitly define a child element to become the template.

The target would be defined using a valid CSS selector (i.e. option, .my-class, [fs-cmsfilter-field="value"], etc...).

The benefit: Flexibility, as users could potentially not only use this for rendering <select> options but also for rendering anything.
The downside: I can't think of any other use cases other than rendering <option> children.

Still, this feels like the best option to me, but I'd love to hear from the community.

Creating a new Render options list action

Inside the actions dropdown we would offer a new Render options list action. This list would exclusively apply to <select> elements, and would allow users to populate the options with the same approach as the traditional Render list action, with the only difference that the wized attribute would be applied to the <select> element.

I feel that this option could cause too much confusion + it is really not flexible at all.

Wrap up

I'd like to hear any other potential solutions that you come up with. All the proposed solutions in this RFC are valid, but none of them convince me 100%.

[DarshilDixit]

"Adding a new Target option in the Render list action" Sounds great! This would be a new optional setting field, so it does not hamper the current way of doing.

Besides, I'm sure we would be able to explore other use cases of it as we move forward and as the wized tool gets picked up quite frequently by us on projects.

[theflowagency]

Agreed that the second method is the best. It's 100% flexible, just like the rest of the Wized features, and yet it wouldn't take a lot of user training to understand it and start using it. I'm assuming that this means that you would drop a Webflow native select element into the form and just not worry about the options in Designer as you'll be overriding them, yep? Maybe keeping a default option in there would be useful e.g. "Select one..." which defaults to "none selected" as is often the case with select fields.

Once the feature is available I'm sure people will dream up ways to use it to render other types of child elements!

[alexiglesias93]

We just realized that the Target approach has one big flaw: we can't add other Actions to the target element, because it will still not have a wized Attribute. This means that you could render the elements, but not add any other functionality to them like setting text or styles.

I'll keep thinking about this, but for now the recommended approach should be using the HTML Embed solution.

[theflowagency]

I'm sure you'll crack it Alex. You always do!

[DamianS21]

Hi @alexiglesias93 👋
any updates on this? I'd love to have that feature working.

[alexiglesias93]

@DamianS21 we recommend you use the new DOM Element to create the following structure:

• select
  • option wized="element_name"

[DamianS21]

Hi @alexiglesias93 thank you for the answer.
I added the DOM element to webflow as select and added wized option, but I'm not sure what's the best way to add a list output to it. Do you have some idea?

Edit I think I got it.

1. Added a DOM element in Webflow
2. Set Tag as "select" and wized attribiute
3. In Wized, I added Action to the element "Set text" / HTML
   Used example code:

const optionsData = ["Option 1", "Option 2", "Option 3", "Option 4"];

function generateOptionsHTML(options) {
    let optionsHTML = "";
    options.forEach(option => {
        optionsHTML += `<option value="${option}">${option}</option>`;
    });
    return optionsHTML;
}

const optionsHTML = generateOptionsHTML(optionsData);
return optionsHTML;

[alexiglesias93]

@DamianS21 another approach would be to, instead of injecting the <option> elements via Set Text (HTML), add an additional DOM element inside the <select> element, and you set up the nested DOM element as:

• Tag: option
• Attribute: wized="SOME_NAME_FOR_OPTION"

And then you create a Render List action for the <option> element. Also, you'll have to add a Set HTML Attribute action for the <option> element too, where you add both the value attribute, and a Set Text action where you add the option label.

[Targox]

I'm trying to add dropdown menus to each item of an array, but on the front-end it only seems to work on the first array item. Is this possible? Or is there a workaround? Thanks @alexiglesias93

[alexiglesias93]

Hey @Targox, do you mean the built-in Dropdown components from Webflow?

[Targox]

Yes I do. Is there a solution for that?

EDIT: I found this code on Discord

window.onload = async () => {
  Wized.request.await("My Request Name", (response) => {
    setTimeout(() => {
      window.Webflow && window.Webflow.destroy();
      window.Webflow && window.Webflow.ready();
      window.Webflow && window.Webflow.require('ix2').init();
      document.dispatchEvent(new Event('readystatechange'));
      console.log("Webflow Interactions have been reloaded!");
    }, 100)
  });
};

but even though I used my List request name, it kept saying Request "list" not found. But then I tried this:

<script> 
window.onload = async () => {
  Wized.request.awaitAllPageLoad(async () => { 
    setTimeout(() => {
      window.Webflow && window.Webflow.destroy();
      window.Webflow && window.Webflow.ready();
      window.Webflow && window.Webflow.require('ix2').init();
      document.dispatchEvent(new Event('readystatechange'));
      console.log("Webflow Interactions have been reloaded!");
    }, 100)
  });
};
</script>

And it works! Thanks anyway @alexiglesias93 !

[DamianS21]

HI 👋
Does somebody knows how to make this script work on Wized v2 v2? It returns

TypeError: Cannot read properties of undefined (reading 'awaitAllPageLoad') at window.onload

[alexiglesias93]

@DamianS21 in Wized v2 the API is a bit different, you would do something like this:

<script>
  window.Wized = window.Wized || [];
  window.Wized.push(async (Wized) => {
    await Wized.requests.waitFor('request_name1');
    await Wized.requests.waitFor('request_name2');
    await Wized.requests.waitFor('request_name3');

    window.Webflow.destroy();
    window.Webflow.ready();
    window.Webflow.require('ix2')?.init();

    document.dispatchEvent(new Event('readystatechange'));
  });
</script>

Make sure you replace the request names for the requests that you want to wait for, before restarting Webflow.

[DamianS21]

Thank you @alexiglesias93

[mstamper11]

Hi all. I was trying to use the first method, I can render one option, but how do i render the list in the HTML select? Thank you

[alexiglesias93]

You select the element as the target for the Render List action and it will be replicated for each list item

[mstamper11]

Ah gotcha, thanks for the quick response Alex much appreciated.

[dima-dinero]

Hey, Alex! Currently I'm working on the project and there I have multi - select fields, that I rendered with this embed method. And I want to send selected options back to the database after the user submits the form. I'm using Select2 library on this project to style the fields. And I have some issues. When I try to send data to Wized from this select field it shows me an empty string when I'm using select field, styled with Select2 and when I use default Webflow multi - select it only outputs the first value from the list.

Here's I've described problem in more details with screenshots: https://discord.com/channels/853733628931604480/1170663497596665906/1170663497596665906

Maybe you could help me to find a solution? Or maybe there's another method how can I get array data from user. Using checkboxes, for example. Will be grateful for any information)

[alexiglesias93]

Hey @Diman353 , I see that the project you presented in Discord is using Embed 1.0, this thread is specific for Embed 2.0. Have you tried migrating?
Also, can you share a link that we can check for debugging?

[dima-dinero]

Yeah, I've tried migrating, but guys told me, that at the moment it's not possibe because I'm using Airtable in my project.

Here's preview link: https://preview.webflow.com/preview/outcode?utm_medium=preview_link&utm_source=designer&utm_content=outcode&preview=f6fea8b522b100d8714920a30faed751&pageId=653137afd145762acbbefc9b&workflow=preview

[alexiglesias93]

Wized listens for both input and change events on any form field that you have identified via the wized HTML attribute.
It should pick up the values from Select2 🤔
You may want to play around with the events that are emitted by Select2.
Have you tried asking for help using the in-app chat? Our team would help you find a solution to this problem.

[dima-dinero]

Hey, @alexiglesias93! Thank you for advice. I was able to make it work with this script, where I assign the array of selected options to varibale from Wized, and after that I pass it's value to the input. Seems to work, at least for now)

  window.onload = async () => {
    $('#instruments-select').on('change', function() {
      var data = $('#instruments-select').select2('data').map(function(elem){ 
        return elem.text;
      });
      Wized.data.setVariable('selectedInstruments', data);
    });
  };

[alexiglesias93]

Closing this discussion as it's no longer relevant since Webflow launched their Custom Elements. Users can simply create <option> tags using a Custom element and apply a wized attribute to render them in a list.