by Oliver Choy

 Comments (8)

Created

December 1, 2011

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:

COMMENTS

  • By Matthew Sullivan - 4:01 AM on December 1, 2011   Reply

    How do you register the Multi Composite Field? What version is it available? I’ve never found it in 5.4, though it was mentioned in the release.

    • By Oliver Choy - 11:01 AM on December 1, 2011   Reply

      Hello Matthew. The widget is not part of the 5.4 release. The Multi composite field widget is essentially an extension to the CQ.form.CompositeField widget. And to register, you should have something similar to the following:

      CQ.Ext.reg(“multicompositefield”, CQ.form.MultiCompositeField);

  • By pao wang - 11:30 AM on May 11, 2012   Reply

    Is it possible that we can have your demo code to port into our site for a test?

    • By Oliver Choy - 11:52 AM on May 12, 2012   Reply

      Sure Pao,
      I’ll email you separately. Thanks.

    • By Pao Wang - 1:38 PM on May 30, 2012   Reply

      Oliver,

      I have installed your package and created our own multicompositefield extends the CQ compositefield. Everything seems to work fine except when I click the delete button to remove a Question/Answer pair, the content was removed from the dialog box. But when click on the OK button of the dialog box, I got js error of “this.el.dom is undefined in this.el.dom.value = html”. I have been spending hours try to debug this issue and still no luck. Do you have any idea of what might went wrong. By the way, I tried the above code in CQ5.4 and CQ5.5 and all get the same error. Below is the delete button js code in the multicompositefield.js:
      items.push({
      xtype: “panel”,
      border: false,
      items: {
      xtype: “button”,
      cls: “cq-multifield-btn”,
      text: “-”,
      handler: function() {

      item.ownerCt.remove(item);
      }
      }
      });

      Thank you for your help on this. If you need to whole js code I can send to you via email if you wish to take a look.

  • By Veena - 6:33 AM on July 23, 2012   Reply

    Can u please send me the MultiCompositeField.js

  • By Yogesh - 3:12 PM on July 26, 2012   Reply

    Good work !!

  • By Marina Dyrda - 4:59 AM on August 6, 2012   Reply

    Can you please send me your demo code for a test?

ADD A COMMENT