Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Component Rendering through checkbox

Ronnie09
Level 4
Level 4

I have One checkbox Enable data. Once checkbox is checked/true Component is visible whenever checkbox is unchecked/false then component disappear from screen. I want to keep the component visible to check the checkbox again. But it get hidden and I cant find to make it checked/true.

AEM 6.5

1 Accepted Solution
Asutosh_Jena_
Correct answer by
Community Advisor
Community Advisor

Hi @Ronnie09 

 

Please use the below one:

<p data-sly-test="${wcmmode.edit}">Configure Component</p>
<sly data-sly-use.tab="com.core.models.TabModel" data-sly-use.template="/components/commons/templates.html">
<div data-sly-test.addInData="${tab.onoff}" data-bv-show="data" data-bv-Id="${tab.id}"></div>
</sly>

 

Thanks!

View solution in original post

4 Replies
Asutosh_Jena_
Community Advisor
Community Advisor

Hi @Ronnie09 

 

We need to update the HTL markup of the component so that it will not be hidden. Can you please provide the markup that you are using here and we can add the condition?

 

Thanks!

Ronnie09
Level 4
Level 4

Hi @Asutosh_Jena_ 

<sly data-sly-use.tab="com.core.models.TabModel"
data-sly-use.template="/components/commons/templates.html">

 

<sly data-sly-test.addInData="${tab.onoff}">
<div data-bv-show="data" data-bv-Id="${tab.id}"></div>
</sly>
<sly data-sly-test="${!addInData}"></sly>

 

The blue lines I am adding condition

kishorekumar14
Level 9
Level 9

Hi @Ronnie09 ,

 

Try with this.

 

<div data-sly-test="${tab.onoff}" data-bv-show="data" data-bv-Id="${tab.id}"></div>
Asutosh_Jena_
Correct answer by
Community Advisor
Community Advisor

Hi @Ronnie09 

 

Please use the below one:

<p data-sly-test="${wcmmode.edit}">Configure Component</p>
<sly data-sly-use.tab="com.core.models.TabModel" data-sly-use.template="/components/commons/templates.html">
<div data-sly-test.addInData="${tab.onoff}" data-bv-show="data" data-bv-Id="${tab.id}"></div>
</sly>

 

Thanks!

View solution in original post