Hi everyone, a question for you

Axure RP 8
1

Hi everyone. how are you?
I’m building a grocery app wire frame in axure.
i have a page with icons of food products to choose.
Is it possible to choose few products (icons) and then see the same ones i choose in the next page, (with the icons)?
if so, i really need to understand how i do it/

i thank you all
have a great weekend
AMIR

grocery app.rp (61.3 KB)

2

Hi Amir - here’s a tutorial on passing values from one page to another. You can adapt this to show or hide icons on the second page based on the variables set on the first, by using OnPageLoad interactions to check the variables and apply the appropriate changes.

3

i know it woks with text. will it work with icons too? tnx

4

Variables don’t necessarily have to be passed straight through and displayed - you can just use them to record things. So you could set a global variable called ‘ShowBread’ to ‘Yes’, then on Page 2, use an OnPageLoad action to check whether ‘ShowBread’ is ‘Yes’, and if it is, show the icon.

5

ok. i’ll try. tnx a lot
AMIR

6

if you have time, can you please make me a small example? i’m lost.
if not…its also ok
thanks for all your tips
AMIR

7

@amirtzadok,

Global variables can only contain text, not icons, so as @davegoodman points out, you can use the value of a global variable to show/hide/change an icon, which means that same icon would need to be on both pages. See this update to your .rp file:

grocery app.rp (106.5 KB)

I first converted your SVGs to Shapes so they could be easily colored to show when they are selected. I copied all the widgets to page2 and set them to hidden for the default view. Back on page 1 I set up an OnClick event for the first widget so clicking it toggles its selection state (true/false). On selection it adds its widget name to the global variable, OnLoadVariable:
Set value of OnLoadVariable to [[OnLoadVariable]] [[This.name]]
When it is deselected, it removes its name from OnLoadVariable:
Set value of OnLoadVariable to [[OnLoadVariable.replace(This.name, '')]]
I also added an OnLoad event to set itself to selected if OnLoadVariable contains its own name. (This makes it so flipping back and forth between page 1 and page 2 retains the selected items.)
I then copied the OnClick and OnLoad events to the remaining widgets so they all behave the same.

When page 2 loads, each item handles itself with an OnLoad event:
If value of OnLoadVariable contains "[[This.name]]" Show This

This method of using one global variable means that you can add or remove any widgets and it will still work–just be sure to copy all the code to your new widgets and replicate the widgets on both pages.

1 Like