What are the Exact Steps to Make Custom xtype Work?

[shan_du]

As a CQ5 beginner, I've been struggling for two days trying to achieve something similar to what's shown in the screenshot here from CQ5.6:

[img]http://dev.day.com/content/docs/en/cq/current/developing/widgets/_jcr_content/par/image_3.img.png[/i...

The steps described in this documentation is too vague/highlevel for CQ5 beginners like me to follow

I also tried to follow this post, but no luck either.

Could anyone actually provide a detailed step-by-step guide on what exactly needs to be done to create a custom xtype that can be included in a multifield?

I understand CQ5 is very immense but the lack of good documentation is extremely frustrating.

Thank you in advance!!!

[smacdonald2008 · Accepted solution]

See this walk through - it creates a component that uses xtypes and interfaces with the AEM content finder.

http://scottsdigitalcommunity.blogspot.ca/2014/01/creating-aem-multifield-components.html

Here is another one that will get you started:

http://scottsdigitalcommunity.blogspot.ca/2013/08/creating-cq-widget-that-supports-image.html

It will also teach you how to place it onto the CQ sidekick. 

You can also look at another community article that builds a component that uses xtypes:

[img]AOct18.png[/img]

This one also shows you how to display the values that an author enters into these fields during design time into the CQ component. In this example - the values are entered into a custom carousel component. If you follow along with these one - I recommend building the carousel (the link is in the article). 

http://scottsdigitalcommunity.blogspot.ca/2013/09/integrating-cq-custom-map-component.html

These will get you up and running with building dialogs and components that uses xtypes. 

Then when you are familiar with xtypes, dialogs, adding components to the CQ sidekick, read this one:

http://blogs.adobe.com/contentmanagement/2013/08/22/customized-multifield-richtext-editor/

Hope this helps.

[shan_du]

Hi, thanks very much for your prompt reply, but my question still remain unanswered.

As indicated in the screenshot in my original post, I want my multifield to contain more than one inputs, (for example, a textfield AND a textarea)

Others all suggest this calls for extending a custom xtype.

And from there I have done these steps:

• included a customxtype JS file defining the extended composite field
• included the above JS in the component
• under the multifield node, I added a fieldConfig node with property "xtype", value "customxtype"

When I try to add the item via the dialog, I get this error:

Uncaught cannot create Component: xtype 'accordioninputs' not found and no default supplied

I'm stuck and not sure what to do next, any help would be appreciated!