Modal Menu for item categorization

Hey everyone!

Not sure how best to describe what I’m after here, but here it goes!

On a particular screen I have a list. Let’s call it a shopping list. And each item in that list needs to be categorized into “Yes”, “No”, or “Maybe”. Upon selecting the category I need the record to be updated accordingly.

What I would like to do is tap an item, and have a kind of pop-up menu appear presenting the category options, then have the menu close and update the record once the category is selected.

What would be the best way to achieve this?

I’ve been looking around and explored the “Show Component” flow function (which I can’t actually seem to get to work at all), also the “open page in bottom sheet” which I think will work but don’t really want the menu to appear from the bottom of the screen.

In either case, I’d like to get some suggestions before I go too far down the rabbit hole and have to turn around.

Thank you!

Hi, both of your ideas are possible, but there are simpler ways, you can try having a dropdown menu, or the action sheet ,or pick value(android style) ,or pick value(ios style)
(find in flow function market)

Take a look and choose the one you like most

These are great suggestions. I did not know any of these existed.

That said, after playing with them a little bit it seems they are very limited in term of UI design. Is that so? Is it possible to customize the visual elements in any way?

If not, I may be forced to go the more complex route as it is very important that this menu look a certain way.

If I have to customize, is there a tactic you would recommend?

Hi!

I recommend using the component’s visibility property instead of “show component” flow function. That way, you can show/hide component(s) dynamically using e.g. a page variable to show or hide them. Another option could be using a conditional renderer, although that may be too complex for your use case.

1 Like

@Mevi, thank for this suggestion. I had to take a break from this for a bit but I am back to trying to figure this out.

Is it possible for you to walk me through this a little bit? There are a few challenges I am struggling to solve.

I have created the page variable tied to the component visibility as you suggested. Now I have two primary questions:

  1. This is a menu to rate a particular item on the page. So I select that item, the menu appears, and if the item already has a rating that rating should be reflected in the presentation of the menu (ie. the appropriate rating is highlighted) If it does not have a rating, you select the appropriate rating option to update the record and disappear the menu. Make sense? My question is, how do you pass a unique identifier, like a page parameter, so the menu knows what record it is pulling from? Or is that even possible?

  2. I’ve been trying to animate the menu using the “animate component” but can’t seem to get it to work. I have tried different placements of the flow function but to no avail. I was watching your “messaging app” video series and I got all excited when you said you would walk through the creation of the modal widow you had designed, then you start the second video by saying you’d decided not to use the modal window :frowning: If there is another video that will help me with this let me know! Otherwise, I have attached a snapshot of my pitiful attempt to get the animation to work:

Thank you for your help!

  1. Just pass a page parameter to the page, and from the page you can use it in the logic of the component and how many stars it shows (I would do this via formula probably). A video on page parameters can be found here if you’re unfamiliar with them. For formula, I would use IF with perhaps LOOKUP or similar.
  2. Animate component… Not sure if it works at all at the moment. I would skip that – If you want animations try the Lottie component.

Thank you, Mevi. I understand page parameters a little bit. I have been using them to create item detail pages up to this point, but I’m still not sure how I use your instruction to pass a parameter within a single page rather than across two pages. It might help if I explain exactly what I’m doing:

This is a kind of music rating app. I have created an “Album Details” page which presents a list of songs from that album which are being pulled from the database (these songs are identified by a page parameter ‘albumID’ which I passed from the previous page).

What I want to do from here is select a song to generate a modular window that shows a series of rating categories which itself would pull and update data from the appropriate record (this is what I was trying to explain up above). If I wanted the rating window to be a whole new page this would be easy; I would just pass the song ID to the new page and input the rating there. This becomes less clear when I want to pass the song ID to another component within the same page and have that component read and reflect accordingly.

I can see there may be a solution in what you are suggesting but I don’t quite understand how to do it. When you say “Just pass a page parameter to the page”, what does the mean in this context?

Sorry if this confusing or if I misunderstand something.

Here’s a quick onboarding video about page parameters: Onboarding Part 3 - Variables - AppGyver

What I mean is that you would pass the song id as a page parameter to the page where you want to use it. On the same page, you can use the page parameter in several places. On a single page, you can also create page variables and store more information there if you need it in several places. Please see the other videos on the topic as well :slight_smile: