So here is a sample I did up that is a pretty common use-case: dynamically adding panels to a form based on a numeric value found in a field. For example, you ask the form user "how many dependents to claim on their tax form" Based on the number added to the form, show or hide the appropriate number.
This was write for AEM 6.0, but should work in future releases as it uses the guidebridge object to capture an event (in this case the filling a numeric field) and respond by adding additional panels to the form. For more information about the guidebridge, see JSDoc: Class: GuideBridge
Attached is a package ( https://www.dropbox.com/sh/rg2xvgx29x7rn28/AAA4yvnXh0VKaTVleMxoRifxa?dl=0) you can test with, as well, I have included the JSP script below that is included when the Adaptive Form is loaded in the browser.
-----------------------------
<%------------------------------------------------------------------------
~ Created by Gary Thain: 02/25/2015
~ This sample will add/remove additional panels to a Adaptive Form
~ Requires:
~ /apps/af-training-demos
~ /af-training-demos-scripts/addpanels.jsp
~ /etc/clientlibs/af-training-demos
~ /content/dam/formsanddocuments/af-training-demos
~ /content/forms/af/af-training-demos
~ Geometrixx Gov installed (for css)
--------------------------------------------------------------------------%>
<%@include file="/libs/fd/af/components/guidesglobal.jsp"%>
<script>
/*
Then create an event listner to listen for the change event
If change event is on the txtPanelNum field call function
to add additional panels
*/
window.addEventListener("bridgeInitializeStart", function(evnt){
guideBridge.on("elementValueChanged",function(evt,fld){
if(fld.target.name == 'txtPanelNum')
{
var sRepeatPanel = "guide[0].guide1[0].guideRootPanel[0].subFlow[0].subRepeat[0]";
var oPanelRepeat = guideBridge.resolveNode(sRepeatPanel);
addpanels(fld.target.value,oPanelRepeat);
}
})
})
/*
Function to Add or Remove repeatable panels
*/
function addpanels(iEntered,oPanel){
var iEntered = Number(iEntered);
var iCurrentNum = Number(oPanel.instanceManager.instanceCount);
var iMaxNum = Number(oPanel.maxOccur);
var iDifNum = Number(iMaxNum - iCurrentNum);
if(iEntered>0){
if(iDifNum > 0){
if(iEntered!=iCurrentNum){
//Add panels
if(iEntered >iCurrentNum){
var iAddNum = iEntered - iCurrentNum;
var iFinalCheck = iCurrentNum + iAddNum;
if(iFinalCheck <= iMaxNum){
for (i = 0; i < iAddNum; i++) {
oPanel.instanceManager.addInstance();
}
}
}else{
//Remove panels
var iIndexRemove = iCurrentNum;
while(iIndexRemove!=iEntered){
iIndexRemove=iIndexRemove-1;
oPanel.instanceManager.removeInstance(iIndexRemove);
}
}
}
}
}
}
</script>
