Multifield widgets are used to allow authors to enter a dynamic number of data points. By default, these data points are entered as simple textfield controls. How can that be changed to allow for other types of input?
Here is an example of a multifield whose inner widget’s xtype is pathfield:
Problem: To create a multifield, a new widget of xtype multifield me be created. But xtype is traditionally what defines the input type, so we can’t change that directly.
Solution: Create another widget inside the multifield called fieldConfig
and use that to customize the widget.
The node images is the multifield xtype. It’s where the name, in this case ./images
, is specified. Within that widget node, create another widget node named fieldConfig
. Specify additional properties, like xtype: pathfield
within that node.
Extracting the properties: retrieving data stored in this field is done in the same manner as standard multifield components.
Resources:
Summary: AEM’s built-in multifield widget is surprisingly customizable. There’s no need to go creating custom xtypes just to configure this widget.
Thanks for the article, neat and clear.
I have one question, how to add multiple items under fieldConfig.
(ie) I want Title and Link as multifield items as same group
Thanks Bala. The simplest way to capture both title and link within a multifield is to use two separate multifields inputs and just trust the user to match them up 1-1.
A more complicated way , like having link/title side-by-side within the same multifield, I believe would require the creation of a custom widget. That’s a larger topic that I haven’t covered yet here, but should have some examples floating around in the AEM blogsphere.
With your approach, I can create multifield of textfield or pathfield. But I could not create “dropdown” field. In CQ term, xtype is selection.
Can you help me on that?
Hi, I have done same thing which you have mentioned in this article but when i am dropping the component from side kick i am not able to see it on site admin page.Can you explain that.
Hi Dheeru. Try importing the provided package and see if that makes a difference.
There are a number of reasons why a component might not render in a page. Usually it’s due to a missed property or typo in the jsp. I’d start by comparing against the component I’ve packaged, then checking the logs to see if any errors are appearing there.
hi,
I am not able to get minus button for the Images Multifield dialog.
can you please help me?
I’d be glad to, but you’ll have to post more detail on the issue. Does the installed component work like the screenshots other than the minus buttons?
Hi Nick,
How to add dynamic panels to dialog, author it and retrieve the data back?
I don’t have an example of using dynamic panels on hand but will add it to my list of future topics. In the meantime, please do post a link if you find a solution or example elsewhere.
Hi
am working particular link to display new window that is working fine i take pathfield xtype and select content data any thing it’s not done can you help me how to read path field data using xtype
hi nick,
i use xtype (textfield) read for dialog data below
<a href="” target=”_blank”><%=properties.get("linkpage","enter the site title")
can u help me how to read data using pathfied for a dialog .
thanx
Hi surendar and thanks for commenting.
I’d love to help but may need some clarification on the question. Is this failing specifically when using multifields as described above?
If the only change that you made was swapping the dialog’s xtype:textfield to xtype:pathfield, there shouldn’t be any difference at all in how the property itself is stored and retrieved. I would troubleshoot it by changing the xtype property back to textfield, change the value stored, and make sure it displays in the page correctly.
If not, it could be a few basic things such as a typo in the dialog property name or a duplicate property name/path in another dialog that’s overwriting the first. Double check this, then take a look at the jcr:content node for that page and verify the values are getting stored correctly. Let us know what you find!
Hi nick,
Thanks for my reply my requirement is dynamically given text and external site name and click that show new window
for example:
facebook site this is my link text link address is http://facebook.com/ it is working fine using in dialog i take xtype textfield for now i need i have internal 3 sites using in dialog pathfield how to make my project as a link. kindly can u help me .
If I’m reading correctly, you’re saying that everything works end-to-end using a textfield. But when you change the dialog’s “xtype” property from textfield to pathfield, you’re no longer retrieving any data?
In terms of storing and retrieving data, everything should work the exact same way between the two. The only thing I can think of without seeing the exported project would be a duplicate widget with the same “name” property is being left blank and, when closing the dialog, is overwriting the pathfield’s value. Make sure the widgets have unique names and the input values are being stored correctly within the pages’ jcr:content nodes.
Hi , Nick,
Thanx for providing information i clear my doubt .
now i am faced one more issue on my siteadmin page when i open my siteadmin content (http://local:4502/cf#/content) it’s showing white page can u help me .
Hi Nick,
can you help me how to create customized component my Email Address send particular in crxde website page.
i enter here only Email Address only.
Thank you.
Hi Nick,
Can u give me replay sorry for done my side any mistake .
now u only help me i have a problem .
i tried Adobe Cq form using Mysql connect and store data into mysql
i fallow below document but it’s not coming only showing in custId zero can u help me please.
http://helpx.adobe.com/experience-manager/using/querying-persisting-cq-data-mysql.html
Thanks
hi,
I have done something similar to this. I need to know if i click on on the ‘ – ‘ sign i need to provide a dialog to the user “Do you want to Delete or not” with OKCANCEL message box. I user beforeremove in my listener but not able to do it. Can you pls suggest me a method
Hi Sai. What you’re trying to do, displaying a confirmation dialog box when removing a row, is not supported out-of-the-box by the built-in Ext JS multifield widget. You’re going to have create a custom widget that extends the multifield functionality. The actual code addition should only by a line or two depending on how reusable you want it to be, but the creation of custom components in general requires a bit of legwork. That’s outside the scope of this post but it’s a good idea for a future one.
Hi Nick,
Can we create a multifield which has an image and custom widget combined? I am trying to do this but the image field gets disabled and I am not able to drag and drop any images.
Thanks in advance.
How do I add a listener into the dialog which contains multi field,
so that I can remove the corresponding jcr node when I delete one row of the multifield?
I have one question for you
I have a created a custom multified, where I have differenent components(textfield, rich text..etc ) and its working fine but when I entered values and save ..its saving as single values but I need an array values starting from the first record, currently its saving as an array starting from second record….other side I have program where in , its reading as a JSONArrya getting some error in forst record buts its work fine starting from second records on words since its saving as an array
Can you please help me,,,,,all the nodes inside custom multified under dailog are configured as single value ony
Thanks & Regards
Raja Pinja