How to figure out which button was pressed

Create a list

The listOfButtons will be used to store all of the button components in your app.

00_create_list_of_buttons

Add buttons to your list

There are a couple of ways you might do this. The first is to add each button when the screen opens. This approach will only work if your UI contains all the buttons you already need.
01_create_list

If however, you are creating your buttons dynamically, you can add each new button, one at a time, to the end of your listOfButtons with something like this:

01a_add_to_list

Which button was clicked?

In this scenario, we’re going to create a function that accepts one input and returns one output. In the example below:

  • The function is called findPositionInList
  • The input is called clickedButton
  • The output is a new variable we have created called positionInList

The function goes through the listOfButtons one at a time, to see if it corresponds to the clickedButton. If it does the value of positionInList is returned, but if it doesn’t match then the positionInList is increased by one and the checking happens again.

03_which_button_was_clicked

Calling the function

Finally, when any button is clicked, you can tell which which button was clicked by calling the findPositionInList block like so:

02_click_any_button

4 Likes

Can’t you just find the first occurrence of the component in the list and return the index?

1 Like

Is there any way to set buttons to as such unlimited, as in, the list will just add the corresponding number to the end of the button, then find this item number in list.

I think find first occurrence in list can help u…

I understand that you can create simply unlimited of everything, but I don’t get how to define for i in number of buttons. Is there a way to add to list, by means of clicking a show more button at the bottom of the screen?

1 Like

it’s complex for me… :sweat_smile:

any #PowerThunker / #Admin comment?

Thanks!

Also to add to what I mentioned. I plan on using the duplicate feature, as I can create a widget (column) and this widget will contain loads of nicely displayed info like a photo, text, and then a button which is absolutely positioned over the top, so its one giant button in a way. How can I duplicate this, then set each piece of data in it to its corresponding list, and then get the button ID to retrieve the correct data from the list (the list contains a lot of data)

(edit)

As of now, I think the next page feature is the best option, and just do simple math, so for length of list = i, only allow to turn i divided by number of widgets per page pages.

1 Like

That’s what the for each item in list block does, no?

1 Like

If you explain a little about what you’re struggling with we’ll do our best to help.

Yep, these definitely fall under the heading of “advanced blocks”! :joy:

1 Like

:stuck_out_tongue_winking_eye:

I’m pretty sure MaxB meant by using the “in list () find the first occurrence of item ()” , which basically implies to avoid re-inventing the wheel.

Thanks @maxb (and @Mark!) who pointed out a few ways this can be dramatically improved. The 40+ blocks in my example above can actually be replaced with these 9 blocks:

And the really cool thing about this is that it never needs to be updated. In the first example, every time you add a new button to the designer you then have to add another button to your list. With the all ... in ... block your blocks will always be in sync with your design! :heart_eyes:

03

3 Likes

Thanks to you @domhnallohanlon, this is a new way for me to see it, so, is the “all button in” treated as a list?

Does this app work (just maybe remember that lists are bugged atm and use the workaround that I posted somewhere if the resulting position is not the desired one)?

Very good to know… might come useful.

1 Like

I’ve tested it and it works perfectly for me.

Try it for yourself and let us know if you run into trouble!

1 Like

FYI, the fix for the issue where the list index is sometimes off by one will be in the latest release that we expect to be deployed by the end of the day today.

-Mark

1 Like

where can I find the Button block to add to the list? (like in the second image in the post). I’ve been looking in every drawer but cannot find it.

I found it: Blocks tab > Any Componant drawer > the last block in the drawer is a single componant that can be changed once it is dropped in the composing area.

1 Like