Cascade Down from a Button

I want to:
Open my App. and see a list of buttons (6) to be exact

I want to:
Press (button 4) and a list of, say 25 different titles Cascade down.

I want to:
Click number 13 of the (25) and a page open and I read the text and see 4 small expandable pictures.

That’s it.

I am trying some linking ways as the Video shows (And very Helpful I might add!) Just not learning it wee on my end.

So, If you know the way, Teach me so I can be a Jedi.

hi! i am trying to do something similar. i am going to set up an on press show component logic to have it show a container that I’m going to fill up with all sorts of goodies. (you have to install hide component and show component from the flow market).

you could put each of these lists into sox different containers (a scroll or recycler view might be better with lots 9f things), and link each to their button and do a hide show on press. you can do something similar with number 13!

not super detailed, but hopefully enough to ay least het you started on the right path. good luck fellow padowan

Hey there, @mac and @Alexx It’s strongly advised to use Boolean (true/false) page variables over show/hide logic components – or so I’ve heard it from members of the Appgyver team. Presumably, show/hide logic is an outdated function.

• It’s really quite easy to do true/false page variables, and once you grasp the basics, it should take you less than a minute to set one up. Let’s begin:

  1. Go to the Variables slider near the top of the editor.

  2. Go to the Page Variables tab.

  3. Add a variable of type true/false – select it from the dropdown under the field where you name the variable. You’ll need to make as many variables as you need to show and hide specific elements of your page. I recommend naming them in sequence and/or with context-sensitive names to avoid confusion. If you want the container holding your list to be invisible when the page loads in, leave the Initial Value at False.
    Screenshot 2021-03-17 005918

  4. Back in the main view, click the container or components you wish to bind to a specific variable. Under Advanced Properties, you’ll see a true/false Visible field. Select the little box next to the dropdown (marked with the blue dot in the image below). In the popup window, click Data and Variables. In the next screen, click Page Variables. Click the appropriate true/false page variable and click Save.

  5. Now, we just need a trigger. From what you’ve said, Alex, you’ll want to click the button in question to render the hidden content. No problem. Select the button and click Show logic for [ButtonName] down on the gray bar at the bottom of the editor.
    Screenshot 2021-03-17 011756

  6. Now, we just need to scroll along the logic components on the left-side panel until we see Set Page Variable.
    Screenshot 2021-03-17 012412

  7. Click and drag one of these onto the logic flow. Then drag a connector line from the Component tap box to the Set Page Variable box, as shown.

  8. Last step: Now, we just need to click the Set Page Variable and go over to right side of the editor. Set the Variable name to whatever your page variable’s name is. Be sure to set the Assigned value to True.

  9. Save your overall work and test in the preview. Assuming you’ve connected everything properly, you can now click that button to cause the container holding your list to appear. You could also place another button in the list-holding container to close the list. All you do is follow steps 5 through 8 for that button, except you would set the Assigned value to False when the button is clicked, thus, reversing the process and hiding the list container.

• The second part about opening another page is the easiest to implement.

  1. Select the component you wish to click in the live app to open another page.

  2. Open the same logic flow editor I mentioned earlier.

  3. Drag an Open page component (the very first thing on the left component panel) onto the logic flow and connect it to the Component tap box.

  4. On the right-hand side of the editor, click the Page field to see a list of pages you’ve made. Select the appropriate one.

  5. Save and test.

Easy as cheesecake on the tummy. Hope that helps, guys. Take care.
Dom,

3 Likes

Thank you Master Jedi!

Roger that! I am on it, Thank you so much!

Hey, @Alexx, I’m not sure what you mean. You have the Advanced Properties accordion open and circled in the picture. You’ll want to click the little rounded box under the word “Visible” (with the toggle switches icon in it) and then follow the Data and Variables → Page Variables → Pick Variables flow on the popup window. :slight_smile:

1 Like