Hi,
I recently started using AEM Forms 6.2 for developing adaptive forms and I'm a bit lost. How can I control the visibility of a button in the way, that it will be invisible until every mandatory field has been filled? I know I can use the visual editor to add such rules, but this solution is very cumbersome, as I would have to modify it permanently when adding or removing fields. I'm looking for a more comfortable solution, like a JavaScript that will permanentely check all those mandatory fields. Any ideas about this?
Solved! Go to Solution.
Views
Replies
Total Likes
Have you tried adding your elementValueChange listener in the Initialize of the main Root Panel of your Form?
e.g.
window.guideBridge.on("elementValueChanged", myElementValueChangeHandler);
function myElementValueChangeHandler (event, payload) {
myButton.visible = (window.guideBridge.validate()) ? true : false;
}
Views
Replies
Total Likes
You can write a common API which is execute on valueCommit and does this.parent.validate([]). And if that returns true, enable the button else skip that.
Alternate would be to listen to guideBridge event called elementValueChanged which wraps the field object in the event payload. And you could call the similar(as above) API and make the button visible/hidden.
Unfortunately, I don't have snippet available, but git it a shot.
Views
Replies
Total Likes
Thanks for the feedback. I've tried to set up an event listener at the initialization event of the button. But so far nothing happens. Here's the script I'm using.
window.addEventListener("bridgeInitializeStart", function(evnt){
guideBridge.on("elementValueChanged",function(event, element){
var bPassed = window.guideBridge.validate([]);
//console.log(bPassed);
if (bPassed === true) {
setPresence(false);
} else {
setPresence(true);
}
});
});
function setPresence (bPresence) {
this.visible = bPresence;
}
How can I define an event listener for adaptive forms? The documentation isn't very precise at this point.
Views
Replies
Total Likes
You can go to code editor of the button. Add this script to Visiblity Event and return !bPassed. This should help with your use case.
Hope this is the event listener you are looking for.
Views
Replies
Total Likes
Try using guideBridege - validate but check for the number of errors produced:
function clickNext(currentPanel){
var errorList = [];
try {
guideBridge.off("validationComplete"); // turned off validation complete here if you have any other events dependant on validation of entire form.
} catch (e){ }
guideBridge.validate(errorList,currentPanel.somExpression); // the panel is the area you wish to validate - it can be the entire form.
turnOnValidationComplete(); // turn back on validation event if you turned it off.
var numberOfErrors = errorList.length;
// this number will tell you the number of and type of errors.
// code to go forward and backward can be restricted based on the number of errors. In this case, we just let the user move forward.
if (currentPanel.parent.panel.navigationContext.hasNextItem) {
// when this item is true, we need to skip to the next section.
window.guideBridge.setFocus(currentPanel.parent.panel.somExpression,"nextItem",true);
} else {
window.guideBridge.setFocus(currentPanel.parent.panel.parent.panel.somExpression, 'nextItem', true)
}
}
function turnOnValidationComplete(){
try {
guideBridge.on("validationComplete", function(event, data) {
if (data.jsonModel.newText.length > 0)
alert(Granite.I18n.get("azdes.failedValidate"));
else
window.onbeforeunload = null;
});
} catch (e){
console.log("Could not turn validationComplete on");
}
}
Views
Replies
Total Likes
Have you tried adding your elementValueChange listener in the Initialize of the main Root Panel of your Form?
e.g.
window.guideBridge.on("elementValueChanged", myElementValueChangeHandler);
function myElementValueChangeHandler (event, payload) {
myButton.visible = (window.guideBridge.validate()) ? true : false;
}
Views
Replies
Total Likes
Moris,
Do you have a screenshot of how to do this? I'm trying to do via the Rules Editor on my 6.2 form guideRootPanel, but am not being successful.
Thanks!
Views
Replies
Total Likes
Views
Likes
Replies
Views
Likes
Replies