AEM : Access to global values from dialog-clientlib

user_886645 0
Viewed 315

Currently, I am storing certain value as in data-attributes in customheaderlibs.html

<div data-sly-use.myjava="MyJava"
     data-score="${myjava.getScore}"
     data-team="${myjava.getTeam}"></div>

and were reading these values by

const iframeContents = document.querySelector('iframe').contentWindow.document.body;
        const configElement = iframeContents.querySelector('div[data-score]');

This works fine for certain resolution of a screen. But in smaller viewport such as in iPad where cq dialog opens as a full screen and not as a dialog box, customheaderlibs.html seems to be absent from the DOM. Hence, these data cannot be accessed from javascript on dialog-ready. Is there any way these data can be accessed, may be if passed as query parameter to the granite dialog path? But not sure how to achieve this.

aem-6 aem javascript java
1 Answers

In case 'score' and 'team' are static fields, you can just access this information by GET request to /component/path.<1,2,infinity,-1>.json

In other case, you can create custom component and add it to the component's dialog.

<general
                        jcr:primaryType="nt:unstructured"
                        jcr:title="General"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">
                                <items
                                    jcr:primaryType="nt:unstructured">
                                    <column
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items
                                            jcr:primaryType="nt:unstructured">
                                            <customCMP
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="custom/cmp"/>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </general>

/apps/custom/cmp/cmp.html

<div data-sly-use.customCMP="CustomCMP"
     data-score="${myjava.getScore}"
     data-team="${myjava.getTeam}">
</div>

CustomCMP.java

@Model(adaptables = SlingHttpServletRequest.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class CustomCMP {

    @ScriptVariable
    private ResourceResolver resolver;

    private MyJava myJava;

    @PostConstruct
    public void init() {
        final String componentPath = (String) request.getAttribute("granite.ui.form.contentpath");
        Resource componentResource = resolver.getResource(componentPath);

        if (componentResource != null) {
            myJava = componentResource.adaptTo(MyJava.class);
        }

    }

    public String getTeam() {
        return myJava.getTeam();
    }

    public String getScore() {
        return myJava.getScore;
    }
}
user_43201170
Related