Posts tagged "multi composite fields"

December 1, 2011

Custom Component: FAQ component (Simple)

Basic Requirements:

  • Authors can drag and drop the FAQ Component from the CQ5 sidekick to a paragraph system.
  • In the dialog of the FAQ Component, authors can type in multiple question-and-answer pairs.
  • The FAQ Component uses jQuery UI to render the questions and answers inside an Accordion. Clicking on the questions would expand the answers.

Prerequisites:

  • Multi Composite Fields widget should be registered.
  • jQuery UI Library added as a clientlibs in the system.

Demo:


Simple FAQ Component Demo

High Level Overview on creating this custom component:

  1. In CRXDE, create a new component (cq:Component) of FAQ. Set the following properties:
    • allowedParents - */parsys
    • sling:resourceSuperType - foundation/components/parsys
  2. Create a cq:Dialog with the following structure:
    • dialog [cq:Dialog] > items [cq:TabPanel] > items [cq:WidgetCollection] >
faqPanel [cq:Panel] > items [cq:WidgetCollection] > faqEntries[cq:Widget] >
fieldConfigs [cq:WidgetCollection]
  3. The faqEntries [cq:Widget] node would be using xtype of the Multi Composite Fields.
  4. Inside the fieldConfigs [cq:WidgetCollection] node, create the necessary fields to capture the question and answer pair. For example:
    • answer [cq:Widget] with xtype = richtext
    • question [cq:Widget] with xtype = textfield
  5. Specify the appropriate listeners to refresh the page so that modification to the FAQ component would trigger (or re-trigger) the jQueryUI Accordion.
  6. Modify the component JSP file so that the generated markup of question-answer pairs would fulfill jQueryUI’s markup requirement.
  7. Finally, create a cq:ClientLibraryFolder for the FAQ Component. It should contain a javascript file to render the Accordion.

Sample of the component:

1:24 AM Comments (8) Permalink