I've got a dialog defined for a component:
<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" xtype="dialog">
<items jcr:primaryType="cq:Widget" xtype="tabpanel">
<items jcr:primaryType="cq:WidgetCollection">
<config jcr:primaryType="cq:Panel" title="FooTab">
<items jcr:primaryType="cq:WidgetCollection">
<foo jcr:primaryType="cq:Widget"
text="Foo"
xtype="button"
name="./fooButton"
handler="function(b, e){/*what am I editing?*/};"/>
</items>
</config>
</items>
</items>
</jcr:root>
How do I know which resource is being edited by this dialog? Can I get the explicit path that is implicit in the "./" used in the name parameter? Is there some way to find it from the parameters (b = the button, e = the button click event) that are being passed to the button handler? If not, how can I get it into the button handler?
The button is on an dialog, and the dialog has the path.
So the following gives you the path:
b.findParentByType("dialog").path
Related
I am trying to create a dialog with image preview on it. I am able to create dialog with all the fields but i am facing issue with image. I have seen the image component where you can drag drop image but i need the image to be shown when i open dialog component. Is there any component for this without drag drop.
I have tried with html5smartimage image but not working. Please see code below:
<?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" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="cq:Dialog"
height="{Long}500"
title="Test Dialog"
width="{Long}800"
xtype="dialog">
<items
jcr:primaryType="cq:Widget"
xtype="tabpanel">
<items jcr:primaryType="cq:WidgetCollection">
<tab1
jcr:primaryType="cq:Panel"
title="Component Details">
<items jcr:primaryType="cq:WidgetCollection">
<image
jcr:primaryType="cq:Widget"
cropParameter="./imageCrop"
ddGroups="[media]"
fileNameParameter="./fileName"
fileReferenceParameter="./fileReference"
mapParameter="./imageMap"
name="./file"
requestSuffix=".img.png"
rotateParameter="./imageRotate"
title="Image"
xtype="html5smartimage">
<icon.png jcr:primaryType="nt:file">
<jcr:content
jcr:data="{Binary}"
jcr:lastModified="{Date}2015-07-28T19:27:46.878+05:30"
jcr:lastModifiedBy="admin"
jcr:mimeType="image/png"
jcr:primaryType="nt:resource"
jcr:uuid="754c14c8-4423-45df-b982-06bfc13dc6e3"/>
</icon.png>
</image>
</items>
</tab1>
</items>
</items>
</jcr:root>
Please help me out on this.
I don't think there is a need to use the html5smartimage if all that you want to do is, display a static image in the dialog (which needn't get submitted too).
You can make use of the xtype displayfield and use the html property as shown below.
<?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"
xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="cq:Dialog"
height="{Long}500"
title="Test Dialog"
width="{Long}800"
xtype="dialog">
<items
jcr:primaryType="cq:Widget"
xtype="tabpanel">
<items jcr:primaryType="cq:WidgetCollection">
<tab1
jcr:primaryType="cq:Panel"
title="Component Details">
<items jcr:primaryType="cq:WidgetCollection">
<displayimage jcr:primaryType="cq:Widget"
html="<img src='/content/dam/geometrixx/icons/target.png'>"
xtype="displayfield" />
</items>
</tab1>
</items>
</items>
</jcr:root>
Replace the image src with the path to your image which you want to display in the dialog.
Is it even possible to change the dimension of a tabpanel. I tried height and width but it's not working. Any pointers.
<?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" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="cq:Dialog"
height="{Long}600"
title="Tiles"
width="{Long}850"
xtype="tabpanel">
<items jcr:primaryType="cq:WidgetCollection">
</items>
</jcr:root>
Thanks
Change the xtype on cq:Dialog to "dialog", and move the tabpanel 2 levels down, i.e.:
<?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" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="cq:Dialog"
height="650"
title="Tiles"
width="850"
xtype="dialog">
<items jcr:primaryType="cq:WidgetCollection">
<tabpanel
jcr:primaryType="cq:Widget"
xtype="tabpanel">
<items jcr:primaryType="cq:WidgetCollection">
...
</items>
</tabpanel>
</items>
</jcr:root>
I have implemented the following structure and it works perfectly:
- cq:Dialog
- cq:WidgetCollection
- cq:TabPanel
- cq:WidgetCollection
- cq:Widget
- cq:Widget
...
as real life example:
<?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"
title="Filter Component"
height="{Long}500"
width="{Long}550"
xtype="dialog">
<items jcr:primaryType="cq:WidgetCollection">
<tabs jcr:primaryType="cq:TabPanel">
<items jcr:primaryType="cq:WidgetCollection">
<tab1 jcr:primaryType="cq:Widget"
... more attributes
/>
<tab2 jcr:primaryType="cq:Widget"
... more attributes
/>
</items>
</tabs>
</items>
</jcr:root>
NOTE: Both width and height attributes must be configured explicitly in the cq:Dialog node
I have a dialog with a multifield with custom xtype. As per the requirement, I don't require the re-ordering functionality of the multifield elements. Is there a way to hide these buttons.
Dialog xml is as follows.
<?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" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="cq:Dialog"
height="{Long}800"
width="{Long}1200"
xtype="dialog">
<items
jcr:primaryType="cq:Widget"
xtype="tabpanel">
<items jcr:primaryType="cq:WidgetCollection">
<tabs
jcr:primaryType="cq:Panel"
title="Questions & Answers">
<items jcr:primaryType="cq:WidgetCollection">
<tabs
jcr:primaryType="cq:Widget"
addItemLabel="Add a question"
fieldDescription="Note:
1. Add the questions first in a row.
2. Please select answer type before start adding the answers."
name="./questionStack"
xtype="multifield">
<fieldConfig
jcr:primaryType="nt:unstructured"
xtype="apps.nirmal.widgets.configurableQandAfield"/>
</tabs>
</items>
</tabs>
</items>
</items>
</jcr:root>
Just check the API documentation at https://docs.adobe.com/docs/en/cq/5-6/widgets-api/index.html
There you see a boolean property in the Multifield configuration properties to disable ordering:
orderable : Boolean
If the list of fields should be orderable and Up/Down buttons are
rendered (defaults to true).
I am trying to load the tabs as per the change of value in dropdown. I am getting the error box.findParentByType(...).manageTabs is not a function. Here is the code:
<?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" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="cq:Dialog"
height="{Long}600"
manageTabs="function(tab,noSwitch){var tabs=['tab1','tab2','tab3'];var index=tabs.indexOf(tab);if(index==-1) return;for(var i=5;i<tabs.length;i++){if(index==i){this.unhideTabStripItem(i);}else{this.hideTabStripItem(i);}}this.doLayout();if(!noSwitch)this.activate(index);}"
title="Campaign Tiles Configurations"
width="{Long}1000"
xtype="dialog">
<items
jcr:primaryType="cq:Widget"
xtype="tabpanel">
<items jcr:primaryType="cq:WidgetCollection">
<tab1
jcr:primaryType="cq:Panel"
title="Campaign Tiles">
<items jcr:primaryType="cq:WidgetCollection">
<campaigns
jcr:primaryType="cq:Widget"
fieldDescription="Press + to add more"
fieldLabel="Configure Tiles"
name="./campaigns"
width="1000"
xtype="multifield">
<fieldConfig
jcr:primaryType="cq:Widget"
name="./fieldConfig"
xtype="multifieldpanel">
<items jcr:primaryType="cq:WidgetCollection">
<headline
jcr:primaryType="cq:Widget"
fieldDescription="Provide headline for the individual tile"
fieldLabel="Headline"
key="headline"
width="{Long}560"
xtype="textfield"/>
<iconImage
jcr:primaryType="cq:Widget"
fieldDescription="Drag and drop or select the image in this field"
fieldLabel="Icon Image"
key="iconImage"
rootPath="/content/dam"
width="{Long}560"
xtype="ddpathfield"/>
<description
jcr:primaryType="cq:Widget"
fieldDescription="Provide description for the individual tile"
fieldLabel="Description"
key="description"
width="{Long}560"
xtype="textfield"/>
<subdescription
jcr:primaryType="cq:Widget"
fieldDescription="Provide sub-description for the individual tile. Use the mapping {{name}} above."
fieldLabel="Sub-description"
key="subdescription"
width="{Long}560"
xtype="textfield"/>
<buttonText
jcr:primaryType="cq:Widget"
fieldDescription="Text to be applied on the button"
fieldLabel="Button Text"
key="buttonText"
width="{Long}560"
xtype="textfield"/>
<url
jcr:primaryType="cq:Widget"
fieldDescription="URL on which the page navigates after the button is clicked"
fieldLabel="URL"
key="url"
rootPath="/content/XXXXX"
width="{Long}560"
xtype="pathfield"/>
<external
jcr:primaryType="cq:Widget"
fieldLabel="Open in a separate tab ?"
key="external"
labelStyle="width:155px"
xtype="checkbox"/>
<visible
jcr:primaryType="cq:Widget"
fieldLabel="Make VISIBLE?"
key="visible"
labelStyle="width:155px"
xtype="checkbox"/>
<selectList
jcr:primaryType="cq:Widget"
allowBlank="{Boolean}false"
fieldDescription="These are the items on which the rules selected above will be applied"
fieldLabel="Provide Options"
key="selectList"
type="select"
xtype="selection">
<listeners
jcr:primaryType="nt:unstructured"
loadcontent="function(){this.findParentByType('tabpanel').manageTabs(this.getValue(),true);}"
selectionchanged="function(box,value){box.findParentByType('tabpanel').manageTabs(value);}"/>
<options jcr:primaryType="cq:WidgetCollection">
<claims
jcr:primaryType="nt:unstructured"
key="claims"
text="Claims"
value="claims"/>
<plansandbenefits
jcr:primaryType="nt:unstructured"
key="plansandbenefits"
text="Plans & Benefits"
value="plansandbenefits"/>
</options>
</selectList>
</items>
</fieldConfig>
</campaigns>
</items>
</tab1>
<tab2
jcr:primaryType="cq:Widget"
anchor="100%"
title="Campaign Placeholders"
xtype="panel">
<listeners
jcr:primaryType="nt:unstructured"
render="function() { this.findParentByType('tabpanel').hideTabStripItem(1); }"/>
<items jcr:primaryType="cq:WidgetCollection">
<campaign_placeholders
jcr:primaryType="cq:Widget"
defaultValue="[{name},{DoB}]"
disabled="{Boolean}true"
emptyText="[{name},{DoB}]"
fieldDescription="These placeholders should be used while creating content. These are responsible for binding data from the back end."
fieldLabel="Placeholders"
name="/placeholders"
xtype="textarea"/>
</items>
</tab2>
<tab3
jcr:primaryType="cq:Widget"
anchor="100%"
title="Plans & Benefits Placeholders"
xtype="panel">
<listeners
jcr:primaryType="nt:unstructured"
render="function() { this.findParentByType('tabpanel').hideTabStripItem(2); }"/>
<items jcr:primaryType="cq:WidgetCollection">
<plansbenefits_placeholders
jcr:primaryType="cq:Widget"
defaultValue="[{name},{DoB}]"
disabled="{Boolean}true"
emptyText="[{name},{DoB}]"
fieldDescription="These placeholders should be used while creating content. These are responsible for binding data from the back end."
fieldLabel="Placeholders"
name="/placeholders"
xtype="textarea"/>
</items>
</tab3>
</items>
</items>
</jcr:root>
The difference here is that the options dropdown lives in a multifield.
Thanks in advance
===============================
Here is an update. I have been able to resolve the issue by doing some changes in the structure. But now the issue is I am not able to change the height and width of the dialog. Here is the updated code:
<?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" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="cq:Dialog"
boxMinHeight="{Long}600"
boxMinWidth="{Long}1000"
height="{Long}600"
manageTabs="function(tab,noSwitch){var tabs=['campaign','claims','benefits'];var index=tabs.indexOf(tab);if(index==-1) return;for(var i=1;i<tabs.length;i++){if(index==i){this.unhideTabStripItem(i);}else{this.hideTabStripItem(i);}}this.doLayout();if(!noSwitch)this.activate(index);}"
title="Campaigns"
width="{Long}1000"
xtype="tabpanel">
<items jcr:primaryType="cq:WidgetCollection">
<campaign
jcr:primaryType="cq:Widget"
height="{Long}600"
title="Campaigns"
width="{Long}1000"
xtype="panel">
<items jcr:primaryType="cq:WidgetCollection">
<campaigns
jcr:primaryType="cq:Widget"
fieldDescription="Press + to add more"
fieldLabel="Configure Tiles"
name="./campaigns"
width="1000"
xtype="multifield">
<fieldConfig
jcr:primaryType="cq:Widget"
name="./fieldConfig"
xtype="multifieldpanel">
<items jcr:primaryType="cq:WidgetCollection">
<headline
jcr:primaryType="cq:Widget"
fieldDescription="Provide headline for the individual tile"
fieldLabel="Headline"
key="headline"
width="{Long}560"
xtype="textfield"/>
<iconImage
jcr:primaryType="cq:Widget"
fieldDescription="Drag and drop or select the image in this field"
fieldLabel="Icon Image"
key="iconImage"
rootPath="/content/dam"
width="{Long}560"
xtype="ddpathfield"/>
<description
jcr:primaryType="cq:Widget"
fieldDescription="Provide description for the individual tile"
fieldLabel="Description"
key="description"
width="{Long}560"
xtype="textfield"/>
<subdescription
jcr:primaryType="cq:Widget"
fieldDescription="Provide sub-description for the individual tile. Use the mapping {{name}} above."
fieldLabel="Sub-description"
key="subdescription"
width="{Long}560"
xtype="textfield"/>
<buttonText
jcr:primaryType="cq:Widget"
fieldDescription="Text to be applied on the button"
fieldLabel="Button Text"
key="buttonText"
width="{Long}560"
xtype="textfield"/>
<url
jcr:primaryType="cq:Widget"
fieldDescription="URL on which the page navigates after the button is clicked"
fieldLabel="URL"
key="url"
rootPath="/content/XXXXX"
width="{Long}560"
xtype="pathfield"/>
<external
jcr:primaryType="cq:Widget"
fieldLabel="Open in a separate tab ?"
key="external"
labelStyle="width:155px"
xtype="checkbox"/>
<visible
jcr:primaryType="cq:Widget"
fieldLabel="Make VISIBLE?"
key="visible"
labelStyle="width:155px"
xtype="checkbox"/>
<selectList
jcr:primaryType="cq:Widget"
allowBlank="{Boolean}false"
fieldDescription="These are the items on which the rules selected above will be applied"
fieldLabel="Provide Options"
key="selectList"
type="select"
xtype="selection">
<listeners
jcr:primaryType="nt:unstructured"
loadcontent="function(){this.findParentByType('tabpanel').manageTabs(this.getValue(),true);}"
selectionchanged="function(box,value){box.findParentByType('tabpanel').manageTabs(value);}"/>
<options jcr:primaryType="cq:WidgetCollection">
<claims
jcr:primaryType="nt:unstructured"
text="Claims"
value="claims"/>
<benefits
jcr:primaryType="nt:unstructured"
text="Benefits"
value="benefits"/>
</options>
</selectList>
</items>
</fieldConfig>
</campaigns>
</items>
</campaign>
<claims
jcr:primaryType="cq:Widget"
height="{Long}600"
title="Claims"
width="{Long}1000"
xtype="panel">
<listeners
jcr:primaryType="nt:unstructured"
render="function() { this.findParentByType('tabpanel').hideTabStripItem(1); }"/>
<items jcr:primaryType="cq:WidgetCollection">
<parentPage
jcr:primaryType="cq:Widget"
fieldDescription="Leave empty to use current page"
fieldLabel="Parent page"
name="./parentPage"
xtype="pathfield"/>
</items>
</claims>
<benefits
jcr:primaryType="cq:Widget"
height="{Long}600"
title="Benefits"
width="{Long}1000"
xtype="panel">
<listeners
jcr:primaryType="nt:unstructured"
render="function() { this.findParentByType('tabpanel').hideTabStripItem(2); }"/>
<items jcr:primaryType="cq:WidgetCollection">
<ancestorPage
jcr:primaryType="cq:Widget"
fieldDescription="Leave empty to use current page"
fieldLabel="Parent page"
name="./ancestorPage"
xtype="pathfield"/>
</items>
</benefits>
</items>
</jcr:root>
Thanks in advance
Change xtype="tabpanel" to xtype="dialog"
I have the following code in my CQ dialog.xml
<toolbar
jcr:primaryType="cq:Widget"
xtype="toolbar">
<items
jcr:primaryType="cq:WidgetCollection">
<input
jcr:primaryType="cq:Widget"
xtype="textfield"
name="./myInput">
</input>
<button
jcr:primaryType="cq:Widget"
xtype="button"
name="./myButton"
text="Submit" handler ="function() {passMyInput()};">
</button>
</items>
I have implemented the function passMyInput() as follow:
passMyInput(){ alert("test");}
This works fine. My question is how to pass the value of ./myInput to the function passMyInput ?
I have tried handler ="function() passMyInput('./myInput')};" but it doesn't work
The button's handler function receves 2 arguments, button b and eventObject e.
We can obtain the container dialog through the button and then use the getField() method to obtain the value of the field.
The modified hander function would be
function(b, e) {
var dlg = b.findParentByType('dialog');
var val = dlg.getField('./myInput').getValue();
passMyInput(val);
}
For more info, refer widget docs