by Oliver Choy
In this blog post I would like to talk about a more complicated version of the FAQ Component, which was previously blogged here.
The Simple FAQ Component is fairly limited when it comes to adding new features into the FAQ Answers (richtext xtype). Customers might sometimes want to be able to add non-textual components into the answers fields. For example, they might want to:
- Add an image to an answer.
- Embed a video in an answer.
- Add a table, list of children pages, or even a site map.
- User can drag and drop multiple components from the sidekick into a region on a page, and the components (movable) inside the region would be rendered inside a jQuery UI Accordion.
Overview of implementation:
The FAQ Paragraph System actually consists of multiple components. The following steps are grouped by individual components, and for best practice these components are placed inside the same folder (faqparsys). Please take a look at the diagram below for the overall structure of the parsys:
- Much like the OOTB parsys component. The only difference is the rendering of children components in Accordion order.
- faqparsys would loop through all children components. If component is of type faquestion [cq:Component], then it would render the faquestion as an Accordion header. Otherwise components (before the next faquestion component) are grouped as Accordion content.
- At the end of the faqparsys render, the faqparsysend component is included to signify the end of the paragraph system (for better user experience).
- The faqparsys is set to refresh the page on the following listeners so the jQuery UI Accordion would re-trigger and display correctly:
- Simple extension of the OOTB Title Component, so that the type “faquestion” can be identified by the faqparsys.
- This component renders the editbar layout. It is used to signify the end of the paragraph system.
Sample of the finished component:
Enjoy! Again, part of the source-code can be made available upon request. Please email me directly at ochoy@adobe.
–EDIT 2011/12/08– Due to the number of requests I’m getting regarding the source code, please kindly understand that there will be a slight delay in my responses.