Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

How to use RxJS to dynamically pass data between two AEM components

Avatar

Avatar
Validate 1
Level 2
mchag
Level 2

Like

1 like

Total Posts

26 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
Applaud 5
View profile

Avatar
Validate 1
Level 2
mchag
Level 2

Like

1 like

Total Posts

26 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
Applaud 5
View profile
mchag
Level 2

23-07-2018

Hi,

We have requirement where we have two components

1.Search Form (which will have the Search Form and Google Map)

2.Search Results component

"Search Form" and "Search Results"  are being developed as two different component because team wanted to re use the "Search Form"

The Ajax call to service goes out from Search From component, team has proposed the RxJS solution to dynamically communicate data between Search From and Search Results component. So, whenever there is new search RxJS has to dynamically update the Search Results component.

If any body has developed this kind of approach, can you advice on this.

Thanks,

Madhu

Replies

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,430 likes

Total Posts

3,305 posts

Correct Reply

937 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,430 likes

Total Posts

3,305 posts

Correct Reply

937 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

23-07-2018

Hi Madhu,

Why don't you submit form instead making Ajax call on search button click as a Post request and action page would be your search table/result page. This way you can communicate between components.

If you have both search and search result component on both pages, then you can put a condition of search result component to identify initialled and search load.

Thanks

Arun

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

23-07-2018

Arun is correct - Ajax is standard way - with a Sling Servlet - to do this type of use case.  I have never seen any RxJS solution  example with AEM.

Avatar

Avatar
Validate 1
Level 2
mchag
Level 2

Like

1 like

Total Posts

26 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
Applaud 5
View profile

Avatar
Validate 1
Level 2
mchag
Level 2

Like

1 like

Total Posts

26 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
Applaud 5
View profile
mchag
Level 2

23-07-2018

Hi Arun,

Thanks for your reply,

There is only one page i.e "search page" where both components present, so on click of  "Search" button user stays on same  page but we would required to refresh always search results component , that's why we have to do Ajax call rather form submission.

So we have to add RxJS observer to trigger the change and refresh the search results component.

Thanks,

Madhu

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,430 likes

Total Posts

3,305 posts

Correct Reply

937 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,430 likes

Total Posts

3,305 posts

Correct Reply

937 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

23-07-2018

Then you can do a normal Ajax call to service and update the search result section of content of search.

There is no need to established special relationship between components.

you can specify a unique id to result component wrapper and based on that you can update the content.

Tryit Editor v3.5  

Avatar

Avatar
Validate 1
Level 2
mchag
Level 2

Like

1 like

Total Posts

26 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
Applaud 5
View profile

Avatar
Validate 1
Level 2
mchag
Level 2

Like

1 like

Total Posts

26 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
Applaud 5
View profile
mchag
Level 2

06-08-2018

Thanks Arun for your suggestions