(CMS) Dynamic List – Select Box

[Jan.Sedlacek (Jan Sedláček)]

Hello, I haven`t found solution to this. However if you have, please feel free to lock this post with link to solution.

What am i trying to achieve.

1. I have CMS Collection with dynamic number of categories.
2. I need to create Form Select Field that includes all items within the CMS Collection.

I cannot insert collection into HTML Embed
I cannot insert collection list into Form Select Field

Im trying to replicate this with dynamic listo of categories https://codepen.io/desandro/pen/jubmr

My question is, is there any workaround that im missing, or any feature that i am not aware of?
Thanks
Jan Sedláček

[jhiggins (John Higgins)]

Are you trying to just get the cms categories into the dropdown or create an isotope type filtering?

[Jan.Sedlacek (Jan Sedláček)]

I have created isotope filtering.
I simply need CMS Collection List inside Select Box – for responsive version.
Thus I need to include all CMS Items inside Select Box.

To clarify:
For responsive version, I need the Collectin List to be inside Select Box for user friendly experience.
Number of Collection Items is variable.

[jhiggins (John Higgins)]

Got it. So you need to code that in either in the before the body part or with a dynamic embed. Just simple selecting the select box and adding in the items you need. If you can’t do it should take a developer less than an hour.

[Jan.Sedlacek (Jan Sedláček)]

I dont know what you mean by Dynamic Embed. But you cannot insert collection list inside HTML Embed Component as far as I know.

But I have no idea how to add all items from CMS Collection inside select box through javascript. Do you have particular method of achieving it?

[Jan.Sedlacek (Jan Sedláček)]

Ok, there is no no-code workaround.

The solution is through javascript unwrapAll() collection items. Then wrap() them with select tag.
Pretty advanced for someone with no coding experience. But did manage to execute it.

[nina.martinez (Nina)]

My colleague was able to figure this out with custom code in an embed element and dynamic fields. Here’s the code he wrote:

<label class="radio-button-field w-radio">
<div class="w-form-formradioinput w-form-formradioinput--inputType-custom custom-radio w-radio-input">
</div>
<input type="radio" data-name="account-manager" id="radio" name="Account Manager" value="**dynamic-cms-field**" style="opacity:0;position:absolute;z-index:-1">
<span id="radio-label" class="w-form-label">{{wf **dynamic-cms-field**</span>
</label>