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

Way to conditionally hide or show a Script tag in Html using Boolean value fetched from Config.

Avatar

Level 1

Hi,

Can i implement a way to enable or disable a <script> tag to add it to HTML with the Boolean value fetched from config file.

 

So, I am getting the boolean value from config file by checkbox field.

 

<sly data-sly-use.osgiconfig="com.app.common.config.osgi.ConfigService"></sly>
<sly> Instant Page Load is checked : <b>${osgiconfig.instantPageChecked}</b></p></sly>
<script src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>

so, if the checkbox is enabled and true the script tag should load.
if disabled and false the script should not load in html.

Any reference or inputs on this.
Thanks.

 

1 Accepted Solution

Avatar

Correct answer by
Level 6

Hi @vikesh1 

 

If the ${osgiconfig.instantPageChecked} is a boolean value then you can use data-sly-test to conditionally add HTML elements. 

<script data-sly-test="${osgiconfig.instantPageChecked}" src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>

The above code will load script tag if ${osgiconfig.instantPageChecked} returns true otherwise it will not be loaded.

Here is a adobe documentation in data-sly-test.

 

Thanks

View solution in original post

2 Replies

Avatar

Correct answer by
Level 6

Hi @vikesh1 

 

If the ${osgiconfig.instantPageChecked} is a boolean value then you can use data-sly-test to conditionally add HTML elements. 

<script data-sly-test="${osgiconfig.instantPageChecked}" src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>

The above code will load script tag if ${osgiconfig.instantPageChecked} returns true otherwise it will not be loaded.

Here is a adobe documentation in data-sly-test.

 

Thanks

Avatar

Community Advisor

In below example you could see I am loading basic html form for AEM publish instance only after checking the runmode -

 

<sly
data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"
data-sly-call="${clientLib.all @ categories='reporting'}" data-sly-unwrap />
<div data-sly-use.logic="runmodelogic.js">
<p data-sly-test="${logic.runmodes.publish}">
<form action="/bin/employeeForm" method="post">

<h1>Employee Form Submission</h1>

<fieldset>

<label>Employee Form</label>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label>Designation:</label>
<select id="designation" name="designation">
<option value="architect">Architect</option>
<option value="sse">Senior Software Engineer</option>
</select>

</fieldset>
<input type="submit" value="Submit">
</form>

</p>
</div>

 

I believe using data-sly-test you can achieve this. Hope this example will give you idea. Let me know if you need any  input.