Dynamic Value in DropDown in Page Properties With Json URL

[ashikg3]

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

[Imran__Khan]

@ashikg3 use datasource to populate dropdown having dynamic values

http://www.sgaemsolutions.com/2019/01/dynamically-populate-drop-down-values.html?m=1

https://adapttoaem.blogspot.com/2021/02/setting-dynamic-dropdownselect-value-in.html?m=1

JS way

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

[ashikg3]

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

[Imran__Khan]

---

@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...

[ashikg3]

So I have to use JS to Load the data in page properties?

[Imran__Khan]

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
                    });
                }
            });
        }

[ashikg3]

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

[Imran__Khan]

Follow below blog to understand all about clientlibs
https://medium.com/@toimrank/aem-clientlibs-css-and-js-6fda52c4e26f

[arunpatidar]

Hi @ashikg3 
Could you please check https://aemlab.blogspot.com/2019/07/aem-touch-ui-dropdown-from-json.html  

[ashikg3]

Tried. Data return empty

[arunpatidar]

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