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

Share Data between AEM components

  • October 23, 2024
  • 4 replies
  • 948 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

TarunKumar
Community Advisor
TarunKumarCommunity AdvisorAccepted solution
Community Advisor
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

    h_kataria
    Community Advisor
    h_katariaCommunity Advisor
    Community Advisor
    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 

      daniel-strmecki
      Community Advisor and Adobe Champion
      daniel-strmeckiCommunity Advisor and Adobe Champion
      Community Advisor and Adobe Champion
      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

        kautuk_sahni
        Community Manager
        kautuk_sahniCommunity Manager
        Community Manager
        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
        Terms & ConditionsAccessibility statement

        Loading footer...