Share Data between AEM components

[Luis_Ochoa]

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

[TarunKumar · Accepted solution]

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

[h_kataria]

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

[daniel-strmecki]

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

[kautuk_sahni]

@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!