Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.

Dynamic Value in DropDown in Page Properties With Json URL

Avatar

Level 3

I have Create a servlet which is returning JSON data like this:

 

[
{
"jcr:primaryType":"nt:unstructured",
"value":"option1",
"text":"option1"
},
{
"jcr:primaryType":"nt:unstructured",
"value":"option12",
"text":"option12"
},
{
"jcr:primaryType":"nt:unstructured",
"value":"option123",
"text":"option123"
}
]




I want to use Dropdown in page properties which will dynamically populate itself with data from JSON servlet

 

endpoint of JSON: /app/authordata.json

 

in .cq_dialog.xml

                                                     <%authorName

                                                        cq:showOnCreate="{Boolean}true"

                                                        jcr:primaryType="nt:unstructured"

                                                        sling:resourceType="granite/ui/components/coral/foundation/form/select"

                                                        fieldDescription="Get Author Name"

                                                        fieldLabel="Author Name"

                                                        name="./authorName">

                                                        <datasource

                                                            jcr:primaryType="nt:unstructured"

                                                            sling:resourceType="x/datasources/dropdown"

                                                            options="/app/authordata.json"

                                                            repoSource="{Boolean}true"/>

                                                    <%authorName>
 

But the data return empty or null

 

here is my Servlet

 

package com.x.core.servlets;

import org.apache.sling.api.SlingHttpServletRequest;

import org.apache.sling.api.SlingHttpServletResponse;

import org.apache.sling.api.resource.Resource;

import org.apache.sling.models.factory.ModelFactory;

import org.apache.sling.api.servlets.HttpConstants;

import org.apache.sling.api.servlets.SlingSafeMethodsServlet;

import org.apache.sling.api.servlets.ServletResolverConstants;

import org.osgi.service.component.annotations.Component;

import org.osgi.service.component.annotations.Reference;

import org.osgi.framework.Constants;

import javax.servlet.Servlet;

import javax.servlet.ServletException;

import java.io.IOException;

import java.util.List;

import com.x.core.models.AuthorsListPass;

import com.google.gson.JsonArray;

import com.google.gson.JsonObject;

@Component(service = Servlet.class,

           property = {

               Constants.SERVICE_DESCRIPTION + "=Author Names DataSource Servlet",

               ServletResolverConstants.SLING_SERVLET_PATHS + "=/apps/authordata.json",

               ServletResolverConstants.SLING_SERVLET_METHODS + "=" + HttpConstants.METHOD_GET

           })

public class AuthorListDataSourceServlet extends SlingSafeMethodsServlet {

    @Reference

    private ModelFactory modelFactory;

    @Override

    protected void doGet(final SlingHttpServletRequest request, final SlingHttpServletResponse response) throws ServletException, IOException {

        response.setContentType("application/json");

        // Use the request's resource to adapt to the AuthorsListPass model

        AuthorsListPass authorsListPass = request.getResource().adaptTo(AuthorsListPass.class);

        if (authorsListPass == null) {

            response.getWriter().write("['Ash Didn't Find Anything']");

            return;

        }

        List<String> authorNames = authorsListPass.getAuthorNames();

        JsonArray options = new JsonArray();

        for (String authorName : authorNames) {

            JsonObject option = new JsonObject();

            option.addProperty("value", authorName);

            option.addProperty("text", authorName);

            options.add(option);

        }

        response.getWriter().write(options.toString());

    }

}

 

can anyone suggest to me how I can achieve that? Need a Super Urgent Solution.
Adobe Experience Manager, Version 2023.1.1091

 

Thanks

10 Replies

Avatar

Level 3

Brother. As I'm having the data in JSON on Servlet. I need to proceed with that. and the Main thing is I need to show the dropdown data in Page properties, Some reason I don't know Javascript don't work on page properties page. 

 

If you can recommend me other solution that will be great

Avatar

Level 10

@ashikg3 wrote:

Brother. As I'm having the data in JSON on Servlet. I need to proceed with that. and the Main thing is I need to show the dropdown data in Page properties, Some reason I don't know Javascript don't work on page properties page. 

 

If you can recommend me other solution that will be great



Your JSON is fix, the only way to follow below link for JS. Please try to debug in browser.

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-6-4-how-to-read-and-se...

Avatar

Level 10

Yes, make an Ajax call to fetch JSON and using JS append select options.

function updateChange(defaultSelect, page) {
            var url = "/app/authordata.json";
            var varHiddenSel = $('input[name="./selectionHidden"]');
            var isSelected=false;
            $.get(url, function(data, status) {
                for (var i in data) {
                    isSelected = false;
                    if(varHiddenSel.val()===data[i].value){
                        isSelected=true;
                    }
                    defaultSelect.items.add({
                        value: data[i].value,
                        content:{ innerHTML :data[i].text},
                        selected:isSelected,
                        disabled:false
                    });
                }
            });
        }

Avatar

Level 3

I am Totally New to AEM. Frontend scripting. Can you suggest me a good article that will help to integrate javascript for page properties? It's not a dialog box. it's Page Properties

Avatar

Community Advisor

Hi @ashikg3 
You need to modify your json , similar to sample json and use servlet flag on

Sample Json : https://github.com/arunpatidar02/aem63app-repo/blob/master/java/dropdown/sample.json

Servlet : https://github.com/arunpatidar02/aem63app-repo/blob/master/java/dropdown/PopulateTouchUIDropdownFrom... 

 

 

Servlet that use to populate Touch UI dropdown options dynamically from json file or servlet
*
* datasource node properties
* - options (String) - path of json file or Servlet, which returns json examples :
/apps/commons/utils/json/dropdown/color.json
/bin/utils/json/dropdown/style
* - sling:resourceType (String)
utils/granite/components/select/datasource/json
* - repoSource (Boolean) - optional property to specify file in repository or servlet json source
* true(Default) : to read JSON file stored in repository
* false : to get JSON from Servlet


 



Arun Patidar