Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Adding Panels Dynamically to an Adaptive Form using the GuideBridge

Avatar

Level 2

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>

0 Replies