Toggle between a bunch of templates in a component

[Ravi_S]

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

[smacdonald2008]

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]

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]

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 · Accepted solution]

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"

  }

}