Toggle between a bunch of templates in a component

Avatar

Avatar

Ravi_S

Avatar

Ravi_S

Ravi_S

28-01-2019

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

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

Gaurav-Behl

MVP

Total Posts

1.1K

Likes

226

Correct Answer

281

Avatar

Gaurav-Behl

MVP

Total Posts

1.1K

Likes

226

Correct Answer

281
Gaurav-Behl
MVP

28-01-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"

  }

}

Answers (3)

Answers (3)

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K
smacdonald2008

28-01-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.

Avatar

Avatar

Ravi_S

Avatar

Ravi_S

Ravi_S

28-01-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

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K
smacdonald2008

28-01-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