Share Data between AEM components | Community
Skip to main content
L
Luis_Ochoa
New Participant
October 23, 2024
Solved

Share Data between AEM components

  • October 23, 2024
  • 4 replies
  • 939 views

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

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 TarunKumar

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

4 replies

kautuk_sahni
kautuk_sahni
Employee
November 5, 2024

@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
daniel-strmecki
daniel-strmecki
New Participant
October 23, 2024

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

    h_kataria
    h_kataria
    New Participant
    October 23, 2024

    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 at main · adobe/aem-guides-wknd 

      TarunKumar
      TarunKumarAccepted solution
      New Participant
      October 23, 2024

      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

        Terms & ConditionsAccessibility statement

        Loading footer...