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

Component Rendering through checkbox

Avatar

Level 7

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

Avatar

Correct answer by
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

Avatar

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!

Avatar

Level 7

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

Avatar

Community Advisor

Hi @Ronnie09 ,

 

Try with this.

 

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

Avatar

Correct answer by
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!