How to create a dropdown component that shows the options in whole screen

I’d like to create a dropdown component, when you click it shows a list of items, but that list takes the entire screen. I’m not sure how to achieve this.

The current dropdown component shows the list of choices in a small area at the bottom of the screen. This area is too small and ‘old school’ for what I want.

My idea is to use a modal form to display the data, and upon the item selection, pass the result back to the calling function/component.

I.e

On Form1 a CustomeDropDown component would have a list of choices. On the component tap event, it would send the list of choices to Form2 and populate a visual display allowing the user to select a single item. Upon selecting a single item the form would close and go back to the previous screen, the resulting choice would be passed back to the CustomerDropDown component and its displayed item would be updated.

Logically, that sounds like a viable solution. But I don’t know how to execute it in the environment.

Hi,

Maybe the flow function Pick value (Android style) could suit this layout-wise. You can find it in the Flow function market. I’m not sure I understand your use case completely, but you can access the chosen value by setting e.g. a page variable as the output of the Pick value node, and the construct the rest of your logic or page navigations according to the page variable. Here’s what I mean:

Thanks for the suggestion. But the Pick value (Android style) component looks like it should have stayed back in the early 2000s, it’s ugly and ‘old school’.

The app my staff are currently using has combo box items appearing on a new form.

The user clicks the combo box…
image

… and the full-screen options list appears.
image

This is the functionality I need to replicate. I don’t want a small onscreen component like the Android view or the equally unpleasant ‘old school’ iOS option picker. I’m trying to create a modern feeling, aesthetically pleasing app here. And, unfortunately, most of the components available feel like they ceased development in the early 2000s.

Modern apps need to be more than simply functional, they need to look and feel modern.

Sorry that the components are not to your liking. Fortunately there’s lots of options for styling available for them, so any user can modify them to their liking and use case.

Then I would suggest creating a separate page for the options, and use Open page with open in modal set to true to show them to the user. When the user has made their choices, you could save the choices to an app variable and navigate back to the previous page.

1 Like