Posts tagged "faq"

August 29, 2017

AEM Best Practices are Live on the SPP

If you haven’t visited the Solution Partner Portal (SPP) lately, it has an updated training experience that includes a new series by our team, Adobe Partner Experience (APx). These Implementation Best Practices, written by our team of expert Technical Architects, are drawn from our experiences implementing solutions across Adobe Experience Cloud Platform. Our first installment features articles related to Adobe Experience Manager, but we have upcoming articles on how to access resources for all the solutions, and also a series on Campaign Best Practices. 

The following APx Best Practices are now published on the SPP. Click the title to be redirected to the full article.

Multitenancy and Concurrent Development in AEM: An analysis of the types of issues that a business might face when attempting to implement AEM, using multiple teams of developers and trying to meet the demands of multiple brands.  Explore strategies for mitigating risks and driving communication and efficiency in project delivery.

Performance and Load Testing AEM – Author Basics: Explore the topic of load and performance testing and the basic best practices for ensuring a successful go live by utilizing tools such as JMeter and ToughDay.

Continuous Integration for AEM: Learn more about three commonly used tools that are central to the continuous integration process:

  • Jenkins: used for continuous integration, version control, and the compiling, testing, and deployment of your code.
  • SonarQube: used for code analysis and to track and measure code quality and technical debt.
  • Nexus OSS: a free repository manager that allows for the mirroring and storage of Maven dependencies.

The new training experience on the Solution Partner Portal has combined all of Adobe’s best training content in one place. Resources are organized by Solution and by role, and the on-demand training is now powered by Adobe Captivate Prime. You’ll also find new Partner Learner Journeys that will guide you through which trainings to take to achieve certification.

Stay tuned for details about our APx Best Practices webinar, which will be presented by Ian Reasor, an A.C.E Architect from Adobe Partner Experience team. 

 

2:12 PM Permalink
December 1, 2011

Custom Component: FAQ (Accordion) Paragraph System

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.
To support any of the above, the Simple FAQ Component would require major modification which would impact existing content nodes (A major No No!). Now, let’s combine all of the requirements from the Simple FAQ Component with the features listed above, and consider the following single use case:
  • 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.
This use case sounds very much like the CQ5 out-of-the-box Paragraph System, where components can be drag-and-drop’ed and be moved around. The missing piece here is the presentation of the components in an expandable/collapsible grouping system.
Applying to the FAQ concept, let me introduce an Accordion Paragraph System. Take a look at the demo below and we’ll dive into the overview.

Demo:

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:

clientlibs [cq:ClientLibraryFolder]:
  • containing javascript to trigger the jQuery UI Accordion.
faqparsys [cq:Component]:
  • 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:
    • afterdelete
    • afteredit
    • afterinsert
faquestion [cq:Component]:
  • Simple extension of the OOTB Title Component, so that the type “faquestion” can be identified by the faqparsys.
faqparsysend [cq:Component]:
  • 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.

 

5:03 PM Permalink

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 Permalink