Table of Contents

Axure Javascript API

This page documents the unofficial Axure 8 Javascript API. Use this information at your own risk. Axure 9 is out in a beta version. Expect some changes to the javascript API. A quick test indicate it is not that different from Axure 8.

$axure

$axure.setGlobalVariable(name, value)

:!: This function is broken in Axure 7 & 8. It is not possible to set a global variable to an empty string.

Only global variables defined in the Axure IDE can be set.

javascript: $axure.setGlobalVariable('Hello', 'World'); void(0);

$axure.getGlobalVariable(name)

:!: This function is broken in Axure 7 & 8. It always returns undefined. The bug and a fix for it is described here. In order to make the example below work in Axure 7 the getGlobalVariable function must be patched. The AxureEx library patches the getGlobalVariable for you.
javascript: alert($axure.getGlobalVariable('Hello')); void(0);

$axure.closeWindow()

I don't know how to use this function.

$axure.reload(includeVariables: boolean)

I don't know how to use this function.

$axure.back()

I don't know how to use this function.

$axure.utils.loadCSS(url)

I don't know how to use this function.

$axure.utils.loadJS(url)

I don't know how to use this function.

$axure(query)

javascript:$axure('@Widget').text('Hello'); void(0);

What happens in the code above is that the Axure framework is asked to find all widgets called Widget and set the text of these widgets to Hello. Notice that there is a @ in front of the widget name. The @ tells the framework to search for widgets with a given name. It also possible to search for other things;

  • Query by widget name. The query is $axure('@WIDGET'). Notice that the widget named is prefixed by “@”.
  • Query by widget id. The query is $axure('#id'). Notice that the widget id is prefixed by “#”.
  • Query by match function. They query is $axure(isMatch).
  • Query all widgets. $axure('*').

On the result returned by this query it is possible to call a number of functions. I have documented some these function.

$axure(query).$() or $axure(query).jQuery()

Get the jQuery object of the widget.

javascript: $axure('@name').$().css('left', '10px'); void(0);

$axure(query).IsButton(type)

I don't know how to use this function.

$axure(query).IsCheckBox(type)

I don't know how to use this function.

$axure(query).IsComboBox(type)

I don't know how to use this function.

$axure(query).IsConnector(type)

I don't know how to use this function.

$axure(query).IsDynamicPanel(type)

I don't know how to use this function.

$axure(query).IsIamgeMapRegion(type)

I don't know how to use this function.

$axure(query).IsImageBox(type)

I don't know how to use this function.

$axure(query).IsInlineFrame(type)

I don't know how to use this function.

$axure(query).IsLayer(type)

I don't know how to use this function.

$axure(query).IsListBox(type)

I don't know how to use this function.

$axure(query).IsMaster(type)

I don't know how to use this function.

$axure(query).IsMenuObject(type)

I don't know how to use this function.

$axure(query).IsPage(type)

I don't know how to use this function.

$axure(query).IsRadioButton(type)

I don't know how to use this function.

$axure(query).IsReferenceDiagramObject(type)

I don't know how to use this function.

$axure(query).IsRepeater(type)

I don't know how to use this function.

$axure(query).IsSnapshot(type)

I don't know how to use this function.

$axure(query).IsTable(type)

I don't know how to use this function.

$axure(query).IsTableCell(type)

I don't know how to use this function.

$axure(query).IsTextArea(type)

I don't know how to use this function.

$axure(query).IsTextBox(type)

I don't know how to use this function.

$axure(query).IsTreeNodeObject(type)

I don't know how to use this function.

$axure(query).IsVector(type)

I don't know how to use this function.

$axure(query).bind()

I don't know how to use this function.

$axure(query).bodyToWorld(x, from)

I don't know how to use this function.

$axure(query).bringToFront()

Put widget(s) in front of other widgets, by setting the z-index of the widgets. It is also possible to move widgets in front of other widgets by moving it in the DOM. Both methods have advantages and disadvantages.

