Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Adaptive Forms JavaScript Hide Field In Repeating Panel

Avatar

Level 2

I have an adaptive form with a repeating panel - carsPanel.  The panel fields including text fields such as car number and carMake pulling from a database.  With the carMake field, I want to hide the field in a particular panel if the value in the previous panel is the same.  For instance, if the carMake field value in panel 1 is "Nissan", and the CarMake field value in panel 2 is "Cadillac", and the field value in panel 3 is "Cadillac", I want to hide carMakethe field in panel 3.  My script is below for the initialize event.    It is not working.  Thank you for any suggestions. 

//Repeating Panel name is carsPanel.  Fields in panel prefilled from a database using data model  

//number of carsPanel instances var carsCount = carsPanel.instanceManager.count; //carModel field
//first car carMake var currentCarMake = carsPanel[0].carMake.value; for (var i = 0; i < carsCount; i++) { var carMakeNext = carsPanel [i].carMake.value; if (currentCarMake == carMakeNext) { carsPanel[i].carMake.visible = "false"; } else { currentCarMake = carMakeNext; } }

 

Is there is documentation on using JavaScript with Adaptive forms?  

1 Accepted Solution

Avatar

Correct answer by
Level 2

I switched the script to the carMake field and redid the script to be the below, and it now works.  Vijay's post prompted me to switch the script from a panel script to the field script.  It does work on the CarMake Change event, but also on Initialize, so I will mark this post as correct to avoid confusion.       

var currentIndex = carsPanel.instanceIndex;
var previousIndexNumber = currentIndex - 1;

if (currentIndex != "0")
{
  var previouscarMakeValue = carsPanel.instanceManager.instances[previousIndexNumber].carMake.value;
  var currentcarMakeValue = carsPanel.instanceManager.instances[currentIndex].carMake.value;

  if (currentcarMakeValue == previouscarMakeValue)
	{
		carsPanel.instanceManager.instances[currentIndex].carMake.visible = false;
	}
}

View solution in original post

3 Replies

Avatar

Level 2

Tried the below and it didn't work.  Thanks for any help on this.

 

var carsCount = this.instanceManager.instances.length;

//populate the initial category with the first category
var currentCarMake = guide[0].guide1[0].guideRootPanel[0].BodyPage1[0].CarsPanel[0].CarMake.value;

for (var i = 1; i < carsCount;i++)
{
  var nextCarMake = guideBridge.resolveNode("guide[0].guide1[0].guideRootPanel[0].BodyPage1[0].carsPanel[" + i + "].carMake").value;
  if (currentCarMake == nextCarMake)
     {
         guideBridge.resolveNode("guide[0].guide1[0].guideRootPanel[0].BodyPage1[0].carsPanel[" + i + "].carMake").visible = "false";
     }
  else
    {
         currentCarMake = nextCarMake;        
    }
}

 

Avatar

Community Advisor

You need to put the script in the CarMake field "change " event

Avatar

Correct answer by
Level 2

I switched the script to the carMake field and redid the script to be the below, and it now works.  Vijay's post prompted me to switch the script from a panel script to the field script.  It does work on the CarMake Change event, but also on Initialize, so I will mark this post as correct to avoid confusion.       

var currentIndex = carsPanel.instanceIndex;
var previousIndexNumber = currentIndex - 1;

if (currentIndex != "0")
{
  var previouscarMakeValue = carsPanel.instanceManager.instances[previousIndexNumber].carMake.value;
  var currentcarMakeValue = carsPanel.instanceManager.instances[currentIndex].carMake.value;

  if (currentcarMakeValue == previouscarMakeValue)
	{
		carsPanel.instanceManager.instances[currentIndex].carMake.visible = false;
	}
}