While I don’t think you can pass images (i tried a couple different methods to no avail), but you can fake it in two ways (perhaps more but these are what came to me).
With a dynamic panel
HCI dyn panel.rp (4.1 MB)
- Add a new dyn panel to State 1 containing all avatar pictures, each state named based on the corresponding email value that goes in the gmail variable so we can reuse that interaction behaviour.
- Modify the style of _ to be left aligned with left padding to account for the avatar image next to it
The logic is simple:
- When a user is picked in State 2, it sets the new dynamic panel in State 1 to value of the gmail variable.
- all your existing interactions remain as is
With two repeaters
HCI Dupe Repeater.rp (4.1 MB)
- In State 2, the user selection shapes have been moved into a repeater
- In State 1, the selected User element (what was _) is also a repeater it’s a duplicate of the repeater in State 2 with style differences.
- On Load, this repeater filters itself to only show the row whose index matches the global variable “selectedIndex”.
- The dynamic panel around the Selected User repeater is not directly necessary in a functional sense, it just hides the extra unseen rows from your Axure editor.
I’ll walk you through the logic:
- When a row is clicked in State 2: it sets the global variable selectedIndex to Item.Index (that is, the index of the row that gets clicked - Jake is on 1, Marie is on 2)
- It fires the Loaded event on the repeater I added to State 1 (this reapplies the filter using the new value in selectedIndex - click Marie to see the change)
- Then it flips back to State 1 and you’ll see Marie’s name and picture is now visible.
I can see both methods being useful in different places, the repeater version might be overdoing it in this use case but that method may come in handy if you have multiple variable pieces of data to “pass” back and forth between pages.
Some other suggestions, general tips:
- when dealing with an interaction for a group of shapes, I find it’s better to put interactions on the group itself, not the shapes within. You’ll find yourself losing your interactions. If you need a secondary actions on shapes inside the group, you can still adding those and have them work, but clicking anywhere else will fire the group’s interaction - this is currently applied in my attachment
- there’s some minor caveats to the previous point, largely related to interactions that occur when something is selected or unselected though when inside repeaters, you’ll find it better to have Selected/Unselected actions update repeater rows instead of the shapes directly, you’ll lose all your selection states if Item Load is fired again.
- this way you can then put that rounded rectangle on the bottom of the repeater item, because what if someone asks you “what if the current user could be indicated with a background color on the item” and then you have to insert a whole other control under everything, better to use less shapes where you can
- this repeater method I’ve demonstrated does have a bit of a higher cognitive cost in understanding what you were doing if you come back to the file, but I think it’s a lower maintenance cost, if you update the users repeater in State 2, you’ll need to make the same updates in State 1 but that’s just a copy-paste operation as opposed to having to add and rename a bunch of states and photos.
- you should put your actions that flip between these states that define your login flow pages as the last action - if you have a set of interactions that runs a bit slow, you’ll have a bunch of changes happening in front of the user and that could look unsightly. I do all my panel state updates before I flip to that state.
