Way to conditionally hide or show a Script tag in Html using Boolean value fetched from Config. | Adobe Higher Education
Skip to main content
V
VikramP8
Level 2
February 10, 2022
Répondu

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.

 

Ce sujet a été fermé aux réponses.
Meilleure réponse par 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 commentaires

JeevanRaj
Community Advisor
JeevanRajCommunity AdvisorRéponse
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
      Conditions d'utilisationAccessibility statement

      Loading footer...