Is it possible to create settings where one value influences the choices of another?

[Drifty26]

I need to have 2 parameters - a start hour and an end hour.  I think an ideal UI would use selects where the user could click on the desired hours.  But unless I can modify the selects to be aware of the other value, it would be possible for the user to specify an end hour before the start hour.

I can ignore the illogical choices so that if a user clicks on an end hour before the start hour the click would be ignored, but that doesn't seem ideal since the user would wonder why their action isn't being used.  It would be better if I could dynamically customize the choices that were displayed in the select so only valid/logical choices would be presented.

Another option is to use numeric text fields and validate the entries, but this runs in to the same issue.

Any suggestions on how this could be improved?

Thanks,

John

[Gondwana]

You could check for invalid values and display an error message, then return to the data entry screen.

I had a similar problem with one of my apps. Fortunately, I figured that the start time would always be before mid-day and the end time after mid-day (like the built-in 'active hours'), so I just populated the UI elements with the relevant hours.

[Drifty26]

Thanks - that is probably what I'll end up doing, although I don't see a way to display an error message until after returning from the data entry screen.  I can leave the original value in place (or a suggested one - not sure which), but the user will have to manually go back to the data entry screen.  Or is there some way to simplify this?

John

[Gondwana]

Are we talking about settings/index.jsx?

[Drifty26]

Yes.

John

[Gondwana · Accepted solution]

Then you can display error messages within the .jsx by using conditional statements around the message elements. The conditional statements can use variables that you validate in your companion/index.js (although, if you're better than me, you can probably do the validation entirely within your .jsx).

You can also use this tactic to hide a 'submit'/'ok' button while errors remain.

Have a look at the brief example for Toggle here.

[Drifty26]

Maybe I'm being very dense, but I don't see how this helps.  When I click on a Select or TextInput field, a dialog box will be displayed.  Are you saying I can do validation before that dialog is closed?

Otherwise I can display an error on the main settings page, but the user would have to go back into the field in error (displaying the dialog again) to correct it.

All changes have been applied as each field was processed - not sure how I can prevent the user from clicking on Back at the upper right and just leaving the invalid entries.

I can do more validation in the companion/index.js but would like to improve the user experience with the dialog boxes.

Thanks,

John

[Gondwana]

No, you're not being dense; I'm afraid that's pretty much what I meant.

It should be possible to change the selections in code to prevent invalid values remaining on the settings page, but that's arguably not a great experience for the user either.