Select option using images

Hi there.
My goal is to create a daily check-in mood tracker similar to this:
chrome_2023-12-04_21-55-25

I’m able to create a form with a drop downlist to create a new entry but how can I let the user select from a list of images instead?

For example, select ‘Happy’ using a smiling icon and that gets passed either through a ‘create’ new entry or ‘update’ entry function.

Any advice or resource would be much appreciated!

Hi @greco1899,

You can build this with custom forms! Could you give me a example along with example data so I can share a video or a example app?

Thank you

Hi @dilon_perera .

Thanks for offering to help.

I managed to resolve it using ‘custom avatar’ using two sets of images (one ‘highlighted’ and one ‘normal’) and setting a True/False value in the collection, which toggled when clicked.

However it was slow to toggle or display between the images, and there was more logic required to restrict the user only to select one option.

Still thinking about other ways of implementation to make the user experience better with more animations as well.

Howdy, Can you explain more about custom forms? I’m not seeing that component in adalo or the marketplace.

If what is meant here is just dropping individual form components (like text entry, dropdown, etc.) and then grabbing all the info with a button and creating/updating the record that way, then I’m not sure how to make this work.

When I add a dropdown, for example, I can only display text/number properties, not images.

My use case is as follows: I have a list of client statuses. I would like my users to create their own set of client statuses and pair each with one of ten built-in colors, so they can see at a glance what status each client has.

Client statuses is one collection, and status color is another. Relationship is one status color to many client statuses (so each user can use the same colors for their own statuses). I would like to display the ten color options and have the user be able to select which one they would like to indicate the status they are creating.

I tried changing the input value in a text entry field, but a button can’t pull the ID or name from the text entry field to determine which color to connect the new status to.

Thank you for any help you are able to provide.

Ok, I was able to find a good, workable solution for me, and it case it helps others, here it is:

I had a button on page A that created a new client status with all fields empty, then linked to another page (in my case, a modal) and sent the “current client status” to that page. Then I created a custom list of status colors with checkboxes (one empty and one checked to swap visibility) and the image of each color. At that point, since the current client status was available to the list, I was able to set the action for the checkboxes to connect the status color to the client status.

I added the other form fields to the modal individually and then put in a button that updated the new client status with that data. Technically, the list updates the client status independently of the button, but I’m not expecting that to be an issue. The button then links back to the previous page, completing the trip.