On screen control for navigating text list

Hi
I am trying to simulate an embedded UI and need to navigate up and down a list of entries with a set of on-screen buttons (up and down). The text list contains about 20 items. How can I get a button control to highlight the next or previous entry in the list? I can only get this to work by using “selected option of list”, but that only goes to whatever I chose in the case description.

Thanks in advance for all your greatness.

jj

Hi John,

I had a similar problem and will be interested if anyone can suggest how to do this. i couldn’t find a way so ended up with a series of dynamic panels that simulate the selection made. Not ideal and in teh end I used Page Notes to instruct my users which options to choose so I didn’t have to deal with all as it was a lot of work.

Sorry not to be able to help but will watch for answers with interest!

good luck… liz

This can be done without much trouble using a repeater.

I use a variable called ‘selected’ that tracks which item should be highlighted. Then OnItemLoad of the repeater I compare that variable to [[Item.Index]] such that if an item’s index equals the selected variable, it sets the shape to selected. I then added an interaction style for the selected state. One thing I also did that simplifies it is I added the shapes in there repeater to a Selection Group so that when one is selected, the others automatically deselect. Clicking the arrow buttons simply increments or decrements the variable and adds a bogus filter to the repeater to force an update.
list-nav.rp (72 KB)

1 Like

Thanks Nathan
I appreciate the feedback and will try your approach. Will keep you posted.
jj

Hi Nathan
Your suggestion is working great and I am able to include multiple variations of it in my prototype. However, I have long list that I would like the buttons to scroll through. For example, I have 50 items in the list and can only show 6 at a time. I need my up/down buttons to scroll the list.

i tried using multiple page options and also setting to a dynamic panel but nothing seems to provide the desired results. If you have any suggestions, I would appreciate it.

Thanks
John

I think I understand what you’re looking for, and I can see how that might be a little difficult to achieve. Working off the top of my head, you might be able to put it within a fixed size dynamic panel (making sure “Fit to Content” is NOT selected) which will mask the full length of the repeater. Then, with a bit of logic attached to the up down arrows, you could move the repeater up or down within the masking panel. This will give the appearance of the repeater as content scrolling in the panel.

I can’t really give you any specifics right now as I’m just working it out in my head, but hopefully that might get you started in the right direction. Basically, you’ll have to use the current Y position of the repeater (how much it’s “scrolled”) and the selected index in conjunction with the height of each item to figure out where the selected item lies in the view and if you need to scroll (move the repeater) or not and by how much (probably the height of a row). It might be a little tricky but it sounds totally possible.

Thanks Nathan, I trying something similar and also seeing if I can do this with a list box instead of the repeater. Will keep you posted.

john

Hi again
I was able to get a repeater to scroll through a list using on-screen controls (with assistance from an in-house guru). Works great on desktop and mouse driven devices.

However, when I use this on a smartphone or tablet, the down buttons invoke the native keyboard. Not desirable. Below is a link and the file is attached for what I currently have.

Untitled Document

Any suggestions for how I can fix this?
Thanks again
john
repeater up-down controls.rp (65.4 KB)

And if your looking for the troublesome culprit, I think its the logic used in the down button,onMouseUp, case 1. I’m guessing the (Text Field) is triggering the native keyboard.

john

Hi. I an also trying to implement the same exact thing. A list with 42 items, and the user has to scroll through the items using button control. It is very difficult and redundant to implement it using a dynamic panel with 42 states. Unfortunately I can not share my files with you, but try to imagine a language menu. The user has to scroll to select a language, for example Romanian. I need to develop a prototype to illustrate this behavior, but I am not sure I can. Please help.

Hi @Doina,

It’s difficult to say without getting a look at your file, but it sounds like using a repeater instead of a dynamic panel to display the different options may help. You could try creating a repeater where each item corresponds to one language option, and then enable pagination and set “Items per page” to “1”:

This will make it so that only one item of the repeater is shown at once. You’ll then be able to create button controls to cycle through the repeater’s pages using the “Set Current Page” action of the Case Editor’s “Repeaters” section.

If you’re not yet familiar with repeaters or their pagination features, these tutorials should help:

Let me know if you have any questions!