Displaying panels on panel scroll (infinite canvas), with pinned dates and time axes

advanced-prototyping
#1

Hi all,

I’m in need of some help please! I’m trying to prototype a appointment booking grid, where the user can see a range of dates and times on an app.

The issue I’m having, is that a technical constraint we have is that we can only retrieve 7 days worth of appointments at a time - I want to replicate this to see if this is an issue to users.

To do this, I have experimented with a lot of different ways, but settled on a dynamic panel called “all-days” with horizontal scrollbars shown. I have had to reduce the size of the panel, as the vertical scroll of the page interferes with the horizontal scroll of the grid. This panel has two states with days 1-7 and days 8-14.

When the user scrolls beyond a certain point of the x-axis, I am switching the panel “days1-7”, and showing a loader, whilst the panel changes to “days-8-14” The reverse should happen when the user scrolls from days8-14, back to days1-7. I have loosely managed to achieve this, but welcome welcome any suggestions on whether there’s a better way to do this?

One of my two main issues, is that when the user scrolls from 8-14, and back to 1-7, I would like the user to start from the point where they exited the page, giving the feel of an infinite canvas / scroll (with a small load each time the data is pulled) I have tried scrolling to a hotspot / widget within the first panel state, but this doesn’t seem to work.

My second issue is that I would like to be able to fix both of the date and time axes to the top and left hand side of the panel, so the user can see where they are in the grid. However, these sit within the “all-days” panel in order to maintain their correct position with the grid, so aren’t pinnable - is there a solution to achieve this also?

I have attached an .rp of the problem, with my current workings.

Any help would be much appreciated - thank you!

example-booking-grid.rp (224.9 KB)

#2

Hi!

Is this like a lazy-load situation? E.g, at first you have access to the first 7 days until fully scrolled right, when 7 more then become available (to the right of where you are scrolled to now, but you are still looking at the end of the first week). So now you have 14 available and can now can freely scroll through all 14 days until you hit the scroll limit, at which time you have 21 available through all of which you can now freely scroll. Similar to Amazon’s vertical scrolling in its Find a Gift page after pressing the See More button.

I’m asking because it seems like it would be frustrating to lose the first 7 days just because you wanted to see day 7, but it disappeared because you accidentally bumped into the scroll limit.

#3

Hi, thank you for replying!

I agree, and this is something I quickly noticed whilst playing around with this mockup. There’s more complex reasons why it has to only load the 7 at a time, e.g. the axis of time can vary, meaning the user might be looking at an earlier / later start. Each time the data is pulled, the first and last times are calculated. The reason for doing this is (as opposed to loading all the data) is so the user doesn’t see several unavailable blocks of time, if perhaps there is a few early starts, far into the future.

Sadly, it’s unnecessarily complex as these things often are!

I hope this makes sense, and thanks again :slight_smile:

#4

Hi!

This will be fairly complicated code!

To scroll the the far right upon arriving to each panel, as you would want to do while going to the previous panel state, you’d want the following in each state of the panel:

  • A rectangle called scrollToMe1, say 10x10 pixels, set at y=0. (Set its opacity to 0 once everything is working: that will make debugging easier.)
  • A rectangle named rightEdge1, which is at the far right side of your panel state

Note the number at the end indicates which state the widgets are in, so you’d also have a rightEdge2, etc.

You’d also need some kind of variable that says whether you are going to the previous state or not.

  On Panel State Changed
    If state of This is state1 AND v_goingToPreviousState equals true
      move scrollToMe1 to x: 0  y: [[LVAR_rightEdge.right - LVAR_gridwindow.width]]
      scroll to widget scrollToMe1 horizontally

… where LVAR_rightEdge is a local variable referring to rightEdge1, and LVAR_gridwindow is a local variable referring to your outer dynamic panel. You might want add a minus 1 to the the expression in brackets, so you don’t automatically trigger your code that causes the next panel to show. You would need a condition like this for each state (except the last one, of course).

For fixed headers and left columns, you can follow this example.

[Edit] I have x and y reversed in the code above: change it to:

move scrollToMe1 to x: [[LVAR_rightEdge.right - LVAR_gridwindow.width]]  y:0
#5

Hi again,

Thank you very much for your help with this - I can see what you’re trying to do. This is great, would never have worked this out myself!

I’ve added all of this into my prototype, and the variable is firing correctly (from false to true) but it doesn’t seem to be moving the ScrollToMe square, when I move back to state1, from state2.

I think I’ve added everything in correctly, e.g. specified the LVAR values within the function itself. Where you mention to refer to the outer dynamic panel for LVAR_gridwindow, I assume this would be the small panel that contains all of the dates and times, etc… in this case “grid-window”?

I’ve also tried removing other interactions in case there’s a clash somewhere, but doesn’t seem to be working for me.

I was wondering whether there were any small tripping points I might have forgotten to do?

Thanks again!

#6

Hi!

I wrote that solution without trying it out, so I implemented it and I ran into the same issue: it’s moving the scrollToMe widgets to the right spot, but it’s not scrolling to them. I was able to fix it by inserting a Wait 0ms command before the Scroll To, which sometimes works around Axure bugs like this one.

Also note that the ScrollToMe widgets can’t be nested in an inner panel: the must be within the various states of your outer panel.

Here’s my test file: On Page Loaded sets the panel to its third state, and there’s a button for going to the previous state, at which point it scrolls to the right-hand side. You’ll see the wait command in the On State Changed event. The thing that’s not great about this workaround is that because of the Wait command, you can see the panel scroll, whereas without it that panel would scroll before the screen draws itself. I’ll see if it duplicates in Axure 8, and if it does I’ll report this bug.

scroll on panel state change.rp (70.0 KB)

[Edit] This is indeed a bug specific to Axure 9

#7

Thanks very much!

After quite a bit of trial and error I managed to get it working. For some reason the ScrollToMe widgets weren’t moving until I assigned them to another action on the prototype.

Either way, it’s working now, so a big thank you for the help :smiley:

closed #8

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