AEM 6.2 Forms Hide Button until all mandatory fields are filled

Avatar

Avatar
Coach
MVP
radzmar
MVP

Likes

397 likes

Total Posts

2,687 posts

Correct reply

492 solutions
Top badges earned
Coach
Ignite 3
Ignite 1
Validate 1
Give Back 50
View profile

Avatar
Coach
MVP
radzmar
MVP

Likes

397 likes

Total Posts

2,687 posts

Correct reply

492 solutions
Top badges earned
Coach
Ignite 3
Ignite 1
Validate 1
Give Back 50
View profile
radzmar
MVP

28-11-2017

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?

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Boost 1
Level 1
Moris_Mihailidi
Level 1

Like

1 like

Total Posts

10 posts

Correct reply

2 solutions
Top badges earned
Boost 1
Validate 1
Affirm 1
View profile

Avatar
Boost 1
Level 1
Moris_Mihailidi
Level 1

Like

1 like

Total Posts

10 posts

Correct reply

2 solutions
Top badges earned
Boost 1
Validate 1
Affirm 1
View profile
Moris_Mihailidi
Level 1

11-12-2017

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

Answers (5)

Answers (5)

Avatar

Avatar
Validate 10
Level 3
Christopher_Pa4
Level 3

Likes

16 likes

Total Posts

54 posts

Correct reply

4 solutions
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile

Avatar
Validate 10
Level 3
Christopher_Pa4
Level 3

Likes

16 likes

Total Posts

54 posts

Correct reply

4 solutions
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile
Christopher_Pa4
Level 3

20-02-2018

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!

Avatar

Avatar
Boost 5
Level 3
lesutton1
Level 3

Likes

9 likes

Total Posts

47 posts

Correct reply

14 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
Applaud 5
Affirm 5
View profile

Avatar
Boost 5
Level 3
lesutton1
Level 3

Likes

9 likes

Total Posts

47 posts

Correct reply

14 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
Applaud 5
Affirm 5
View profile
lesutton1
Level 3

08-12-2017

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

  }

}

Avatar

Avatar
Boost 1
Level 2
Anish_Somani
Level 2

Like

1 like

Total Posts

19 posts

Correct reply

4 solutions
Top badges earned
Boost 1
Affirm 3
Affirm 1
View profile

Avatar
Boost 1
Level 2
Anish_Somani
Level 2

Like

1 like

Total Posts

19 posts

Correct reply

4 solutions
Top badges earned
Boost 1
Affirm 3
Affirm 1
View profile
Anish_Somani
Level 2

07-12-2017

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.

Avatar

Avatar
Coach
MVP
radzmar
MVP

Likes

397 likes

Total Posts

2,687 posts

Correct reply

492 solutions
Top badges earned
Coach
Ignite 3
Ignite 1
Validate 1
Give Back 50
View profile

Avatar
Coach
MVP
radzmar
MVP

Likes

397 likes

Total Posts

2,687 posts

Correct reply

492 solutions
Top badges earned
Coach
Ignite 3
Ignite 1
Validate 1
Give Back 50
View profile
radzmar
MVP

30-11-2017

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.

Avatar

Avatar
Boost 5
Employee
deepak_k_
Employee

Likes

5 likes

Total Posts

84 posts

Correct reply

32 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
Affirm 5
Affirm 3
View profile

Avatar
Boost 5
Employee
deepak_k_
Employee

Likes

5 likes

Total Posts

84 posts

Correct reply

32 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
Affirm 5
Affirm 3
View profile
deepak_k_
Employee

29-11-2017

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.