How to Change Panels on Change of Attribute element Selector.

Hello All,

Have you ever came across the "Panel Switch on Attribute Selector Change" requirement. If yes, here is a Trick to Solve this kind of requirement: Scenarios: Selectors of Attribute 1 and Attribute 2 1. If Attribute 1= ALL and Attribute 2= ALL then Panel 1. 2. If Attribute 1= {Some Value} and Attribute 2= ALL then Panel 2. 3. If Attribute 1= ALL and Attribute 2= {Some Value} then Panel 3. 4. If Attribute 1= {Some Value} and Attribute 2= {Some Value} then Panel 4.

Please find below Youtube Video to achieve this kind of requirement:

Youtube Link: https://www.youtube.com/watch?v=jwJousv5-Xw&feature=youtu.be

Use below Code which is used to implement the requirement:

<script>
setTimeout(function(){  // we are setting the some stop time for the below code to execute as it needs it needs to get the objects with its id, then the objects needs to load and then this code should execute.
//debugger;
// getting the selected index of Attribute2 selector using its div id
var widgetId = "*lK36*kW8AA3D1B045734A838F5B65C117930434*x1*t" + mstrApp.docModel.buildTime;
var widget = mstrmojo.all[widgetId];
var selectorCtrl = widget.children[0];
var selist = selectorCtrl.list;
var slCount = selist.selectedIndex; //this will give the index which is currently selected.

// getting the selected index of Attribute 2  selector using its div id
var GwidgetId = "*lK36*kWA807D6E66EF949DD8AF831C3D6CDA705*x1*t" + mstrApp.docModel.buildTime;
var Gwidget = mstrmojo.all[GwidgetId];
var GselectorCtrl = Gwidget.children[0];
var Gselist = GselectorCtrl.list;
var groupCount = Gselist.selectedIndex; //this will give the index which is currently selected.

var inputLength = document.getElementsByTagName('input').length; // getting the number of input type objects
if(slCount==0 && groupCount==0) // when SL ="ALL" and G ="ALL"
{

for(i=0;i<inputLength;i++)
{
var panelIdx = document.getElementsByTagName('input')[i].value;
if(panelIdx =='5')
{document.getElementsByTagName('input')[i].click();

}
}

}

else if (slCount>0 && groupCount==0) // when SL ="Single Element" and G ="ALL"
{
for(i=0;i<inputLength;i++)
{
var panelIdx = document.getElementsByTagName('input')[i].value;
if(panelIdx =='6')
{
document.getElementsByTagName('input')[i].click();

}
}
}

else if (slCount==0 && groupCount>0) // when SL ="ALL" and G ="Single Element"
{

for(i=0;i<inputLength;i++)
{
var panelIdx = document.getElementsByTagName('input')[i].value;
if(panelIdx =='7')
{
document.getElementsByTagName('input')[i].click();

}
}
}

else if (slCount>0 && groupCount>0) // when SL ="Single Element" and G ="Single Element"
{
for(i=0;i<inputLength;i++)
{
var panelIdx = document.getElementsByTagName('input')[i].value;
if(panelIdx =='8')
{
document.getElementsByTagName('input')[i].click();

}
}
}
}, 600);

</script>

I hope this will help you with your Project Requirements.