Switching Panel State out of iFrame

Hi guys - first time javascript :frowning:

I have one page with a DynamicPanel which has an iFrame on it.
The iFrame is referring to another page.
From there i want to change the previous PanelState with an onClick event.

In Axure RP9Beta i added on the widget “Open Link / Link to external URL / Current window” and wrote into space for the URL (Is this correct? :grinning:)

javascript:
var w = window.parent; 
w.$axure('@Panel').SetPanelState('PanelState');
void(0);

But it shows no reaction when clicking. Mouse is changing though.

Im thinking of not adressing the Panel correctly, because it is on another page. Do i have to indicate the Page like

('@Page1.Panel')

Am i doing it the right way?

:thinking:

Did you check for errors in the browser? You’re probably getting an error. You need pass an options object (even if it’s empty) for that function to work. I’m also not sure if you can use the panel name, where did you see that? You might need to use a number for the state index, such as 1.

w.$axure('@panel').SetPanelState(1, {});

In my limited testing using the state name did not work.

1 Like

Thats it, works now :relieved: I did expect the panel names would be correct for adressing. I got the code from an other example where a variable was in there, i cleared that out without thinking.

Thank you @nkrisc :slight_smile:

Going further on this, can i initiate a page transition in the js-code aswell?
Like

.transition(swipeLeft, 500, 500);

? :thinking:

Yes but not like that, there’s no such function like that. That’s what that empty object is for. Instead of {} it will look something like:

{
  animateIn: {
    duration: 500,
    easing: 'slideRight'
  },
  animateOut: {
    duration: 500,
    easing: 'slideRight'
  }
}

There’s no complete reference I’m aware so you’ll have to take a look at the options in Axure and try swapping things out if these aren’t the settings you want. Some things like duration are pretty clear, but I don’t know all the correct names for the different easings.

So:

w.$axure('@panel').SetPanelState(1, {
  animateIn: {
    duration: 500,
    easing: 'slideRight'
  },
  animateOut: {
    duration: 500,
    easing: 'slideRight'
  }
});
2 Likes