Expand my Community achievements bar.

Applications for the 2024-2025 Adobe Experience Manager Champion Program are open!
SOLVED

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

Avatar

Level 8

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

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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

}
}

Thanks,
Siva

View solution in original post

9 Replies

Avatar

Level 8

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

 

 

Avatar

Employee Advisor

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

Avatar

Employee Advisor

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?

Avatar

Level 8

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

Avatar

Employee Advisor

You will have to do something like this

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

Avatar

Level 8

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

Avatar

Correct answer by
Community Advisor

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

}
}

Thanks,
Siva