I have panel in my dialog, & a afterrender listener on panel. I am not able to get the dialog.path in this listener. Below is my code.
function()
{
var count;
var select2opts = [];
var dialog = this.findParentByType('dialog');
var dropdown = this.getComponent("dropdown1");
console.log(dialog.path);
console.log(dialog);
console.log(dropdown);
}
I am able to get dialog object in which i can see the property path which i require. But on console dialog.path prints null. Any Idea.
<items
jcr:primaryType="cq:Widget"
xtype="tabpanel">
<items jcr:primaryType="cq:WidgetCollection">
<tabcontrolpanel
//props
<items jcr:primaryType="cq:WidgetCollection">
<items jcr:primaryType="cq:WidgetCollection">
<typeconfigs
//props
<fieldConfigs jcr:primaryType="cq:WidgetCollection">
<option
//props
<optionval
//prop
</fieldConfigs>
</typeconfigs>
<displayoptions
//props
<options jcr:primaryType="cq:WidgetCollection">
<one
jcr:primaryType="nt:unstructured"
text="Click to refresh tabs list."
value="on"/>
</options>
</displayoptions>
<opentab
//props
<options jcr:primaryType="cq:WidgetCollection">
<one
//props
</options>
</opentab>
</items>
</items>
<listeners
jcr:primaryType="nt:unstructured"
afterrender="Here Code Applies that i sent"/>
</tabcontrolpanel>
</items>
</items>
try this
dialog.responseScope.path
Related
I have an XML fragment and use it in several places in an XML view like this:
<IconTabFilter text="ABC" key="1" icon="sap-icon://alphabetical-order">
<content>
<Table id="table1" width="auto" items="{path:'/ContactSet',parameters:{expand:'BusinessAddress,HomeAddress,OtherAddress,Photo'},filters:[{path:'Surname',operator:'StartsWith',value1:'A'},{path:'Surname',operator:'StartsWith',value1:'B'},{path:'Surname',operator:'StartsWith',value1:'C'}]}" noDataText=" {worklistView>/tableNoDataText}" busyIndicatorDelay="{worklistView>/tableBusyDelay}" growing="true" growingScrollToLoad="true" updateFinished="onUpdateFinished">
<headerToolbar>
<core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesHeader" type="XML"/>
</headerToolbar>
<columns>
<core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesColumns" type="XML"/>
</columns>
<items>
<core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesRows" type="XML"/>
</items>
</Table>
</content>
</IconTabFilter>
<IconTabSeparator icon="sap-icon://process"/>
<IconTabFilter text="DEF" key="2" icon="sap-icon://alphabetical-order">
<content>
<Table id="table2" width="auto" items="{path:'/ContactSet',parameters:{expand:'BusinessAddress,HomeAddress,OtherAddress,Photo'},filters:[{path:'Surname',operator:'StartsWith',value1:'D'},{path:'Surname',operator:'StartsWith',value1:'E'},{path:'Surname',operator:'StartsWith',value1:'F'}]}" noDataText="{worklistView>/tableNoDataText}" busyIndicatorDelay="{worklistView>/tableBusyDelay}" growing="true" growingScrollToLoad="true" updateFinished="onUpdateFinished">
<headerToolbar>
<core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesHeader" type="XML"/>
</headerToolbar>
<columns>
<core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesColumns" type="XML"/>
</columns>
<items>
<core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesRows" type="XML"/>
</items>
</Table>
</content>
</IconTabFilter>
I have some bindings in tablesHeader fragment file:
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<Toolbar>
<Title text="{worklistView>/worklistTableTitle}"/>
<ToolbarSpacer/>
<SearchField tooltip="{i18n>worklistSearchTooltip}" search="onSearch" width="auto"/>
</Toolbar>
</core:FragmentDefinition>
Now the question is how can I customize the binding inside the fragment based on its parent element.
For example I would like to have <Title text="{worklistView>/worklistTable1Title}"/> when it is placed inside the IconTabFilter with key="1" and also <Title text="{worklistView>/worklistTable2Title}"/> when it placed inside the IconTabFilter with key="2".
One possibility is to pass this binding to the fragment when we place it in the destination. But I don't know do we have any option for that in SAPUI5 or not.
The other possibility is to use some kinds of templating like what explained here. However, again I don't know how to make the conditions based on the parent element.
Note: I don't want to enter the codes inside the fragment file directly in the destination file, as I want to prevent repeating the code.
You need to play with the worklistView JSON model. As you mentioned it is a JSON model there will be a common property which is bind to the header text control irrespective of the selected key.
On load IconTabBar will set the default key using selectedKey property. So we can set this key value as the default value for the header text in the header section.
view.xml
<IconTabBar
id="idIconTabBar"
select="handleIconTabBarSelect"
selectedKey="1"
class="sapUiResponsiveContentPadding">
<items>
<IconTabFilter text="ABC" key="1" icon="sap-icon://alphabetical-order">
<content>
<Table id="table1" width="auto" noDataText=" {worklistView>/tableNoDataText}" busyIndicatorDelay="{worklistView>/tableBusyDelay}" growing="true" growingScrollToLoad="true" updateFinished="onUpdateFinished">
<headerToolbar>
<core:Fragment fragmentName="path/tablesHeader" type="XML"/>
</headerToolbar>
<!-- columns-->
<!-- items -->
</Table>
</content>
</IconTabFilter>
<IconTabSeparator icon="sap-icon://process"/>
<IconTabFilter text="DEF" key="2" icon="sap-icon://alphabetical-order">
<content>
<Table id="table2" width="auto" noDataText="{worklistView>/tableNoDataText}" busyIndicatorDelay="{worklistView>/tableBusyDelay}" growing="true" growingScrollToLoad="true" updateFinished="onUpdateFinished">
<headerToolbar>
<core:Fragment fragmentName="path/tablesHeader" type="XML"/>
</headerToolbar>
<!-- columns-->
<!-- items -->
</Table>
</content>
</IconTabFilter>
</items>
</IconTabBar>
Header fragment
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<Toolbar>
<Title text="{worklistView>/worklistTableHdrTitle}"/>
<ToolbarSpacer/>
<SearchField tooltip="{i18n>worklistSearchTooltip}" search="onSearch" width="auto"/>
</Toolbar>
</core:FragmentDefinition>
controller.js
worklistView model will be set with an extra property worklistTableHdrTitle with the default value as per the key which is mentioned in the IconTabBar.
setworklistViewModel: function() {
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
"worklistTableHdrTitle": "Table1 Title",//default value, as selectedKey="1" in IconTabBar
"worklistTable1Title": "Table1 Title",
"worklistTable2Title": "Table2 Title",
"tableNoDataText": "No Data"
});
this.getView().setModel(oModel, "worklistView");
},
Manipulate the worklistView model data based on the selection.
handleIconTabBarSelect: function(oEvent) {
var sSelectedKey = oEvent.getParameters("selectedKey").key;
if (sSelectedKey) {
var oModel = this.getView().getModel("worklistView");
if (oModel)
oModel.setProperty("/worklistTableHdrTitle", (sSelectedKey === "1") ? oModel.getProperty("/worklistTable1Title") : oModel.getProperty("/worklistTable2Title"));
}
},
I am using nested multifield for touch UI in AEM 6.1 and I have requirement to limit the multifield , I already saw acs common (maxItems--validation)but its not helping me .
Please provide your guidance on this.
Using Jquery you can achieve this.You can try the below steps:
1) Create the clientlib folder under your component with categories (String[]) - cq.authoring.dialog
2) In the js file write the below code:
(function($, $document) {
"use strict";
$document.on("dialog-ready", function() {
var fieldErrorEl = $("<span class='coral-Form-fielderror coral-Icon coral-Icon--alert coral-Icon--sizeS' " +
"data-init='quicktip' data-quicktip-type='error' />");
var currentTimeMillis = new Date().getTime();
var countValidatorId = "multifield-validator-" + parseInt(currentTimeMillis);
var $countValidatorField = $("#" + countValidatorId),
$multifield = $("div.coral-Multifield"),
fieldLimit = 3,
count = $multifield.find(".coral-Multifield-input").length;
$.validator.register({
selector: $countValidatorField,
validate: validate,
show: show,
clear: clear
});
$multifield.on("click", ".js-coral-Multifield-add", function(e) {
console.log("Add Called");
++count;
adjustMultifieldUI();
});
$multifield.on("click", ".js-coral-Multifield-remove", function(e{
--count;
adjustMultifieldUI();
});
function adjustMultifieldUI() {
$countValidatorField.checkValidity();
$countValidatorField.updateErrorUI();
var $addButton = $multifield.find(".js-coral-Multifield-add");
if (count >= fieldLimit) {
$addButton.attr('disabled', 'disabled');
var arrow = $multifield.closest("form").hasClass("coral-Form--vertical") ? "right" : "top";
fieldErrorEl.clone()
.attr("data-quicktip-arrow", arrow)
.attr("data-quicktip-content", "Limit is 3")
.insertAfter($multifield);
} else {
$addButton.removeAttr('disabled');
$multifield.nextAll(".coral-Form-fielderror").tooltip("hide").remove();
}
}
function validate() {
if (count <= fieldLimit) {
return null;
}
return "Limit set to " + fieldLimit;
}
function show($el, message) {
this.clear($countValidatorField);
var arrow = $multifield.closest("form").hasClass("coral-Form--vertical") ? "right" : "top";
fieldErrorEl.clone()
.attr("data-quicktip-arrow", arrow)
.attr("data-quicktip-content", message)
.insertAfter($multifield);
}
function clear() {
$multifield.nextAll(".coral-Form-fielderror").tooltip("hide").remove();
}
});
})($, $(document));
You have to do the refactoring of this code and removed some unused properties, but can give you start. Also make sure your js is getting call once you open the dialog. Happy Diwali Dude.
The solution works in AEM 6.3, the limit is configured in the dialog instead of hard coding it. This helps configure the value individually for each component.
(function ($, $document) {
"use strict";
$(document).on('dialog-ready', function (e) {
var multifieldLimit = $('.cq-Dialog').find('coral-multifield').find('section').attr("data-maxmultifieldlimit");
if(multifieldLimit) {
$('.cq-Dialog').find('coral-multifield').children('button').each(function(i) {
$(this).click(function(e){
var itemCount = 0;
$('.cq-Dialog').find('coral-multifield').children('coral-multifield-item').each(function(i) {
itemCount+=1;
});
if(itemCount==parseInt(multifieldLimit)){
e.stopPropagation();
alert('You have added maximum number of items in this multifield');
}
});
});
}
});
$document.on("click", ".cq-dialog-submit", function(e){
var minMultifieldLimit = $('.cq-Dialog').find('coral-multifield').find('section').attr("data-minmultifieldlimit");
if(minMultifieldLimit) {
var itemCount = 0;
$('.cq-Dialog').find('coral-multifield').children('coral-multifield-item').each(function(i) {
itemCount+=1;
});
if(itemCount<parseInt(minMultifieldLimit)){
alert('You have to at least add few more items');
e.preventDefault();
}
}
});
})($, $(document));
Dialog XML
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Configure Card Component"
sling:resourceType="cq/gui/components/authoring/dialog"
helpPath="en/cq/current/wcm/default_components.html#Text">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<fieldset
jcr:primaryType="nt:unstructured"
jcr:title="Configure Card"
sling:resourceType="granite/ui/components/foundation/form/fieldset">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<pages
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
class="full-width"
eaem-nested=""
fieldDescription="Click '+' to add a new page"
fieldLabel="Add Card">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/fieldset"
acs-commons-nested="JSON_STORE"
maxMultifieldLimit="4"
minMultifieldLimit="2"
name="./props">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
method="absolute"/>
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<headline
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Headline"
maxlength="50"
name="./headline"/>
<text
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/richtext"
fieldLabel="Text"
name="./byline"
required="{Boolean}false"
useFixedInlineToolbar="{Boolean}true">
<rtePlugins jcr:primaryType="nt:unstructured">
<format
jcr:primaryType="nt:unstructured"
features="*"/>
<misctools
jcr:primaryType="nt:unstructured"
features="*"/>
<spellcheck
jcr:primaryType="nt:unstructured"
features="*"/>
</rtePlugins>
</text>
<textAlignment
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/select"
fieldLabel="Content Alignment"
name="./alignContent">
<items jcr:primaryType="nt:unstructured">
<text
jcr:primaryType="nt:unstructured"
text="Center"
value="center"/>
<button
jcr:primaryType="nt:unstructured"
text="Left"
value="left"/>
</items>
</textAlignment>
<image
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
fieldLabel="Select image"
name="./imageUrl"
rootPath="/content/dam"/>
<linkpath
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
fieldLabel="Link Url"
name="./buttonUrl"
rootPath="/content/website”/>
<linktext
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Link Text"
maxlength="50"
name="./buttonText"/>
<openNewTab
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/checkbox"
fieldDescription="Please check the checkbox to open link in a new tab"
fieldLabel="Open link in a new tab"
name="./newTab"
text="Open link in a new tab"
title="Open link in a new tab"
value="_target"/>
</items>
</column>
</items>
</field>
</pages>
</items>
</column>
</items>
</fieldset>
</items>
</column>
</items>
</content>
</jcr:root>
I'm using an html5smartimage that allow the user to upload an image.
Here is my dialog configuration:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:Dialog" height="600" width="900" xtype="dialog">
<items jcr:primaryType="cq:WidgetCollection">
<tabs jcr:primaryType="cq:TabPanel">
<items jcr:primaryType="cq:WidgetCollection">
<tabText
jcr:primaryType="cq:Widget"
anchor="100%"
title="Text"
xtype="panel">
<items jcr:primaryType="cq:WidgetCollection">
<richFlag
jcr:primaryType="cq:Widget"
ignoreData="{Boolean}true"
name="./textIsRich"
value="true"
xtype="hidden"/>
<text
jcr:primaryType="cq:Widget"
editElementQuery="div[class="text"]"
hideLabel="{Boolean}true"
name="./text"
xtype="richtext"/>
</items>
</tabText>
<tabImage
jcr:primaryType="cq:Widget"
title="Image"
xtype="panel">
<items jcr:primaryType="cq:WidgetCollection">
<title jcr:primaryType="cq:Widget"
fieldLabel="Title"
name="./image/jcr:title"
xtype="textfield"/>
<alt jcr:primaryType="cq:Widget"
fieldLabel="Alt"
fieldDescription="(leave empty to use the title defined above)"
name="./image/alt"
xtype="textfield"/>
<description
jcr:primaryType="cq:Widget"
fieldLabel="Description"
name="./image/jcr:description"
xtype="textarea"/>
<size
jcr:primaryType="cq:Widget"
fieldLabel="Size"
heightParameter="./image/height"
widthParameter="./image/width"
xtype="sizefield"/>
<image
jcr:primaryType="cq:Widget"
allowUpload="{Boolean}true"
cropParameter="./image/imageCrop"
ddGroups="[media]"
width="{Long}300"
height="{Long}350"
fileNameParameter="./image/fileName"
fileReferenceParameter="./image/fileReference"
mapParameter="./image/imageMap"
name="./image/file"
requestSuffix="/image.img.png"
rotateParameter="./image/imageRotate"
title="Image"
xtype="html5smartimage">
<items jcr:primaryType="cq:WidgetCollection">
<resType
jcr:primaryType="cq:Widget"
ignoreData="{Boolean}true"
name="./image/sling:resourceType"
value="foundation/components/image"
xtype="hidden"/>
</items>
</image>
</items>
</tabImage>
</items>
</tabs>
</items>
</jcr:root>
Using this configuration my image is saved as an nt:file node named "file".
Anyway I completely lost the information of its real name. How can I retrieve this info?
You should set transferFilename property of image node to true
<image
jcr:primaryType="cq:Widget"
allowUpload="{Boolean}true"
cropParameter="./image/imageCrop"
ddGroups="[media]"
width="{Long}300"
height="{Long}350"
fileNameParameter="./image/fileName"
fileReferenceParameter="./image/fileReference"
mapParameter="./image/imageMap"
name="./image/file"
requestSuffix="/image.img.png"
rotateParameter="./image/imageRotate"
title="Image"
xtype="html5smartimage"
transferFileName="true">
Then the original filename will be saved to fileName property of image node.
I have added a new tab to page properties. The tab consists of a multifieldpanel (acs-aem-commons bundle). I am trying to add a textfield, a dropdown and a number of checkboxes. The issue is that when I select the value under dropdown and select the checkboxes, everything looks fine but when I open the Page properties again it doesn't look like the values have been saved. Here is the code:
<tab_xxxx_suppression xmlns:social="http://www.adobe.com/social/1.0" jcr:primaryType="cq:Panel" title="Suppression">
<items jcr:primaryType="cq:WidgetCollection">
<idsuppress jcr:primaryType="cq:Widget" fieldDescription="Press + to add more" fieldLabel="Configure ID card suppress" name="./idsuppress" width="1000" xtype="multifield">
<fieldConfig jcr:primaryType="cq:Widget" name="./fieldConfig" xtype="multifieldpanel">
<items jcr:primaryType="cq:WidgetCollection">
<providedValue jcr:primaryType="cq:Widget" allowBlank="false" fieldDescription="Please provide the value for option selected above" fieldLabel="Provide value here" key="providedValue" labelStyle="width:150px" name="./providedValue" xtype="textfield"/>
<selectList jcr:primaryType="cq:Widget" defaultValue="0" fieldLabel="Business Rules" name="./suppress" type="select" xtype="selection">
<options jcr:primaryType="cq:WidgetCollection">
<one jcr:primaryType="nt:unstructured" text="Vanity URL" value="Vanity"/>
<two jcr:primaryType="nt:unstructured" text="PV/RC" value="PVRC"/>
<three jcr:primaryType="nt:unstructured" text="SA/OI" value="SAOI"/>
<four jcr:primaryType="nt:unstructured" text="Market Type" value="Market"/>
<five jcr:primaryType="nt:unstructured" text="Product Code" value="Product"/>
<six jcr:primaryType="nt:unstructured" text="Div Code" value="Div"/>
<seven jcr:primaryType="nt:unstructured" text="State of Issue" value="State"/>
<eight jcr:primaryType="nt:unstructured" text="Government Program Code" value="Government"/>
</options>
</selectList>
<suppressOptions jcr:primaryType="cq:Widget" title="Selection Options" xtype="dialogfieldset">
<items jcr:primaryType="cq:WidgetCollection">
<whole jcr:primaryType="cq:Widget" fieldLabel="Suppress View ID Card Functionality" labelStyle="width:240px" name="./whole" type="checkbox" width="auto" xtype="selection"/>
<order jcr:primaryType="cq:Widget" fieldLabel="Suppress Order ID card Functionality" labelStyle="width:239px" name="./order" type="checkbox" width="auto" xtype="selection"/>
<view jcr:primaryType="cq:Widget" fieldLabel="Suppress View ID Card Functionality" labelStyle="width:238px" name="./view" type="checkbox" width="auto" xtype="selection"/>
</items>
</suppressOptions>
</items>
</fieldConfig>
</idsuppress>
</items>
</tab_xxxx_suppression>
I try your code in my env and I think I found the problem (or problems):
Since you define the property as a multifield, this will be stored as an json object. So each of the item's property will be json keys (no properties itself), you need to specify "key" attribute and not "name".
I don't know why the fieldConfig don't like the dialogfieldset, causing the exclussion of the checkboxes.
Finally the below code worked fine for me:
<idsuppress jcr:primaryType="cq:Widget" fieldDescription="Press + to add more"
fieldLabel="Configure ID card suppress" name="./idsuppress" width="1000"
xtype="multifield">
<fieldConfig jcr:primaryType="cq:Widget" xtype="multifieldpanel">
<items jcr:primaryType="cq:WidgetCollection">
<providedValue jcr:primaryType="cq:Widget"
allowBlank="false" fieldDescription="Please provide the value for option selected above"
fieldLabel="Provide value here" key="providedValue" labelStyle="width:150px"
name="./providedValue" xtype="textfield" />
<selectList jcr:primaryType="cq:Widget" defaultValue="0"
fieldLabel="Business Rules" key="suppress" type="select" xtype="selection">
<options jcr:primaryType="cq:WidgetCollection">
<one jcr:primaryType="nt:unstructured" text="Vanity URL"
value="Vanity" />
<two jcr:primaryType="nt:unstructured" text="PV/RC" value="PVRC" />
<three jcr:primaryType="nt:unstructured" text="SA/OI"
value="SAOI" />
<four jcr:primaryType="nt:unstructured" text="Market Type"
value="Market" />
<five jcr:primaryType="nt:unstructured" text="Product Code"
value="Product" />
<six jcr:primaryType="nt:unstructured" text="Div Code" value="Div" />
<seven jcr:primaryType="nt:unstructured" text="State of Issue"
value="State" />
<eight jcr:primaryType="nt:unstructured" text="Government Program Code"
value="Government" />
</options>
</selectList>
<whole jcr:primaryType="cq:Widget"
fieldLabel="Suppress View ID Card Functionality" labelStyle="width:240px"
key="whole" type="checkbox" width="auto" xtype="selection" />
<order jcr:primaryType="cq:Widget"
fieldLabel="Suppress Order ID card Functionality" labelStyle="width:239px"
key="order" type="checkbox" width="auto" xtype="selection" />
<view jcr:primaryType="cq:Widget" fieldLabel="Suppress View ID Card Functionality"
labelStyle="width:238px" key="view" type="checkbox" width="auto"
xtype="selection" />
</items>
</fieldConfig>
</idsuppress>
Hope this help you!
Below is my code for dialog, I am trying to get the textfield via id but not able to do so inside the beforesubmit listener. Normally i require to find the particular widget at particular level, so if possible provide some explanation.
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="cq:Dialog"
title="dialog"
xtype="dialog">
<items
jcr:primaryType="cq:Widget"
xtype="tabpanel">
<items jcr:primaryType="cq:WidgetCollection">
<tab1
jcr:primaryType="cq:Panel"
title="Tab 1">
<items jcr:primaryType="cq:WidgetCollection">
<textfield
jcr:primaryType="cq:Widget"
itemId="textfield1"
xtype="textfield"/>
<selectbox
jcr:primaryType="cq:Widget"
itemId="selectbox1"
name="./selectvalue"
type="select"
xtype="selection">
<options jcr:primaryType="cq:WidgetCollection">
<one
jcr:primaryType="nt:unstructured"
text="one"
value="one"/>
<two
jcr:primaryType="nt:unstructured"
text="two"
value="two"/>
<three
jcr:primaryType="nt:unstructured"
text="three"
value="three"/>
</options>
</selectbox>
</items>
</tab1>
</items>
</items>
<listeners
jcr:primaryType="nt:unstructured"
beforesubmit="function(dialog){
console.log(dialog);
var item = dialog.findById("textfield1");
console.log(item);
}"/>
</jcr:root>
Thanks
A component with itemId can be retrived only with getComponent() method of CQ.Ext.Container. Dialog is not a sub class of CQ.Ext.Container. Here's an excerpt from the docs regarding this :
An itemId can be used as an alternative way to get a reference to a component when no object reference is available. Instead of using an id with CQ.getCmp, use itemId with CQ.Ext.Container.getComponent which will retrieve itemId's or id's.
findById() is used to find components with id and not itemId.
Tabpanel in your dialog is a decendant of CQ.Ext.Container type. If you want to use itemId to get reference you should first get reference to it and then use getComponent() method on it.
var tab = dialog.findByType('TabPanel')[0]; //returns an array so taking the first element
var textfield = tab.getComponent('textfield1');
Since the fields in the dialog are fixed and you know you are looking for the first textfield, you can directly do
var textfield = dialog.findByType('textfield')[0]; // need not deal with id's at all.