Hey There!
I was wondering if there was any way to use javascript in the stand-alone (not cloud-based) version of Axure RP 10? It doesn’t appear so. I am unable to use the cloud version due to compliance reasons.
I suppose I could always edit the generated html files, although that would not be an ideal solution.
Any insight appreciated
Hello @iceninexp,
Thanks for submitting this topic and for your patience.
It is possible to use Javascript within the local preview of your Axure RP project.
To do this, we’ll need a way of triggering the Javascript function. This is usually achieved via a Click or Tap > Open External Link interaction. But it could be used with other interactions that can access a custom value.
Attached is a file with a basic example of sending an Alert to the browser window.
To set this up:
- Create a widget with a Click or Tap Interaction
- Add an ‘Open Link’ action, set this to ‘Open an External URL’
- In the value field, we’ll click the small ‘fx’ icon, and include the following, ensuring the ‘javascript:’ prefix is present.
javascript: (function () {alert('Hello World');})();
- Preview the prototype to ensure the changes are taking effect. You should be able to use most Javascript functions within your prototype, but some functions may not work as expected.
At the moment, we don’t typically support 3rd party code in Axure RP prototypes. But if you find anything that isn’t working as expected we’d love to hear more about it.
I hope this proves useful, if you’re able to share what you’re working on that requires a custom function, it might be something we can include as feature in the future.
JSAlertExample.rp (42.6 KB)
James
Thanks so much for the response James
I am trying to get an expanding text area that increases in height as entered characters need to wrap to the next row. I can accomplish this with vanilla javascript and css. I don’t see any components in the library that can do this. I did not see anything in the Axure RP 11 Beta that mentioned it.
I’ve attached a text doc with the html of the behavior I am trying to achieve. Is this going to be possible with the standalone version ?
Thanks so much
textarea-div-autoexpand-shrink.txt (4.3 KB)
@James_Axure Any luck with the above? Thanks!
I think if you wrap all of the relevant css, html and js into an IIFE
it’s that (function() { <SCRIPT GOES HERE> })();
structure then you can use it James’ answer just as it is.
However, I have some recommendations on top of that:
- if this textarea is coming from an Axure shape, you need to do the following:
- insert the identifier for this control into the label field in Axure, you can reuse this ‘autoExpandTextarea’ string for it.
- modify
const textarea = document.getElementById('autoExpandTextarea');
to
const textarea = document.querySelector('[data-label*="autoExpandTextarea"]');
this querySelector targets the first item it finds with that string inside the label field.
- your css will not work properly if you’re targeting Axure shape, as prototypes have an abnormal HTML structure. I’ve been looking into it pretty closely recently - though not since RP 11 came out. I can probably help you figure out how to “Axurify” your styling if you DM me here.
- your script doesn’t work i think because it’s applying CSS incorrectly. You already set the max-height of the textarea in the css, so this line here is unnecessary
const newHeight = Math.min(textarea.scrollHeight, 100);
change it to just const newHeight = textarea.scrollHeight
and i think it should work after that
1 Like
@bamorris
Thank you so much for an incredibly detailed answer!
I’m in the process of attempting to implement this and will update.
Thanks again!
1 Like