How to populate users as dropdown in the cq5 dialog

[Sony006]

Hi All,

My requirement is "populate the users as drop down in the dialog". I am getting users from external database in json format.

I have created a custom widget by extending "CQ.Ext.form.ComboBox". The json data format includes "name and email" , i have to populate the name in the dropdown, but i tried with the following code but the data is not storing in the store object.

How to populate the drop down and I have to filter the drop down.

 this.store = new CQ.Ext.data.JsonStore({                  
                url: '/services/userdata',            
                root: 'users',               
                fields: ['name', {name: 'display', mapping: 'name'}]                
            });        
        
        this.valueField = 'name';
        this.displayField = 'display';
        this.autoSelect = 'false';
        
        this.on('beforequery', function(queryEvent) {
            var formattedQuery = {
                "condition": [[
                    {
                        "named": '%' + queryEvent.query + '%'
                    },
                    {
                        "contains": {
                            "property": "profile/@name",
                            "expression": '*' + queryEvent.query + '*'
                        }
                    }
                ]]
            };
        
            queryEvent.query = JSON.stringify(formattedQuery);
            console.log("queryEvent value: "+queryEvent);
            return queryEvent;
        });

Please help me to achieve this.

Thanks.

[smacdonald2008 · Accepted solution]

Write a custom xtype and use script to populate the drop down control. See this community article - it shows you how to write a custom xtype and use JavaScript to set controls. 

https://helpx.adobe.com/experience-manager/using/dynamically-updating-aem-custom-xtype.html

You can do the same thing to dynamically populate the drop down control. IN the custom xtype - use this object:

http://docs.adobe.com/docs/en/cq/5-6-1/widgets-api/index.html?class=CQ.form.Selection

[Sony006]

Thanks smacdonald2008 ,

I have created custom xtype, but the users list is very long, in this how to filter the users based on the text entered in the input box, is there any way to filter the json without calling the server every time.

can you please help to write the query to filter the data.

Thanks

[smacdonald2008]

I would look at writing a custom JavaScript method to read the JSON and then filter based on my own app logic. ie --

http://stackoverflow.com/questions/23720988/how-to-filter-json-data-in-javascript-or-jquery