Thanks James. I’m looking for a real solution instead of putting the hotspot over iFrame. I’ve seen another thread here with some similarity for my issue. Can you give me little more explanation for this thread answer. Then I can try that from my side. I’ve a developer support available in my team. So editing some codes in and out is not a problem. Some how I need to find a solution for this.
Changing Dynamic Panel state in Parent Frame when ‘clicking’ Button in iFrame
Thanks
I’m not entirely sure that solution would work. Raised events work with Masters, not iframes (As far as I’m aware).
However, regardless of whether the solution would or wouldn’t work, both of the pages (Parent & child) are built in Axure, where you are looking to tie in an Axure page and an external page as parent and child. It’s not going to be easy. Remember that Axure is for prototyping, not creating production ready builds - sometimes the simplest way to convey a concept work best.
If you absolutely, positively HAVE to build the actual functionality, I would recommend speaking to Axure support directly (support@axure.com).
Personally, I would see if there were a way to simply prototype the external content within Axure, which would certainly start to simplify matters.
Hi Abhilash,
I have created change dynamic panel state from external HTML loaded in the iframe. Please check the attached RP file.
I hope it will be useful for you.
Thanks,
Vikram
Change_DP_iframe.rp (58.6 KB)
What Vikram has done backs up what I was saying. From an Axure page to an Axure page it is possible, but that doesn’t answer how to do it with an external page (An http url) in the iframe.
Vikram - nicely fudged. BUT, first time I ran the prototype, I thought the state change wasn’t working as I didn’t move the mouse. What you could do is loop (With OnPageLoad) a listener to move by (0,0) every 10ms or so and then action the state change using that widget’s OnMove.
And also - best practice is to be consistent with your variables. You set the variable to a text (Alpha) string with your click (On page 1), but you check that the variable is greater than 2 OnMouseMove, which is something you would do with a numeric string. Best to choose one convention and stick to that.
Sorry James, I misunderstood this problem. I completely agree with your suggestions.
Here’s an idea. In your Axure page that contains the iframe, add a Dynamic Panel and give it a name. Let’s call it ‘trigger.’ In your page you’re loading in the iframe, on whatever event you’re using, call this:
window.parent.$axure('@trigger').moveBy(0,0,{})
Then on the OnMove event of the panel ‘trigger’ add whatever actions you want.
window.parent.$axure(’[data-label=panel]’).SetPanelState(2, {}, false)
if you want to do it directly.
i didn’t manage to set the panel state by name but only by id.
if you want to set it by name your you have to integrate a function to the (parent) axure page that returns the id. that should not that difficult. I ve always been searching for a $axure function doing it for me but in fact its no rocket science to build it.
Gregor were you unable to get the AxQuery object at all by name or only SetPanelState didn’t work when you did?
I just tried it out and SetPanelState worked fine with the name.
window.addEventListener('click',function(){window.parent.$axure('@p').SetPanelState(2,{}, false)})
Tested with this by adding an iframe and adding the listener to the page within the iframe in the console.
AxQuery is working fine, I can’t use the panel-state-name to set the panel state. Thats why SetPanelState(2,{},false) instead of SetPanelState(‘State2’,{},false).
I’ve said it before; I’ll say it again. I need to learn more about using JQuery and Javascript in Axure.
Thanks nkrisc,
It works great 
I managed to change the state of panel from the click on external html that is being loaded in iFrame. But how to change the state with Animation like slideLeft and slideRight.
Thanks in advance for your thread.
You can either go with my earlier post and trigger the Move action of a panel with JS and then on the OnMove event of that panel put your actions which will let you set the animation in Axure (I recommend this way as it’s the “least” hacky and slightly easier to maintain. Or you can add the animation options to the empty object passed to the SetPanelState function, though I don’t recall the key names or correct values offhand so you’ll have to play around with that yourself, or someone else can chime in.
EDIT:
Took a look in the inspector. Here’s an example options object for setPanelState (you can probably extrapolate all the options from this):
{
animateIn: {
duration: 500,
easing: ‘slideRight’
},
animateOut: {
duration: 500,
easing: ‘slideRight’
}
}
I still would not recommend doing it this way unless you’re very comfortable with JavaScript.
Thanks for the reply. Unfortunately that didn’t work for my case. Below is the code in the external html.
<script>
function serch(){
window.parent.$axure('[data-label=panel]').SetPanelState({animateIn: {
duration: 3000,
easing: slideRight}}, 3, false)
}
</script>
</head>
<body>
<div onclick="serch()">link</div>
</body>
The dynamic panel’s state is changing to 3 when I click on the link but the animation for dynamic panel in axure not happening. I noticed the object and it’s functions in the Chrome browser console. Any cheat sheet available to understand the axure function that is being called to do the animation part of dynamic panels? That would be helpful for me to narrow down my effort to find a solution.
Thanks again!
I’m pretty sure the options object is the second parameter not the first.
Also there’s no cheat sheet, this is all undocumented and figured out by the community. This is officially unsupported by Axure, I’m sure.
I also made a mistake typing up the options, the easing values should be strings. In the code you provided, due to my mistake, slideRight is undefined. Put the parameters in the right place and make slideRight a string and it should work.
Hi Gregor -
I’m trying to do exactly this, and I’m not having success.
[ul]
[li]I have two prototypes up on Axshare, and a page of prototype1 loads a page of prototype2 in an iframe.
[/li][li]In prototype1’s page, I have a dynamic panel called “xxx” with multiple states
[/li][li]In prototype2’s page, I have a button with this code (in the Open Link external URL field):
[/li][/ul]
javascript:window.parent.$axure(’[data-label=xxx]’).SetPanelState(2, {}, false)
No luck. I tried wrapping the expression in a void, but no luck there, either:
javascript:void(window.parent.$axure(’[data-label=xxx]’).SetPanelState(2, {}, false))
(I don’t know much about integrating javascript into Axure. I’m hoping I’m just doing it wrong.)
If it’s not just a mistake on my part, it possible that it’s not working because both pages are not in the same prototype, and thus their URLs are different? (abcdef.axshare.com/whatever.html vs. ghijkl.axshare.com/whatever.html)
The reason I have this need at all is that I have a large prototype written in Axure 7, and I am slowly rewriting it from scratch in 8.0. As I create each page in 8, I use an iframe in my Axure 7 wires to display the 8.0 page.
Anyhow, help would be appreciated. Setting the state of a dynamic panel would be great as I could use OnPanelStateChange to control what happens when each state is selected.
Cheers,