CQ5 AEM: how to get a component by name within a dialog using javascript

Question

I know this will probably a simple question, but I'm new to CQ5 and AEM in general.

I have a cq:Widget node which is a simple textfield.

 <rowtitlevalue
     jcr:primaryType="cq:Widget"
     fieldLabel="Row Title Value"
     name="./rowtitlevalue"
     xtype="textfield"
     disabled="true"/>

Now at the moment within my JavaScript, I'm currently accessing it via

var textfield = panel.findByType('textfield')[1];

which works fine (there's another textfield before this one, hence the 1 in the array.

MY QUESTION: how do I look for this field using it's NAME attribute within my javascript.

Any help would be appreciated.

Also, I'm using this object to run the following:

if (show != undefined) {
    textfield.enable();
    textfield.show();
}
else if (show == undefined) {
    textfield.disable();
    textfield.hide();
}

The JavaScript is located within the Component Based ClientLibs.

And this is the Listener that I have under the checkbox that defines the value of SHOW within the javascript (which is working fine).

<listeners
jcr:primaryType="nt:unstructured"
loadcontent="function(field,rec,path){Ejst.toggleRowTitle(field);}"
selectionchanged="function(field,value){Ejst.toggleRowTitle(field);}"/>

Please let me know if you see any problems with this.

Appreciate it in advance

Answer 1

The CQ.Dialog API defines the getField( String name) method which returns a field with the given name. In case more than one field with the same name exists, it returns an array of those fields.

Thus finding parent of xtype dialog instead of panel as shown below would solve this.

Ejst.toggleRowTitle = function(checkbox) {
    var dlg = checkbox.findParentByType('dialog');
    var rowTitleField = dlg.getField('./rowtitlevalue');
    // perform required operation on rowTitleField
}

Answer 2

i did something like that a few days ago and my solution was to make a js file on the same level of the component and with the same name of the component with the information that i need. Something like this: The file will be called rowtitlevalue.js and the content would be:

 "use strict";

    use(function() {

        var data = {};
        data.rowtitlevalueData = properties.get("rowtitlevalue");
        //more properties if needed...

        return  {
           data: data 
        }
    });

then where i need to use it in javascript, i need the following tags:

<sly data-sly-use.data="rowtitlevalue.js">

    <script type="text/javascript">
        var myVariable = ${data.rowtitlevalueData};
   </script>

</sly>