How to dynamically populate AEM page property dialog?

Question

I would like to create a new custom tab in the AEM page properties. The process of creating a page property is straightforward, but inside the custom tab, I want to make a call to an external system and get a json response, so that I can build a dialog (with text fields and path fields). To get the json response, I created a servlet, but I want to call this servlet each time a property dialog appears and populate its fields. Would it be possible to do that? Should I update dialog.xml for this or can I manage it directly at the page level (/content)?

Please share me some best practices on this use cases.

Gustavo Rey · Answer 1 · 2023-07-29T00:13:05.277

Do you wanna have a drop-down field in the dialog with dynamic values?

If yes, you'll need to do three things:

In your Dialog


<field
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/select"
        name="./myfield">
    <datasource
            jcr:primaryType="nt:unstructured"
            sling:resourceType="/apps/yourProject/components/Giveanameforthisdatasource/datasource"/>
</field>

Here you're adding a select field as we are used to, but instead of we add the option, we are calling this component to populate the select. Noticed that we need a folder called datasource and an HTML file with the same name inside this folder.

In your components

datasource.html

<sly data-sly-use="com.yourproject.components.MyDataSource"/>

In the component, you only need to have the HTML file, it's not necessary to create a .content.xml.

In your Models (Java Backend)

package com.yourproject.components;

import com.adobe.granite.ui.components.ds.DataSource;
import com.adobe.granite.ui.components.ds.SimpleDataSource;
import com.adobe.granite.ui.components.ds.ValueMapResource;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.api.resource.ResourceMetadata;
import org.apache.sling.api.resource.ResourceResolver;
import org.apache.sling.api.resource.ValueMap;
import org.apache.sling.api.wrappers.ValueMapDecorator;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.Required;
import org.apache.sling.models.annotations.injectorspecific.Self;
import org.apache.sling.models.annotations.injectorspecific.SlingObject;

import javax.annotation.PostConstruct;
import javax.inject.Inject;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

@Model(
        adaptables = {SlingHttpServletRequest.class}
)
public class MyDataSource {

    @Self
    protected SlingHttpServletRequest request;

    @Inject
    @Required
    @SlingObject
    private ResourceResolver resourceResolver;

    @PostConstruct
    public void init() {
        List<Resource> resourceList = new ArrayList<>();
        
        //Call your service or whatever you need here

        for (/*interate your list with the values*/ ) {
            ValueMap valueMap = new ValueMapDecorator(new HashMap<>());
            valueMap.put("value", "add the value of select");
            valueMap.put("text", "add the text of select");

            resourceList.add(new ValueMapResource(resourceResolver,
                    new ResourceMetadata(), "nt:unstructured", valueMap));
        }

        DataSource ds = new SimpleDataSource(resourceList.iterator());
        request.setAttribute(DataSource.class.getName(), ds);
    }
}

As you can see, you can either call an external service in the backend or use some information that is in the JCR.

Obs.: You also can use WCMUsePojo API, for old projects is the only one option and this case, your model will be like this one below

package com.yourproject.components;

import com.adobe.cq.sightly.WCMUsePojo;
import com.adobe.granite.ui.components.ds.DataSource;
import com.adobe.granite.ui.components.ds.SimpleDataSource;
import com.adobe.granite.ui.components.ds.ValueMapResource;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.api.resource.ResourceMetadata;
import org.apache.sling.api.resource.ResourceResolver;
import org.apache.sling.api.resource.ValueMap;
import org.apache.sling.api.wrappers.ValueMapDecorator;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

public class MyDataSource extends WCMUsePojo {

    @Override
    public void activate() throws Exception {
        ResourceResolver resourceResolver = getResourceResolver();
        List<Resource> resourceList = new ArrayList<>();

        //Call your service or whatever you need here

        for (/*interate your list with the values*/ ) {
            ValueMap valueMap = new ValueMapDecorator(new HashMap<>());
            valueMap.put("value", "add the value of select");
            valueMap.put("text", "add the text of select");

            resourceList.add(new ValueMapResource(resourceResolver,
                    new ResourceMetadata(), "nt:unstructured", valueMap));
        }

        DataSource ds = new SimpleDataSource(resourceList.iterator());
        this.getRequest().setAttribute(DataSource.class.getName(), ds);
    }
}

Good luck!

How to dynamically populate AEM page property dialog?

1 Answers1