Select Box Values and States

General
1

I have a select box that is populated with a few values from an entitySelection on loaded. I want: if user selects the first item in the list, certain state is applied to the page, if they select item number 2 in the selectbox, another state is applied, item 3 etc. How would this be done? Just cant find anything… Thanks for ideas.

2

Hi,

What I would do:

  • On the On Select event on the Select box, call a function passing the selected entity + the entity selection

  • the function returns the index of the entity in the entity selection thanks to the indexOf() function.

  • the result is put in a datasource bound to a conditional state

3

Hi @musseman, I think it is quite simple.
Depends in fact how many distinct values you have in this entitySelection, and how many states you have.

I’ll assume you set up your selectBox with your entitySelection and have defeined the selected element entity set to selectedEntity.

Solution 1:
Each entity could for example have an attribute stateNumber indicating the state to apply, and you just create a condition on the selectedEntity.stateNumber value for each of your states. In this solution your do not need to setup any event at all.

Solution 2:
If this does not apply to your situation, another solution would be to implement a function selectedEntity.resolveState() returning the appropriate state number or state name. In your selectBox events, you setup an onSelect event that triggers selectedEntity.resolveState(). Store the returned value in a scalar Qodly Source called stateToApply for example. Final step: setup a condition for each state based on the value of stateToApply.
This solution can be better if determining a state is more complex than just having an attribute on each entity.

Solution 3:
Variant of Solution 2, you can enable or disable states server side.
Your selectedEntity.resolveState() function can directly apply a state.

Remember that you can apply several states at the same time on a given Qodly Page. Think wisely as this can help you drastically reduce the number of states to maintain in the future.

Bottom line: enabling and disabling states is very flexible. There are probably other solutions you could imagine depending on your case. You’ll quickly learn what are the best solutions for you. My advice is to think your States as elementary as possible and combine them. You’ll end up having less states and a more rich UI.

4

Thanks for the solutions @Marie-Sophie and @mathieu.ferry . I am getting used to the fact that we can’t use things like clientsCollection[2].lastName as the value to populate a component. It seems object attributes of qodly source objects and be tricky in some cases as well. I tried setting a scaler qodly source to selectedEntity.index but that kind of stuff seems tough as well. Looks like we really need to go through functions to get things out of collections, selections, and obj attributes sometimes. So I’m getting used to that. @Marie-Sophie s solution will be good for this, but would be nice if we could setup a qodly source to be: selectedEntity.index and use that value to set conditional states when SelectBox values change. But the function should work well, thanks!