AEM 6.4. Retrieve values from another dialog.

Avatar

Avatar

dfrusone

Avatar

dfrusone

dfrusone

11-09-2018

Hello i have another question.

I have 2 components. Lets say Component A and component B.

My B is a normal component with a dialog.

My A component has a dialog with 1 field that is the only one authorable.

My need is that my A needs to retrieve some other values dinamycally from the component B dialog and render it.

How can achieve this?

(everything needs to "elaborated in AEM but rendered in Angular)

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

Endoriel

Avatar

Endoriel

Endoriel

12-09-2018

Maybe I'm missing something but I don't really see what's complicated here. From your latest explanations it doesn't seem to be anything to do with dialogs and displaying values from one in the other, rather displaying content created for your card components in your card list component.

If the card components and the card list have the same parent you can just create a custom injector  or add a post construct method in your model for the card list. In this method you get the parent resource of your card list, you iterate through the child resources and test they have the resource type of your card component and then you either adapt them to the card component model and add them to a list or just get the subtitle property and add it to a String list.

Create a getter for this list. In your sightly template you use the card list model and display the content of the list. Make your card components refresh the page when added to the parsys in the edit config so you don't have a stale card list.

Unless I completely misunderstood this seems pretty straight forward to me.

Answers (14)

Answers (14)

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831
Arun_Patidar
MVP

12-09-2018

Hi,

Thanks to elaborating. Now I can say that there is no relationship between components card and card-list. So you won't be able to reuse component dialog using granite include resource type.

Lets assume if you will make Ajax request to component card to get subtitle field value and set to on dialog load in card list component then you can do it but there is no possibility to always find card component until you didn't manually drag and drop, and what if there are more than 1 card component in the page or parsys. How will you make the request, because if you'll add more than 1 components in the same parsys then for other components node name is suffixed by random number.

Avatar

Avatar

dfrusone

Avatar

dfrusone

dfrusone

12-09-2018

This is the way i was achieving it.

I just wanted to understand if there was something else we could work with. Like Component A taking values directly from Component B.

Thats all ^^

By the way, thanks that was the answer

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831
Arun_Patidar
MVP

12-09-2018

You can try other way around, read all card list component and and make it available as dropdown in card component.

I'll try same and will update you.

Avatar

Avatar

dfrusone

Avatar

dfrusone

dfrusone

12-09-2018

Exactly. That's the problem. 2 or more same components will generate a random suffix.

I was thinking about java, get parents node and then pick everything called "card * something". Then get every subtitle property value and put in an array.

This thing must refresh everytime in case author drop components or delete some.

Also there is a relationship. Because the subtitle property of component Card is the same that "List of card" has to render.

The best thing was to make Component List of card, pick properties directly in the Card component dialog.

Avatar

Avatar

dfrusone

Avatar

dfrusone

dfrusone

12-09-2018

I already checked that. It works because it replicate the fields. But my need is to populate those fields dynamically from the other dialog.

I try to explain better.

I have page.

I drop my component lets say "Card". It has 5 fields in the dialog that the author can change.

Then i drop my componet called "List of cards". The author can set 1 property called "List of cards Title.

What i need to achieve now is that this "List of cards" will render atleast 1 but even more, titles of the "card components".

Structure of Card component (everything authorable)

          -Title

          -subtitle

Structure of List of cards.

/////////Title (authorable)//////

          -subtitle (dinamycally from the Card component)

So if i have 4 cards with 4 subtitles.

The list of cards component will get 4 subtitles rendered dinamycally.

I wish now is clear

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831
Arun_Patidar
MVP

12-09-2018

Avatar

Avatar

dfrusone

Avatar

dfrusone

dfrusone

12-09-2018

This is not what i need. Because i need the fields populated from the other one.

Avatar

Avatar

GaneshM

Avatar

GaneshM

GaneshM

11-09-2018

You can achieve using parent/child concept or Comp A should know the path of Comp B either way its tightly coupled.

you need to do following steps to achieve,

1. Add dialog load listener to Comp A ( which fires when dialog loads and opens)

2. Have AJAX call to hit the sling servlet

3. Have business logic in sling servlet or service to find the parent or B component and return the value

4. Assign the value to the Comp A field.

Note : You may need to educate the author to configure in some manner and its just one of the way to retrieve the values from other component.

Thanks!

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831
Arun_Patidar
MVP

11-09-2018

yes, you can reuse dialog or part of of one component into another if that is what you are looking for.

Touch UI - Reuse Dialog Field

Avatar

Avatar

dfrusone

Avatar

dfrusone

dfrusone

11-09-2018

Not really. I need the component 2 renders directly the html the values from dialog 1

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K
smacdonald2008

11-09-2018

Yes - you can do that (reuse values from another dialog) or build  your component dialog that lets an author set all values required for for that component.

I personally prefer the 1-1 approach. While its true, you are setting more nodes in the JCR dialog branch, its cleaner! In the end, the component has all values as properties. Then all values can be injected into the model simply by using @Inject.

Avatar

Avatar

Endoriel

Avatar

Endoriel

Endoriel

11-09-2018

From what I understand you basically want a dynamic dropdown.

Once dialog A is saved - it just becomes content so what you want in the B component is to dynamically populate your dropdown with values based on content. For that there are a lot of examples. It was just answered here: Select value in dropdown in touch ui dialog based on the value selected in editable template (You need to determine the values in Java by traversing your content and picking up those card names).

Avatar

Avatar

dfrusone

Avatar

dfrusone

dfrusone

11-09-2018

Ok and what if i have 2 components and i need to render dialog A properties in component B?

It something dynamyc and i cant let author do that.

Like i have "some cards components" and i have another component that must fill itself with "these card names" when the author adds them.

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K
smacdonald2008

11-09-2018

You can set all values a component needs within its own dialog and then use Sling Models and @Inject as discussed here -- Building Experience Manager Components using Granite/Coral Resource Types