Expand my Community achievements bar.

SOLVED

Share Data between AEM components

Avatar

Level 2

Hi Team,

 

I have a requirement of using AEM Form core components where I need to pass some information between them. i.e:

I need to use the Form Options component, which will have two radio buttons with specific values. When one is selected, that value should be placed in another form component which is the Form Text. The project is using the Webpack framework to compile JS and CSS. My question is, where should I implement the JavaScript logic to pass the selected value to the other component?.

I appreciate your inputs

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

HI @Luis_Ochoa ,

Other way apart from JS through which you can pass the value to different component is using HTL. 
In HTL of one component you can use data-sly-call and data-sly-template

<sly data-sly-use.fileName="${'f2.html'}">
<sly data-sly-call="${fileName.templateObject @P1=valueOne, P2= valueTwo}"></sly>

To call the html of other component, file 2
<template data-sly-template.templateObject="${ @P1, P2}"

 

 

-Tarun

View solution in original post

4 Replies

Avatar

Correct answer by
Community Advisor

HI @Luis_Ochoa ,

Other way apart from JS through which you can pass the value to different component is using HTL. 
In HTL of one component you can use data-sly-call and data-sly-template

<sly data-sly-use.fileName="${'f2.html'}">
<sly data-sly-call="${fileName.templateObject @P1=valueOne, P2= valueTwo}"></sly>

To call the html of other component, file 2
<template data-sly-template.templateObject="${ @P1, P2}"

 

 

-Tarun

Avatar

Community Advisor

You can create a new clientlib and embed it in base clientlib for your site, similar to how other form clientlibs are added.
Sample : aem-guides-wknd/ui.apps/src/main/content/jcr_root/apps/wknd/clientlibs/clientlib-base/.content.xml a... 

Avatar

Level 9

I think you definitely need to add a piece of custom JS here. As your logic is based on user interaction, this cannot be achieved on the server. I don't see how HTL templates could help here.

 

Good luck,

Daniel

Avatar

Administrator

@Luis_Ochoa Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!



Kautuk Sahni