Expand my Community achievements bar.

SOLVED

how to validate the dialog dropdown for each selection

Avatar

Level 2

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.

1 Accepted Solution

Avatar

Correct answer by
Level 10

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. 

View solution in original post

7 Replies

Avatar

Level 10

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

Avatar

Correct answer by
Level 10

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. 

Avatar

Level 2

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"

Avatar

Level 7

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

Avatar

Level 2

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

Avatar

Level 7

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

Avatar

Level 2

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?