Way to conditionally hide or show a Script tag in Html using Boolean value fetched from Config. | Community
Skip to main content
V
VikramP8
Level 2
February 10, 2022
Solved

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

  • February 10, 2022
  • 2 replies
  • 2009 views

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.
Best answer by JeevanRaj

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

JeevanRaj
Community Advisor
JeevanRajCommunity AdvisorAccepted solution
Community Advisor
February 10, 2022

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

    DEBAL_DAS
    DEBAL_DAS
    New Member
    February 10, 2022

    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.

     

    Debal Das, Senior AEM Consultant
      Terms & ConditionsAccessibility statement

      Loading footer...