Dialog's Content needs to use in another component

[djohn98390536]

I have a requirement where I need to use the dialog's content in another component.

I am using a sling model to get the content . Can I use the same model in another component or do I need to create another one?.

please help here

[ayush-804]

@djohn98390536 you need to create another sling model for that component which would get the data from other authored component. Below code snippet might help:

Resource r = resourceResolver.getResource(currentResource, "../component2");
if(r != null) {
    ValueMap props = r.adaptTo(ValueMap.class);
    String somePropertyValue = props.get("someProperty", "");
}

Regards,

Ayush 

[djohn98390536]

Is there any other way we can sync the content of a dialog in other components. Please let me know.

[aanchal-sikka]

Hello @djohn98390536 

The answer depends on how similar the components are"

Scenario-1: Component B is always "Component A + additional functionalities".

Extend the Component B from Component A. Then you can reuse dialog + Model and just add what is needed.

Scenario-2: Component B is almost same as "Component A" + additional functionalities" + "minor differences"

• Extend the Component B from Component A for reusing dialogs. Or use "granite/ui/components/foundation/include"
• Sling Model can be extended from the Component A and additional functionalities can be added/modified

Scenario-3: Component B is only supposed to use some part of Component A

• Dialog components can be reused using via granite/ui/components/foundation/include
• Separate Sling Models for A & B. If needed create utils/abstract classes and avoid code duplicacy.

[aanchal-sikka · Accepted solution]

Hello @djohn98390536 

Few code samples.

Sling Model: Injecting ComponentA in Component B 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-inject-a-sling-mode...

https://blogs.perficient.com/2021/07/12/code-reuse-with-custom-sling-model-injectors/?utm_campaign=s... 

Dialog Fields reuse: https://competitiveprogrammingarchives.home.blog/2020/05/09/aem-reusing-touch-dialog-fields-tabs-usi...

[Ankan_Ghosh]

If we need a part of the existing dialog and not the actual content authored, we can use something like this 

<dialog
     jcr:primaryType="nt:unstructured"
     sling:resourceType="granite/ui/components/foundation/include"
     path="path/to/the/origianl/dialog"/>

 But if we want the content of the existing component along with something new, we can do something like this:

**You have to write this kind of code inside your new sling model where you need resource from another component**
Resource res = resourceResolver.getResource("/path/to/the/content/of/the/node");
PreviousModel previousModel = res.adaptTo(PreviousModel.class); //Here we are adapting the resource to the previous Sling Model that you already have created , so that we can retrieve the value of the previous resource
String value1 = previousModel.getValue1(); //You have already written getters in your previous sling model and we are just calling it here 

PreviousModel getPreviousModel(){
    return previousModel;
} //This will return the use object for the entire data of the previous component 

Now, if you need no modification with the previous components data, you can return the 'previousModel' object and use it with data-sly-use and that will give you all the values in sightly.

<sly data-sly-use.prevModel="${newModel.previousModel}" >

    <div>${prevModel.value1}</div>    

    <div>${prevModel.value2}</div>

    <div>${prevModel.value3}</div>

</sly>

Also if you want the author to have control over the path from where previous components data will be taken, create a new pathfiled in dialog and use that path in new sling model to get resource, rest will be same.

Please let me know if you need something else. Thanks!