Using the Axure framework;

javascript: $axure('@name').bringToFront(); void(0);

Using DOM manipulation;

(function () {
    var widget = $axure('@name').$();
    widget.parent().append(widget);
})();

$axure(query).checked([value: boolean])

I have not explored what this function do, but I guess it can be used to read/write the checked value of a checkbox.

$axure(query).circularMoveAndRotate(degreeChange, options, centerPointLeft, centerPointTop, doRotation, moveDelta, resizeOffset, rotatableMove, moveComplete)

$axure(query).click([handler: function])

If handler is not specified then simulate a “click” on widget(s) and execute actions assigned to OnClick events. The widgets must be visible, otherwise it does not work.

If handler is a function then assign this function to the click event. I have not tested how this works.

javascript: $axure('@name').click(); void(0);

$axure(query).compoundIdFromComponent(id)

I don't know how to use this function.

$axure(query).convertToSingleImage(jobj)

I don't know how to use this function.

$axure(query).css(name, value)

Change the css properties of the widget(s).  

javascript: $axure('@name').css({'left': '10px'}); void(0);

$axure(query).displayHackEnd(displayChangedList)

I don't know how to use this function.

$axure(query).displayHackStart(element)

I don't know how to use this function.

$axure(query).each(fn: function)

Call a function with the elementId of the widget(s) in the query.

javascript:
$axure('*').each(function (element, elementId) {
    console.log(elementId);
});
void(0);

$axure(query).enabled([value: boolean])

This function does not work for text fields (and maybe other widget types). For a text field it always returns “true”.

The disabled state of a widget can be used to much more than make the widget look disabled. See it as a possibility to switch between two “appearances” of a widget. Maybe one day you can specify a range of “appearances” of a widget…

$axure(query).expanded([value: boolean])

I have not explored what this function do, but I guess it can be used to read/write the expanded value of a tree item.

$axure(query).filter(query, queryArg)

I have not explored what this function do, but I guess it can be used to apply an additional filter to a query.

$axure(query).focus()

Give input focus to a widget.

javascript: $axure('@name').focus(); void(0);

$axure(query).fourCornersToBasis(fourCorners)

I don't know how to use this function.

$axure(query).getBoundingSizeForRotate(width, height, rotation)

I don't know how to use this function.

$axure(query).getChildren(deep)

Find the children of a widget.

  • If deep is false only include direct children.
javascript: $axure('@name').getChildren(true); void(0);

$axure(query).getComponentId(id, componentId)

I don't know how to use this function.

$axure(query).getContainerDimensions(query)

I don't know how to use this function.

$axure(query).getElementIds()

Get a list of all the widget(s) elementIds.

javascript: (function () {
 
var ids = $axure('*').getElementIds();
for (var i; i < ids.length; i++) {
    console.log(ids[i]);
};
 
})();

$axure(query).getElements()

I don't know how to use this function.

$axure(query).GetFieldFromStyle(query, field)

I don't know how to use this function.

$axure(query).getLayerChildrenDeep(layerId, includeLayers, includeHidden)

I don't know how to use this function.

$axure(query).getParents(deep, filter)

In Axure 8 the arguments to this function have changed.

Get a list of all the widget(s) parents. If deep is true then both the parents and their parents are returned. Sometimes some of the returned parent elementIds do not exist in the DOM. In AxureEx I have added the function exGetParent that only return parents that exist in the DOM.

javascript: (function () {
 
// Get immediate parents
var parents = $axure('@child').getParents(false, '*');
for (var i; i < parents.length; i++) {
    console.log(parents[i]);
}
 
// Get all parents
var parents = $axure('@child').getParents(true, '*');
for (var i; i < parents.length; i++) {
    var ids = parents[i];
    for (var ii; ii < ids.length; ii++) console.log(ids[ii]);
}
 
})();

$axure(query).getPointAfterRotate(angleInDegrees, pointToRotate, centerPoint)

