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
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

AEM 6.2 Forms Hide Button until all mandatory fields are filled

radzmar
Level 10
Level 10

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?

1 Accepted Solution
Moris_Mihailidi
Correct answer by
Level 2
Level 2

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;
}

View solution in original post

6 Replies
deepak_k_
Employee
Employee

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.

radzmar
Level 10
Level 10

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.

Anish_Somani
Level 2
Level 2

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.

lesutton1
Level 3
Level 3

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");

  }

}

Moris_Mihailidi
Correct answer by
Level 2
Level 2

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;
}

View solution in original post

Christopher_Pa4
Level 4
Level 4

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!