Creating gallery components that display digital assets stored in the CQ DAM

You can create an interactive gallery component that lets your AEM users engage with your Adobe CQ web site by viewing and clicking on images. When a user clicks on a thumbnail version of an image, a larger view of the image appears. In this workflow, the component retrieves images from the Adobe CQ Digital Asset Management (DAM) repository.

 The CQ DAM is a digital asset management tool that is fully integrated with the CQ platform and enables your enterprise to share and distribute digital assets. Users across an organization can manage, store, and access images, videos, documents, audio clips, and rich media such as Flash files for use on the web, in print, and for digital distribution. For more information, see CQ Digital Asset Management.

Assume, for example, that you are developing an Adobe CQ visual gallery component for a travel company interested in creating an online digital marketing campaign. The component lets visitors to the web site obtain an engaging experience by viewing different cruise images.

A CQ gallery component that displays digital assets located in the AEM DAM

Notice that this CQ image component lets users scroll through cruise images. Once selected, the image populates the background of the CQ page. Furthermore, users can browse different cruise categories. This development article guides you through how to build this CQ visual component. To read this development article, click:

https://helpx.adobe.com/experience-manager/using/creating-gallery-components.html

Join the Adobe Experience Cloud Community 

Join the Adobe Experience Cloud Community by clicking this banner

I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with 20 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.

Linked In: http://www.linkedin.com/in/scottmacdonald2010

Twitter: Follow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel. 

Submitting Mobile Form Data to Adobe CQ

You can create an Adobe CQ mobile form using JQuery Mobile API. When a mobile user fills in the form and clicks the submit button, form data is submitted to Adobe CQ. You can develop an OSGi bundle operation to process the submitted form data to meet your business requirements. For example, consider the following CQ mobile insurance claim form.

A CQ mobile form displayed within a mobile device 

When a mobile user fills in this CQ mobile claim form and submits the data, an OSGi bundle processes the data by persisting it in the Adobe JCR. A claim number is generated on the server and returned to the mobile device and displayed in the first field (see the previous illustration).

This development article guides you through creating a mobile form using the JQuery Mobile API and an OSGi bundle that handles the form submission. To read this development article, click:

Submitting Mobile Form Data to Adobe CQ

NOTE: For information about how to use a Sling Post Servlet to submit mobile data to the Adobe JCR as opposed to using an OSGi bundle as discussed in this article, see http://scottsdigitalcommunity.blogspot.ca/2013/05/submitting-mobile-data-to-adobe-cq.html.

Join the Adobe Experience Cloud Community 

Join the Adobe Experience Cloud Community by clicking this banner

I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with 20 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.

Linked In: http://www.linkedin.com/in/scottmacdonald2010

Twitter: Follow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel.