Expand my Community achievements bar.

SOLVED

How to populate users as dropdown in the cq5 dialog

Avatar

Level 3

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.

1 Accepted Solution

Avatar

Correct answer by
Level 10

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

View solution in original post

3 Replies

Avatar

Correct answer by
Level 10

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

Avatar

Level 3

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

Avatar

Level 10

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