List choice box - increase contrast or change colour?

There may be a solution here via custom forms (thanks @Jeff_Hager and @Darren_Murphy), but have not been able to apply it to my situation.

As shown by the screenshot, my preference is a segmented choice because it saves a click and offers far more contrast to be seen outside in direct sunlight (this app is only going to be used outside).

Unfortunately, as I need 5 options, I need to use the list choice box. However, the box is virtually invisible when outside because it lacks any real contrast. I am literally stabbing blindly at my phone. It also requires an extra click. Another issue is that the title that sits above the box cannot be formatted and is too faint and small to read outside. To address that I deleted the title and replaced it with a text box (as shown by the screenshot) but this is triggering my ocd by not sitting flush above the box!

Sorry for all the complaints :laughing: :innocent:

I have tried changing the theme of the app to a light colour but it doesn’t help much. Have requested a ‘tap on and off’ feature for the segmented choice bar so that the minus segment can be used for another choice.

Many thanks

If you make the segmented choice component a required value, then you get 5 options. Would that help?

Thanks Darren but all options have to be non-required. It is an assessment app and the user won’t always need all the options. They may happen to see a student displaying one or two of the criteria and tap it into the app. Over a period of time they will have built up a bank of data for each student to give a final grade.

Cue custom forms :laughing:

When you use a segmented choice component in a custom form built on a details layout, you can mark it as required - but it isn’t. This is because it isn’t attached to a native form component. So you get access to 5 choices, without any of them being required :wink:

Ok cool, I saw your post about how to use custom forms but you used a button with a left and right option. How do I add segmented choice to a custom form?

Just add it as a component. You will need a user specific column to hold the input value.
And you’ll also need a button with an action that adds a row - because its a custom form there is no submit button, so you need to provide your own.

Trust me, once you get the hang of it, it’s so so much better than using native forms.

I’ll give it a go. To be clear - will I be able to reproduce exactly what I have in the screenshot? (except with those list boxes replaced with segmented)

yes, except for these:

You only get those when you use the native form (ie. Show Form).
With a custom form, you need to provide your own Cancel and Submit buttons, and create the associated actions. But, they can be real buttons. Imagine that! :joy:

awesome will get on it after work :laughing:

Here are a couple of custom form examples from one of my apps. Notice the BIG FAT UNMISSABLE cancel and save buttons :wink:
Also note the segmented choice component in the first one. Even though there are only 3 choices, it’s marked as required (but it isn’t), so I don’t get that ugly dash.

Have got it working! But need an action that will clear the selection from the choice bar. So far, the choice from a previous student remains selected even if I go back and re-enter the screen and choose a new student.

If you use a multi-step action on each of your buttons (Cancel & Send), you can include a step that clears all the user specific columns. Of course with your Send button, that needs to happen after the Add Row action :wink:

Tried this but it clears the row meaning no data arrives

Are they user specific columns? (they should be)
Are you building the form on top of the “Year 1 Free” table? (you don’t need to)

I…think they’re user specific. Have never used row IDs before so don’t know if this is it? Notice that the ID changes for each new row, even if the same person so something must be wrong.

I’m thinking I just need to add every student from each year in the same table and give them their own ID? Otherwise the app keeps adding new rows and new IDs for every submit action?

No, they’re not. You can tell user specific columns as they have a distinctive purpley-blue icon…

Yes, that makes sense. Although if you do it that way you’ll need to be using a Set Columns action rather than add row. So your flow would be something like:

  • Present list of Students as an Inline List
  • Tap a Student row to View Details
  • On that details screen you have a button for updating that students details
  • That button does a Link to Screen → This Item action
  • On that next screen you build your custom form layout, with a Submit Button that does a Set Columns action on the current row (which is the students row).

Essentially what you need is a matching User Specific Column for each of your “Real” columns. And the Set Columns action takes the value entered in each User Specific Column and uses that to set the value of the “real” column.

Hope that makes sense :wink:

2 Likes

I should add - you should make this a multi-step (custom) action, as you’ll also need to clear the values on your User Specific columns, and perhaps show a notification, and maybe even a “Go Back” action.

I also want to mention that Row ID’s will always be different for each row. They give each row a unique ID that doesn’t change and makes it unique. It does not necessarily have anything to do with users, unless you are explicitly writing a row ID, that is related to a particular user, to a column.

So each ‘real’ column needs a matching user specific column? That is 10 extra columns for the Year 4 cohort alone, as shown in the screenshot. This is just the Year 4 group - each year group has it’s own specific criteria so I would need to create over 60 extra columns. I’m hoping I have misunderstood

The set up is probably a bit clumsy but the app works really well. The feed sheets go into a pivot table to give me an overall grade for each student. This is why there are so many tables. There would be a better way to set this up but this was the logic behind how I got it in this shape. I only mention this because you may have thought the app was a lot tidier than it actually is :crazy_face: