Toggle between a bunch of templates in a component | Community
Skip to main content
Ravi_S
Ravi_S
Level 2
January 28, 2019
Solved

Toggle between a bunch of templates in a component

  • January 28, 2019
  • 4 replies
  • 2131 views

Hi, I have  few templates defined in my component , the name's are the values of a dropdown select in the component. I want to check and see if there is a way for me to load one particular template based on the dropwdown select

Here is a sample code which refers to what I am talking about

//Component

<template data-sly-template.left="${@ param}">

  <p>${param}</p>

//Some code here

</template>

<template data-sly-template.left="${@ param}">

  <h2>${param}</h2>

//Some code here

</template>

<div data-sly-call="${<dropdown-option-name> @param=properties}"></div>

Dropdown options

<headingStyle

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/form/select"

fieldLabel="Select Heading Style"

name="./style">

<items jcr:primaryType="nt:unstructured">

    <left

        jcr:primaryType="nt:unstructured"

        text="Left"

        value="left"/>

    <right

        jcr:primaryType="nt:unstructured"

        text="Right"

        value="right"/> 

</items>

</headingStyle>

                   

Thanks,

Ravi

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 Gaurav-Behl

What would happen after you fetch the template? Do you plan to inject it into dialog?

for fetching the template (or any resource) on change of dropdown in dialog box, attach the 'onchange' event to that dialog, register that js on dialog-ready and trigger ajax call for a specified path (here the best case scenario would be to have one html file per template rather than multiple templates in a single html)

something like this --

$document.on("dialog-ready", function() {

      

select.on('selected', function(e){    // use selected or onchange event as applicable

   //do something

    $.ajax({

            url: template_path ,

             }).done({ // do something });

     });

//do something

    });

Use appropriate events if dialog-ready doesn't suit your use case

use categories="[cq.authoring.dialog]"

https://helpx.adobe.com/experience-manager/using/creating-touchui-events.html

https://helpx.adobe.com/experience-manager/using/creating-granite-datasource.html

Building Experience Manager Components using Granite/Coral Resource Types

Welcome to Granite UI’s documentation! — Granite UI 1.0 documentation

Not sure if this would work for you to pull datasource in select -

{

  "jcr:primaryType": "nt:unstructured",

  "name": "./something",

  "fieldLabel": "Something",

  "sling:resourceType": "granite/ui/components/coral/foundation/form/select",

  "datasource": {

    "jcr:primaryType": "nt:unstructured",

    "path": "something",

    "sling:resourceType": "acs-commons/components/utilities/genericlist/datasource"

  }

}

4 replies

smacdonald2008
smacdonald2008
Level 10
January 28, 2019

WHat AEM version are you using. IN AEM 6.4 - templates should be based on editable templates as discussed here - Getting Started with AEM Sites - WKND Tutorial

If you mean templates with HTL - info here -- htl-spec/SPECIFICATION.md at master · adobe/htl-spec · GitHub

Another thing I noticed in your code example - you reference:

granite/ui/components/foundation/form/select

If using AEM 6.4 - you should be using:

  • granite/ui/components/coral/foundation/form/select
Ravi_S
Ravi_SAuthor
Level 2
January 29, 2019

Hey Scott,

The templates are HTL templates and not page templates. Sorry i should have been more clearer. I want to call a different HTL template name of which corresponds to the value of the dropdown selected in the component dialog

smacdonald2008
smacdonald2008
Level 10
January 29, 2019

Here is info on HTL and templates --

- info here -- htl-spec/SPECIFICATION.md at master · adobe/htl-spec · GitHub

I am not aware of more information other than covered in this spec.

Gaurav-Behl
Gaurav-BehlAccepted solution
Level 10
January 29, 2019

What would happen after you fetch the template? Do you plan to inject it into dialog?

for fetching the template (or any resource) on change of dropdown in dialog box, attach the 'onchange' event to that dialog, register that js on dialog-ready and trigger ajax call for a specified path (here the best case scenario would be to have one html file per template rather than multiple templates in a single html)

something like this --

$document.on("dialog-ready", function() {

      

select.on('selected', function(e){    // use selected or onchange event as applicable

   //do something

    $.ajax({

            url: template_path ,

             }).done({ // do something });

     });

//do something

    });

Use appropriate events if dialog-ready doesn't suit your use case

use categories="[cq.authoring.dialog]"

https://helpx.adobe.com/experience-manager/using/creating-touchui-events.html

https://helpx.adobe.com/experience-manager/using/creating-granite-datasource.html

Building Experience Manager Components using Granite/Coral Resource Types

Welcome to Granite UI’s documentation! — Granite UI 1.0 documentation

Not sure if this would work for you to pull datasource in select -

{

  "jcr:primaryType": "nt:unstructured",

  "name": "./something",

  "fieldLabel": "Something",

  "sling:resourceType": "granite/ui/components/coral/foundation/form/select",

  "datasource": {

    "jcr:primaryType": "nt:unstructured",

    "path": "something",

    "sling:resourceType": "acs-commons/components/utilities/genericlist/datasource"

  }

}

Terms & ConditionsAccessibility statement

Loading footer...