how to validate the dialog dropdown for each selection

[chocochat]

Hi All

I am developing a extjs component that has the dropdown and the textbox.

Can someone suggest me how to validate the dropdown when i click the add item?

For example:

suppose initially i have "cat, rat, dog" ..... after selecting cat and clicking the additem.... it should populate only "rat, dog" in my dropdown and not the "cat"

kindly someone suggest me to slove this.

[smacdonald2008]

You can create a JavaScript file that builds a custom xtype using:

Ejst.CustomWidget = CQ.Ext.extend(CQ.form.CompositeField, {

//define your extjs Java logic

//define a dropdown 

//define a textbox

}

In your custom xtype -- you can use 

extjs JavaScript logic meet your requirements. 

We will be publishing a new article that shows how to build an AEM component that uses a custom xtype and hook that into an AEM dialog. The new article will be published live on Jan 24, 2014. Check the AEM Community page:

http://helpx.adobe.com/marketing-cloud/experience-manager.html

[smacdonald2008 · Accepted solution]

We have created a new community article that will be helpful for this use case. See:

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

This article discusses how to modify controls in a custom xtype using supported methods. This talks about how to populate a drop-down with data and then how to get the selected value from a drop-down and so something with it.

To solve your use case - it would be using supported methods in the custom xtype JavaScript. 

Hope this helps. 

[chocochat]

Hi Smacdonald,

I created the the custom xtype as below

this.allowField = new CQ.form.Selection({
            type:"select",
            cls:"ejst-customwidget-1",
            options:'/bin/dynamicdialog/options.json',
            listeners: {
                selectionchanged: {
                    scope:this,
                    fn: this.updateHidden,
                    
      The options are loaded from the json.... 

Now in the dialog it shows all the values in the options.

When i keep adding the elements by clicking the "add item". on each load the the values that are already added should not be listed in the dropdown.

How to acieve the below function.... is it possible through "listeners" and how?

initially i have "cat, rat, dog" ..... after selecting cat and clicking the additem.... it should populate only "rat, dog" in my dropdown and not the "cat"

[Ojjis]

Yes this is possible with the listeners.
Here's a basic example i made:

* You define an array of possible selection choices as an array in the custom widget.This will be used to populate the options. 
* Define a function for removal of items from the array
* Add a listener to the selection change and make it call the remove function

//... Define widget properties myOptions: ['CAT','MOUSE','DOG','SLOTH'], //... more code //... define a removeItem function removeItem: function(item) { for(var i = this.myOptions.length; i--;) { if(this.myOptions[i] === item) { this.myOptions.splice(i, 1); } } }, //... more code //.... A listener to the selection function(box,value){ this.findParentByType('mycustomwidget').removeItem(value); console.log(this.findParentByType('mycustomwidget').myOptions); } //..more code

Everytime i change a value here, the value will be removed from the array and the array is logged in the console.. Of course you would have to implement some more logic than this but it proves the point that it is possible to do it with listeners.

Good Luck
/Johan

[chocochat]

HI Johan,

I am still not able to resolve it...... below is my function pls correct me if i'm missing

this.allowField = new CQ.form.Selection({
            type:"select",
            fieldLabel:"test",
            cls:"ejst-customwidget-1",
            listeners: {
                selectionchanged: {
                    scope:this,
                    fn: this.removeValue                                   //how to pass the value that i need to remove??
                }
            },
            options: [{text:"1",value:"a"},{text:"b",value:"b"},{text:"c",value:"c"}]
           
        });

removeValue: function(value) {
    alert(value);
    }

Can u plses help me wth this?

and in each time i load it is getting all the values. It is not ignoring the values that i already added

[Ojjis]

Hi, well one thing that you could do is to have the options beeing added in the script file instead of in the xml file. This could be done by defining all the possible values in an array and then add them to as possible selections (but only if they doesnt already exist, which you were after).
It is possible to pass the selected value (defined in the xml) as:

<listeners
    jcr:primaryType="nt:unstructured"
    selectionchanged="function(box,value){this.findParentByType('mycustomwidget').removeItem(value);}"/>

Let me know if there are any more problems
/Johan

[chocochat]

Hi Johan,

My requirement is, I have to send the input to the dropdown from a JSON. I tried adding the JSON to the array and passing the values in to the dropdown. but I am not able to get the values that r already selected inorder to update my array. Is there any possible function to get the values that are already selected in the dialog. Could you please help me with this?