Multi-Select Input Solution

Antony · January 7, 2020, 10:00pm

Hey everyone…

Does Wappler or do any of you have a nice solution for a multi-select input? (So one with several choices like a dropdown, but you can select more than one of them).

… I don’t want to use the simple ‘multiple’ option on the select tag as it involves the user pressing [ctrl] which isn’t a simple enough gui for my userbase…

… I’ve just looked at the jquery “select2” but it looks a bit too clever and detailed for what I want…

Something like the one that Bubble provides would be just great - a little video of it running is below.

Best wishes,

Antony.

====================================================================

multi-select

George · January 7, 2020, 10:09pm

Good idea Antony! We are actually already looking for a suitable multi select component for a while to integrate with App Connect but haven’t found the best one yet.

Select2 comes indeed close but we are looking for more cleaner one that don’t use jquery.

alexey · March 6, 2020, 4:08pm

Hi, @George!
Any update with multi-select?

Hi, @Antony!
Did you made it somehow finally?

JonL · March 6, 2020, 5:39pm

Bubble uses Select2 for their multiple select input.

nevil · March 6, 2020, 9:27pm

Coincidentally also looking for this!

Antony · April 10, 2020, 8:21am

Any updates on this @George?

@alexey, yes, I do have a solution for the moment… I keep updating it to make the visuals better!

Antony · April 10, 2020, 8:26am

My solution uses an array to store the multi-selected values.

Here is an example used with contact tags (lots of other functions mixed up in there too!)

It is based on using a Wappler Array called contact_tags.

Sorry for all the spaces… am a bit short of time to tidy it up!

Then some fancy css to make it look half nice…

Hope this helps!

Antony.

<div class="row row_input">
	<p class="icon_field c_brown1" dmx-style:visibility="show_input_icon.value==0?'hidden':'visible'"><i class="fas fa-tags" dmx-bs-tooltip="apptext.value.1101"></i></p>
	<div class="div_input">
		<select id="i_contact_tags" dmx-on:click="show_label.addUniq(1100)" dmx-on:input="show_label.addUniq(1100)"
			dmx-bind:options="lookups.data.lookups.where(`lookup_type`, 10, &quot;==&quot;).where(`is_a_demo`, show_demo_data.value, &quot;==&quot;).where(`is_hidden`, 0, &quot;==&quot;).where(`is_deleted`, 0, &quot;==&quot;)"
			optiontext="lookup_name" optionvalue="id" name="tags" class="input_multi_select" dmx-bind:disabled="view_edit.value=='view'" data-msg-required=""
			dmx-on:changed="contact_tags.addUniq(value);f_contact.i_contact_tags.setValue('')" dmx-hide="view_edit.value=='view'" dmx-on:keypress="autosave_contact.start()">
			<option value="" selected="">{{apptext.value.1102}}</option>
		</select>
		<div class="selected_items">
			<p class="m-0 d-none" dmx-text="contact_regions.count"></p>
			<div dmx-repeat:r_selected_tags="contact_tags.items">
				<div class="col selected_item">
					<p class="d-none" dmx-text="$value"></p>
					<p dmx-text="lookups.data.lookups.where(`id`, $value, &quot;==&quot;).values(`lookup_name`)" class="name_multi_select_item"></p>
					<p class="selected_item_delete" dmx-on:click="contact_tags.removeAt($key)" dmx-hide="view_edit.value=='view'">
						<i class="fas fa-times"></i>
					</p>
				</div>
			</div>
		</div>
	</div>
	<p dmx-on:click="show_help.items.contains(1100)?show_help.remove(1100):show_help.addUniq(1100)" class="icon_help">
		<i class="far fa-question-circle"></i>
	</p>
</div>

raymantle · May 5, 2020, 12:45pm

Any Idea if this feature is on the way? I am currently using Select2 on another project which is migrating to Wappler and would like to use a built in Wappler function to achieve this.

JonL · May 5, 2020, 2:17pm

I like VUE multiselect

MIT License and no JQuery

Just need to wapplerize and bootstrapize(i’ve seen some bootstrap forks) it a bit

Antony · May 5, 2020, 3:38pm

I really need this too… Have made my own solution but it isn’t the best and would prefer just a Wapplerised version!

Philip_J · August 16, 2020, 12:55am

Just throwing my vote and comment in on this two. Would be a great feature

JonL · August 30, 2020, 3:05pm

Just saw this vanilla js library. It is being used in some BS5 themes.

TomD · August 30, 2020, 4:28pm

That’s a great find. There’s an interesting demo here. It’s not lacking in options.

PraneetB · August 31, 2020, 2:45am

Certainly required in my projects too…Was surprised this isn’t a part of Wappler already

Antony · August 31, 2020, 5:18am

Yes, this and being able to create random strings seem like the two big omissions that Bubble do with ease but still cannot easily be done in Wappler…

EDIT…

Yes, this and being able to create random strings seem to me like the two big omissions that Bubble do with ease but still cannot easily be done in Wappler…

bpj · August 31, 2020, 8:09am

If there were crypto on the client-side random strings could easily be obtained:

TomD · August 31, 2020, 8:58am

This seems like a strange combination of missing features and may not be a general view. (I would have thought the number of people with this particular view might not be more than 1 .)

I agree that a good multi-select option is an important omission, which I'm sure will be added soon. With a big project like yours, I would have thought the missing conditional statements ('switch' and 'else if') would be a bigger concern/frustration (I know you use conditions a lot).

Antony · August 31, 2020, 9:02am

Thank you for sharing your thoughts @TomD!

Well it is a comparison with what is possible in Bubble... and Wappler does much more than Bubble apart from these two very obvious things to anyone who has built an app in Bubble!

JonL · August 31, 2020, 9:11am

Hey @Antony, it didn’t feel so good to read those words… I would appreciate hearing you own your reaction and explaining that they feel two big omissions to you!

I prefer a world where we own our reactions rather than make blanket statements which sound like everyone believes the same thing.

“this and being able to create random strings seem like the two big omissions” just makes me go “ouch” and want to react and say “Nooo, they don’t feel like big omissions to me!”.

“...seem like the two big omissions to me” just sounds like a very reasonable personal reaction from an individual’s own viewpoint.

Not wanting to get too pedantic as I think you usually get but I am wanting us to have a warm and friendly feeling towards the developers here who rightly want to know they are making the right choice when building a feature in what could be a massive decision in their business.

I hope you knew this was coming your way.

Antony · August 31, 2020, 9:15am

Hey @JonL, thank you SOOOO much for your post. I make absolutely no claim to be perfect in my use of language and I really appreciate your very valuable feedback.

I'm delighted to hear how important it is to you that we own our own reactions!

Post suitably edited...