Currently I am building an axure library with some basic reusable components. One of the components is a button so that some fields of a form can be prefilled with data (will be personal data after authentication).
So I have following components created:
A: button to prefill
B: name/firstname
C: address
D: email/telephone
You can make combinations with these components. Like ABC or ABD or ACD, etc. So I can’t make 1 component containing ABCD because you should be able to make different combinations.
What I would like to do is that when you click on the button the fields in component B, C and D are prefilled. I want to do this in the library so when I create a form I don’t have to do this every time again and again.
The problem here is that B, C and D are on seperate pages and I cannot access them when I add an onclick event on the button. I also tried to use javascript but axure(’@widget_name’).text or .val doesn’t work in Axure 8. I was thinking to use global variables but this doesn’t look the correct way.
It contains 4 widgets (A,B,C,D). With this library you can make forms.
Example: I make a form with the widgets A, B and D.
I want that if you click on the button in widget A, the fields in widgets B, C and D are prefilled with some value. I want to program this behaviour in the library so I don’t have to do this in every form I create using this library.
But when I use an onclick event on the button I cannot select the widgets from B, C and D with the settext method.
If I understand what you want, it can’t be done. Widgets on separate pages/masters can’t interact with one another. You’ll have to manually wire up the form each time you make it, or you’ll need to make pre-made masters that account for each possible variation.
Alternatively you could possibly use a repeater in a single master to make a configurable form.
Note: this sort of thing isn’t officially supported by Axure
There’s a bug in the JS file that I think has been around for a while that prohibits you from setting the text via JS. You essentially need to shim in the setWidgetText function because it’s missing. You’ll want to add this JS to your file, either using a plugin on axshare or using an event on PageLoad to add it. The code also fixes an issue with getting a global variable’s value. Anytime I am messing with JS I include this snippet:
(function () {
$axure.internal(function($ax){
//Fix for axure's bug where this function doesn't return anything.
$ax.public.getGlobalVariable = $ax.getGlobalVariable = function(name) {
return $ax.globalVariableProvider.getVariableValue(name);
};
//Currently setting the text on an input widget throws an error that SetWidgetFormText doesn't exist.
// This shim fixes that error
SetWidgetFormText = function(elementIds, value) {
//Need to check if elementIds is a string or array. If it's a string this will never work.
if(typeof elementIds == "string") {
elementIds = Array(elementIds);
}
//This is the original function from Axure's expr.js
for(var i = 0; i < elementIds.length; i++) {
var elementId = elementIds[i];
var inputId = $ax.repeater.applySuffixToElementId(elementId, '_input');
var obj = $jobj(inputId);
if(obj.val() == value || (value == '' && $ax.placeholderManager.isActive(elementId))) return;
obj.val(value);
$ax.placeholderManager.updatePlaceholder(elementId, !value);
if($ax.event.HasTextChanged($ax.getObjectFromElementId(elementId))) $ax.event.TryFireTextChanged(elementId);
}
};
});
})();
I modified it so it uses your function. But it doesn’t seem to work. Could you take a look?
See attached file. Note: for testing i put the button and field in the same widget.
When I add
//Currently setting the text on an input widget throws an error that SetWidgetFormText doesn't exist.
// This shim fixes that error
SetWidgetFormText = function(elementIds, value) {
//Need to check if elementIds is a string or array. If it's a string this will never work.
if(typeof elementIds == "string") {
elementIds = Array(elementIds);
}
//This is the original function from Axure's expr.js
for(var i = 0; i < elementIds.length; i++) {
var elementId = elementIds[i];
var inputId = $ax.repeater.applySuffixToElementId(elementId, '_input');
var obj = $jobj(inputId);
if(obj.val() == value || (value == '' && $ax.placeholderManager.isActive(elementId))) return;
obj.val(value);
$ax.placeholderManager.updatePlaceholder(elementId, !value);
if($ax.event.HasTextChanged($ax.getObjectFromElementId(elementId))) $ax.event.TryFireTextChanged(elementId);
}
};
I tried a few different things trying to get the code to work in your file and couldn’t get it work. Various errors come up in the console and I don’t have the time to debug this. But…
Here’s a working sample using the approach I use for injecting JS - see attached with a working sample with your function.
Is someone capable of debugging? My javascript knowledge is not good enough.
I don’t understand why it works in your example and in my example it gives an error…
