Scrollable directory

Hello there,

I’ve been playing around with a scrollable index/directory, but with no joy. I’d like to display a list of items with an A-Z index, and clicking a letter in the index scrolls the list to the first item beginning with that letter. Similarly, clicking an item in the list would select and scroll to the relevant letter. I’ve attached the basic list and index I’ve been using. Note: For testing purposes I’ve only listed items down to H. I wanted to prove the behaviour before creating the full list.

Any help would be appreciated!

A-Z Directory.rp (105.6 KB)

Hi!

To do this, you will need to make sure Scrolling of the dynamic panel containing this list of names is set to vertical (right-click the panel to set this), know the vertical location of the first instance of the clicked letter in the listing, move a widget (let’s call it “scrollToMe”) that’s inside of the dynamic panel to that location, and then scroll to that widget.

For example, let’s say that the first A name in the listing is at y=0, and the first B name is at y=100. You would do this.

On Click or Tap (of button A)
  Move widget scrollToMe to 0, 0
  Scroll to widget scrollToMe

On Click or Tap (of button B)
  Move widget scrollToMe to 0, 100
  Scroll to widget scrollToMe

etc.

Make sure you are using Move To and not Move By.

This is fine if you list is static. There is way to do this using repeaters with very little code, which would allow adding new rows to the name list while running the prototype, but that’s more advanced. I can describe this to you if you wish.

Note that the panel won’t scroll beyond the the furthest down widget in the list, so if you scroll to the first Z letter but the panel maxed-out on scrolling by the time it reached W, it won’t scroll further. You could place a random object further below the name list if you wanted to scroll to Z.

I was in the middle of writing this when @josephxbrick posted his solution. Thought I’d go ahead and post anyway. That solution is much simpler than this one so if it works for what you need, you might want to just use it.

You can do it but it takes a bit of advanced repeater finagling: A-Z Directory.rp (136.6 KB)

There’s a lot going on but basic approach is to use a “floating” anchor inside the dynamic panel you want to scroll. Whenever you click a letter, it moves the anchor widget to the item row that matches the filter criteria then fires an event that scrolls the panel to it. The tricky part is that you have to calculate the y value of the needed row.

To do this, the filter button needs to call an event inside the repeater, something harmless like OnRotate. This let’s us use an item’s index value. The math to calculate the row’s y position is to take the row’s height and multiply it by Item.index - 1 (we do this because we need to start at 0). To accommodate for any spacing between the rows, you do the same thing and add them both together:
y = [[(row height * (index-1)) + (spacing distance * (index-1))]]

I also set up the directory letters in a repeater that is created after the App list is. It checks a variable that contains the first letter of each app and disables the filter for any letters that aren’t there.

1 Like

Thanks Huban!

I had originally created a repeater-listener version (just like your rotate action), but I really didn’t feel like describing it! :rofl:

Here it is just because it’s done.
A-Z Directory.rp (143.1 KB)

:grin: I totally know the feeling…

Wow! You guys are good! Thanks for sharing your solutions with me.

@huban In your example, is there a way to select the directory letter automatically if you click an app in the app list? Also, is there a way to make the scrollbar invisible on the applications dynamic panel or does that have to be visible?

For the scrollbar, it’s possible to do some fancy CSS injection to control the styling of scrollbars, but for my money, I’d just drop a rectangle on top of it.

To have the app selection set the letter filter, you can use the same “Letter” variable and have the app item do the same thing as the letter button, just in reverse.

Give it a shot and if you have trouble with the code, just let me know.

@huban Hi, I’ve given it a go but still struggling. I’d be so grateful if you could add this behaviour to my project.

A-Z Directory.rp (103.4 KB)

A-Z Directory .rp (104.4 KB)

Configure the app OnClick event to set the “Letter” variable and rotate the filter button. Set the filter button’s OnRotate to check the “Letter” variable and, if it matches, set it to “selected”.

@huban Awesome, you’re a star! Thanks for your help!

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.