How to set up a scrollable dynamic panel with a fixed header in Axure RP 8

Alex Boschmans
Aug 25, 2017 · 6 min read
Scrolling cards

Introduction:

One of the things I encounter regularly in a prototype is having to set up a “card view”, eg. a long list of questions that are all situated on the same page. Typically this is used in a mobile view where a lot of content is placed below each other.

A page with a fixed header contains a list of cards or other content, and each card is first shown, and when a response is received, the next card is shown and scrolled to. Sometimes all the cards are visible at the same time, but most of the time only the active card is visible and any previous cards before it.

That way you can scroll back through your cards and review your answers.

The following is a fairly simple example in that the header here is immobile, and there is a single card flow stored in a single state.

You can complexify the shite out of this example if you want to. You could, for example, use multiple dynamic panels using multiple states containing multiple cardflows, with the static header being a dynamic panel with states as well, and then use variables and an endless loop to update the header title when the state of the dynamic panel changes.

Personally I find this very complex and I find maintenance of a model like this to be a big problem. I prefer to keep things simple, using one dynamic panel per page, possibly with multiple states. But sometimes that is not enough and you need to get crazy… anyways.


Here’s how I set this up in Axure:

  1. Create a new page in Axure, and call it “main” or something similar
  2. Create the background page : for an iPhone SE for example this is 320 x 568, and give it a background color
  3. Create the fixed header : 320 x 64 and place it on top
  4. Create some cards : for this example, I made 4 cards of 300 x 170 — they will be on top of the background panel, that’s normal. It’s best to name the cards in sequence so that you can recognise which card is which.

You now have something like this :

Basic header and some cards

Then select all those cards and convert these to a Dynamic Panel — you can either select them visually or via the component sidebar.

You can now size your dynamic panel, so that it just becomes a window on the underlying state(s) — don’t open the panel itself, but just click on the GREEN stippled outline and resize it so that it is inside the background panel. Make sure the header is not covered.

  1. It’s best to give your dynamic panel a name, for clarity and, if need be, reference later on
  2. If you try to preview now, you won’t see a lot, just a static window that you can’t interact with. No scrolling at all…
  3. It’s time to add the scrollbars to your dynamic panel: in the properties of your dynamic panel, select the scrollbars and set them to “Vertical as needed”

Once you preview the main page now, you will see that you have a dynamic panel that scrolls inside the main page.

Look it’s scrolling !

Now you have a basic scrolling dynamic panel inside a main page. Now to make it somewhat more interactive, we’ll be adding buttons and invisibility for each question until the previous question has been completed.

For each card, define a button (simply called “Next”) and place it on the card. Group the card and the button together (select both and do CMD-G to group them). Be sure that both card and button have a name (Card1 has button1, card2 has button2, etc) and name the group as well.

! This is not that big a deal when you have only a few elements on your page, but you can thank me later when instead of having oodles and oodles of elements that are all called “rectangle” you can easily find the right element that belongs to the correct group…

The next step is to add to each subsequent card a hotspot. This hotspot doesn’t need to be clickable, but is needed as a target to scroll to when the user clicks the “Next” Button on the previous card.

You can make the hotspot small and unobtrusive. The only important thing is its placement.
Place it to the right or the left of the question that follows, about 1/3 down from the start of the question. You’ll definitely need to name this hotspot as well, as you will need to scroll to it when the button is clicked.

The hotspot is the small green spot on the left

Now we can add the code — add the following “Scroll to widget” code to each button’s onClick event :

When the button on the card is clicked the next card will be scrolled to using the swing animation

For each button you change of course the destination to the next hotspot on the following card. Add the “swing” animation to give it a smooth transition between once card and the next.

If you do a preview now, you will notice a problem : while clicking on the button you can move smoothly from one card to the next, at a certain moment this stops and clicking on the button no longer advances to the next card (which is visible in the bottom of the screen). This breaks the flow.

This is normal because the dynamic panel has reached the end of the panel (the last card) and it can no longer scroll up as there is no more “space” below the last card to scroll to.

You can solve this simply by adding an empty space below the last card, sufficient for the scrolling to work. Typically an empty hotspot is used but you can use a transparant box or other non-visual element.

So open up the dynamic panel (state 1) and add a hotspot or transparant box below the last card.

Test again, and the scrolling should now work correctly.

Now the cards move up to the top

Finally, you can make each new card first invisible by default using “Set Hidden” on the group containing the card + button, and then in each button’s onClick code you can add the following lines :

This will first show the next card, pause a very small time, and then “swing” to that next card.

Your final animation now looks like this:

The complete example

Please let me know if you found this howto useful and if there are things that are not clear or in error so I can improve my tutorial.


Update: as requested, here is the link for the demo for this tutorial.

)

Alex Boschmans

Written by

Python and web fan. UX Design and Prototyping using Axure, Sketch and some Framer.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade