AEM 6.5 guideBridge API to hide and show based some value checkbox options

[srinivas_chann1]

Hello ,

Could you please provide input as how to show and hide based on radio option values using guideBridge

I having the below html

<div class="guideFieldWidget guideFieldVerticalAlignment col-12 CheckBox" data-original-title="" title="">

<label class="guideRadio guideRadioButtonItem radioOption topup-type" data-id="2" data-original-title="" title="" role="radio" name="guideContainer-rootPanel" tabindex="0" aria-label="radioOption2" aria-required="true" aria-checked="false" placeholder="">

<span class="guideRadioInput">

<input type="radio" id="guideContainer-rootPanel-progressPanel-" data-element-name="radioOption" name="radioOption" value="1" element-name="radioOption" aria-required="true" style="position: relative;">

<span class="guideRadioControl"></span>

</span>

<span class="guideRadioLabel">

radioOption2

<span class="guideRadioCaption">Use this 1</span>

</span>

</label>

</div>

<div class="guideFieldWidget guideFieldVerticalAlignment col-12 CheckBox" data-original-title="" title="">

<label class="guideRadio guideRadioButtonItem radioOption topup-type" data-id="2" data-original-title="" title="" role="radio" name="guideContainer-rootPanel" tabindex="0" aria-label="radioOption2" aria-required="true" aria-checked="false" placeholder="">

<span class="guideRadioInput">

<input type="radio" id="guideContainer-rootPanel-progressPanel-" data-element-name="radioOption" name="radioOption" value="2" element-name="radioOption" aria-required="true" style="position: relative;">

<span class="guideRadioControl"></span>

</span>

<span class="guideRadioLabel">

radioOption2

<span class="guideRadioCaption">Use this 2</span>

</span>

</label>

</div>

I would want to show and hide this checkbox options based on dynamic value 1 or 2

Please let me know how to implement the below:-

let radioOption= guideBridge.resolveNode("radioOption");

Now if(dyanmicvalue ==1 ){

show radioOption =1

}else {

show radioOption=2

}

Thanks,

Srinivas

[workflowuser]

Look for spouse details

https://experienceleague.adobe.com/docs/experience-manager-learn/forms/creating-your-first-adaptive-...

[srinivas_chann1]

Hello,

I cannot use the rule editor here , and need to add the code in javascript so how to achieve this using guideBridge API

Thanks,

Srinivas

[workflowuser]

Use the rule editor, that way you do not have To write any code

[workflowuser]

so to understand your requirement correctly

RadioOption A contains the following choices 

1

2

3

what do you want to do if the selected value is 2?

[srinivas_chann1]

My requirement is hide tor show before even before any selection .

That is based on some dynamic value I need to hide say option 2,3 and show just 1 

Then how to achieve it

Thanks

[workflowuser]

You cannot hide the values inside the radio button , you will have to just replace the values 

https://experienceleague.adobe.com/docs/experience-manager-learn/forms/adaptive-forms/choice-group-i...

[workflowuser]

You will have to do something like this

radiobutton.values=[“A”,”B”]

[srinivas_chann1]

Hello,

How to show the below conditions using guidgebridge when we have the html

Assume that we are having a 3 radio buttons mentioned in below html code as per the AEM radio component , but based on javascript input the component that must be shows radio button based on the below check

if(dynamicvalue == HTML){
show radio =HTML;
HIDE radio =CSS;
HIDE radio=JavaScript;
}

if(dynamicvalue==CSS && dynamicvalue == HTML){
show radio =CSS;
show radio =HTML;
HIDE radio=JavaScript;
}

/////////////////////////////////////////////////////////////////////////////////////////////

Assuming the Component had the below code while form rendering

<div class="radiobutton">
<input type="radio" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
</div>
<div class="radiobutton">
  <input type="radio" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
</div>
<div class="radiobutton">
  <input type="radio" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</div>

Thanks

[SivakumarKanoori · Accepted solution]

@srinivas_chann1 

may be you can write custom javascript as below. <you can change as per your use case>

window.onload = function(e){
let dynamicValue = 'CSS';
var radiobuttonClasses = document.getElementsByClassName("radiobutton");
for(var i =0;i< radiobuttonClasses.length ; i++){
radiobuttonClasses[i].classList.add("hidden");
var value = radiobuttonClasses[i].getElementsByTagName('input')[0].value
if (value === dynamicValue){
radiobuttonClasses[i].classList.remove("hidden");
}

}
}