I don't know how to use this function.

$axure(query).getPositionRelativeToParent(elementId)

I don't know how to use this function.

$axure(query).getWidgetBoundingRect(widgetId)

I don't know how to use this function.

$axure(query).height()

Get the height of widgets.

javascript: 
alert(‘Widget height is ‘ + $axure(@name’).height();

$axure(query).hide(options)

Make widget(s) invisible. The options argument can be {} but it can also specify how to animate the change in visibility. In addition to that options can also specify that widgets below or right of the widget(s) should be “pulled” up or to the left.

javascript:
 
$axure('@fade').hide({
    easing: 'fade',
    duration: 500
});
 
$axure('@push').hide({
    showType: 'compress',
    vertical: true,
    compressEasing: 'swing',
    compressDuration: 500
});
 
void(0);

$axure(query).isCompoundVectorHtml(hElement)

I don't know how to use this function.

$axure(query).l2(x, y)

I don't know how to use this function.

$axure(query).left(relative)

Get the left position of widgets.

javascript: 
alert(‘Widget left is ‘ + $axure(@name’).left();

$axure(query).locRelativeIgnoreLayer(vert)

I don't know how to use this function.

$axure(query).matrixInverse(matrix)

I don't know how to use this function.

$axure(query).matrixMultiply(matrix, vector)

I don't know how to use this function.

$axure(query).matrixMultiplyMatrix(matrix1, matrix2)

I don't know how to use this function.

$axure(query).matrixString(m11, m21, m12, m22, tx, ty)

I don't know how to use this function.

$axure(query).mouseenter()

I don't know how to use this function.

$axure(query).mouseleave()

I don't know how to use this function.

$axure(query).moveBy(x, y, options)

In Axure 8 options is not an optional argument. To specify no options use {}.

Move widget(s) by x, y pixels. The options argument can be {} but it can also specify how to animate the movement.

javascript:
$axure('@name').moveBy(100, 100, {
    easing: 'swing',
    duration: 500
});
void(0);

Moving a widget by 0, 0 pixels still trigger the OnMove event on the widget. This enable the OnMove event to be used as a “function” that can be called from other widgets and javascript. Moving a widget by 0, 0 pixels does not have the same side effects and limitations that simulating a click on a widget have.

javascript: $axure('@name').moveBy(0, 0, {}); void(0);

$axure(query).moveTo(x, y, options)

In Axure 8 options is not an optional argument. To specify no options use {}.

Move widget(s) to location x, y. The options argument can be {} but it can also specify how to animate the movement.

javascript:
$axure('@name').moveTo(100, 100, {
    easing: 'swing',
    duration: 500
});
void(0);

I don't know how to use this function.

$axure(query).readAttribute(object, attribute)

I don't know how to use this function.

$axure(query).removeCompound(jobj)

I don't know how to use this function.

$axure(query).resize(newLocationAndSizeCss, resizeInfo, axShouldFire, moves, onCompletedFunc)

Change the size of a widget.

javascript:
$axure('@name').resize({width: 100, height: 100}, {}); void(0);

$axure(query).restoreCompound(jobj)

I don't know how to use this function.

$axure(query).rotate(degree, easing, duration, to, axShouldFire)

I don't know how to use this function.

$axure(query).rotationMatrix(angleInDegrees)

I don't know how to use this function.

$axure(query).scroll(scrollOption)

I don't know how to use this function.

$axure(query).selected([value: boolean])

Get or set the selected state of widgets.

javascript:
alter(‘Is selected ‘ + $axure('@name').selected());
$axure('@name').selected(true);

$axure(query).SetPanelState(stateNumber, options, showWhenSet)

Set the state of dynamic panel(s) to the state with number stateNumber. The options argument can be {} but it can also specify how to animate the panel state change. If showWhenSet is true the dynamic panel is also made visible (if it was not already visible).

AxureEx creates a dupliacte of this function named setPanelState. Normally function names start with a lowercase letter.

AxureEx provides the function exGetPanelStates that can be used to map between state names and state numbers.

AxureEx also provides the function exGetPanelState that can be used to read the state of a panel.

javascript: (function () {
 
// Find widget (must be a dynamic panel)
var query = $axure('@name');
 
// Set State by Number
query.SetPanelState(1, {}, false);
 
// Set State by Name (using an AxureEx function)
query.SetPanelState(query.exGetPanelStates()["State 1"], {}, false);
 
// Alternative Set State by Name (using an AxureEx function)
query.exSetPanelStateByName("State 1", {}, false);
 
})();

$axure(query).sendToBack()

Put widget(s) behind other widgets, by setting the z-index of the widgets. It is also possible to move widgtes behind other widgtes by moving it in the DOM. Both methods have advantages and disadvantages.

Using the Axure framework;

javascript: $axure('@name').sendToBack(); void(0);

Using DOM manipulation;

(function () {
    var widget = $axure('@SendToBack').$();
    widget.parent().prepend(widget);
})();

$axure(query).setOpacity(opacity, easing, duration)

I expect this function changes the opacity of widgets, but I have not used it so far.

$axure(query).setRichTextHtml([value: text])

I don't know how to use this function.

$axure(query).setTransformHowever(transformString)

I don't know how to use this function.

$axure(query).show(options, eventInfo)

Make widget(s) visible. The options argument can be {} but it can also specify how to animate the change in visibility. In addition to that options can also specify that widgets below or right of the widget(s) should be “pushed” down or to the right. I don't know what eventInfo is used for.

javascript:
 
$axure('@fade').show({
    easing: 'fade',
    duration: 500
});
 
$axure('@push').show({
    showType: 'compress',
    vertical: true,
    compressEasing: 'swing',
    compressDuration: 500
});
 
void(0);

$axure(query).size()

Get the size of widgets.

javascript:
alert($axure('@name').size());
void(0);

$axure(query).text(value)

:!: This method is broken in Axure 8 build 8.0.0.3338 and up. After setting the text of a widget to a text that contains line breaks, the text() method returns an empty string. When a text contains special characters such as <script> the method fails - this many happen the first time the method is called.

Get text using Axure API:

javascript:
alert($axure('@NAME').text());
void(0);

Set text using Axure API:

javascript:
$axure('@NAME').text('hello');
void(0);

When the text is changed using the Axure API the new value is reflected in “The text of widget” otherwise it is not.

Get text using jQuery API:

javascript:
alert($('[data-label="NAME"] p span').html());
void(0);

Set text using jQuery API (Notice that Axure actions will not be aware of the change):

javascript:
$('[data-label="NAME"] p span').html('hello');
void(0);

$axure(query).toggleVisibility(options)

I expect this function changes the visibility of widgets, but I have not used it so far.

$axure(query).top(relative)

Get top position of widgets.

javascript:
alert('Top is ' + $axure('@name').top());
void(0);

$axure(query).transformFromElement(element)

I don't know how to use this function. I expect this function changes the visibility of widgets, but I have not used it so far.

$axure(query).val()

I don't know what this functions does. The function $axure(query).value() is used to get and set the text of input fields.

$axure(query).value(text)

:!: This fuction seems to be broken in Axure 8.1.0.3372. The method always returns an empty value, and the method does nohting when called with a value.

Get or set the text on an input field.

javascript:
alert('Value is ' + $axure('@name').value());
$axure('@name').value('New value')
void(0);

$axure(query).vectorMidpoint(vector1, vector2)

I don't know how to use this function.

$axure(query).vectorMinus(vector1, vector2)

I don't know how to use this function.

$axure(query).vectorPlus(vector1, vector2)

I don't know how to use this function.

$axure(query).visible()

I expect this function changes the visibility of widgets, but I have not used it so far.

$axure(query).width()

Get width of widgets.

javascript:
alert('Width is ' + $axure('@name').width());
void(0);