Toggle with 3 states or... use Kanban

[WimDC (Wim)]

Hi,

maybe a strange question, but is to possible to assign 3 states to a toggle? Or create some “custom toggle” with 3 states.
Reason: in my project, for the moment people (names of members in array) can be displayed with a toggle next to the name to set to “true” if they shall attend a class.
But I would like to “force” everyone to really make a choice: default = no answer (supposed state 1) and then they have to choose “not attend” (= false) or “attend” (= true). So at last, nobody should have a state “no answer”.

Or can this be done with kanban, where at start all the members-names are in column “no answer” and they have to drag and drop there name to either “no attend” or “attend”.

Wim

[Kawwl (Karl Myrvang)]

Hey Wim,

I’d look into creating a WeWeb Component. With this you can create the exact behaviour you are looking for. No code still, but you create your own logic in WeWeb!

Here’s an example:

More examples of WeWeb components + shameless plug:

KMUI - WeWeb UI Library

Some official docs:

Intro to components | Documentation

[WimDC (Wim)]

Hi @Kawwl ,

Thanks for the suggestion as this is what I have in mind.
But I never created a WeWeb Component.

Is it possible to post some screenshots :

1. with the UI elements you used
2. with the settings (or workflow) to show the selected value

If you did it with the AI-tool, what prompt did you enter?

I think it will be easier to understand the documentation when I see some screenshots

Thanks for helping !

[Kawwl (Karl Myrvang)]

Hi, Wim

I’ll try to give your some pointers. I really think looking at the documentation first may help a lot, as you need to understand concepts on how components work. Components are powerful and enable you to keep variables inside the component, as well as configuring you to have properties going in. This is very valuable as you can contain logic inside each component and thus make it reusable as well.

When designing this component, i use a div for the wrapper, then a repeater div for “Options”. These “options” are designed with two states. Active, and not active. Here you can see how it looks in my sidebar.

The repeater will repeat the components “options” properties, which in my case has label and value. I do this to be able to easily use this tab selector component without recreating everything.

Here you can see the components “options” properties.

This will enable you to add as many options as you like “on the outside” of the component, and also seperate value and label. Label is what the text show, and value is its “key” which is used for database, or logic.

You can also see that the selected value is a variable. This variable is also exposed outside the component, so that you can fetch it from the outside.

For the option UI itself, I have a state called active, which is conditionally active when the selected_value == this items value (which is derived from the repeated options.value)

When clicking one of the options I set the selected_value to (item.value) so that the active state will be visible.

I would urge you to follow a example or tutorial to create a simple component, as these concepts may seem a bit abstract. Have you tried using WeWeb AI to build a component? It should be possible that it can make it for you, even though it might go Custom Code on you.

I tried to ask it this as a base, but it went directly to custom coded component:

I need a new weweb component that acts as a switcher or segmented control component. I need to have properties in for Option. One option will have label and value. The selected value of the component needs to be exposed to the outside. Options should be horizontal. give me controls for
pill color, selected text color, unselected option text color

It went OK. Had to tweak a bit, but i got this out of it:

The component does not have a background, so I created a div around it and set the background.