Way to conditionally hide or show a Script tag in Html using Boolean value fetched from Config. | Community
Skip to main content
Level 2
Feb 10, 2022 11:06 AM UTC
Solved

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

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.

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
JeevanRaj
JeevanRajAccepted solution
New Participant
Feb 10, 2022 12:46 PM UTC

Hi @vikramp8 

 

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

2 replies

DEBAL_DAS
New Participant
Feb 10, 2022 12:47 PM UTC

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.

 

Translate
JeevanRaj
JeevanRajAccepted solution
New Participant
Feb 10, 2022 12:46 PM UTC

Hi @vikramp8 

 

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

Translate