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

[vikesh1]

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.

[JeevanRaj · Accepted solution]

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

[DEBAL_DAS]

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.