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. 

Creating custom Adobe CQ commerce providers

An Adobe CQ shopping cart component is used within an Adobe CQ online retail site and provides functionality such as:

• provides an overview of selected items
• links to the individual product pages
• updates to quantity
• removal of the item

A shopping cart component lets visitors to your Adobe CQ online retail site purchase items, as shown in the following illustration.

A shopping cart component 

This development article guides you through building an Adobe CQ custom commerce provider that uses the Adobe CQ Commerce API (this API belong to the com.adobe.cq.commerce.api package). A shopping cart component uses a commerce provider to obtain product data. Included in the custom commerce provider developed in this article is an OSGi bundle that exposes operations that the Geometrix Outdoors web application invokes. By following along with this walk through, you learn how to setup, develop, and configure an Adobe CQ custom commerce provider.

To read this article, click Creating custom Adobe CQ commerce providers.

Note: You can watch this related video: AEM (CQ) eCommerce Integration Framework.

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. 

Adobe Marketing Cloud Community

As an Adobe Marketing Cloud user, it is recommended that you visit the Adobe Marketing Cloud Community pages. These pages offer you many resources that will help you become successful with Adobe Marketing Cloud products such as Adobe CQ or Adobe Analytics. There are five product pages that you can visit. Each page offers you great resources such as articles written by different Adobe Marketing Cloud community members, product videos, training videos, training information, FAQs, and much much more.

Also during this time, you are invited to join the Adobe Marketing Cloud founders community.  Incredibly exciting things are happening on many fronts within Adobe Digital Marketing and over the coming months, this group has the opportunity to grow into a truly useful community that has the ability to shape help, support and learning for you and other members.
Our aim is to design and build, with your help, the Marketing Cloud community for all Adobe customers. Now is definitely the time to join as you have the ability to tell us what truly matters, what resources you need and who you want to talk with.

To access the Founders' community, please go to this URL:

http://help-forums.adobe.com

You can sign in using your Adobe ID (this is the one you use to authenticate on the Adobe.com main website).  After you sign in, you can add your ideas that will be used to help drive the Adobe Digital Marketing Cloud vision/roadmap, and to influence the culture of the community. You can also learn about the other founder members and discuss general topics.

Stop on by, we are looking forward to having you join the Adobe Marketing Cloud Founders' Community.

Adobe Digital Marketing Community

Join the Adobe Digital Marketing Community. Start by clicking this banner

About the Author

I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with over 16 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 @AdobeMktgCare.

Creating Adobe CQ Feed Components that display Twitter data

You can create a custom Adobe CQ data feed component that retrieves external data and displays the data within  a CQ web page. For example, a CQ component can retrieve data from an RSS feed to let your users view recent forum data. Likewise, a CQ component can retrieve data from a social site like Twitter to keep your users updated with the latest social data, as shown here.

A custom twitter feed component displaying data from the AdobeMktgCloud twitter feed

This development article guides you through how to build a custom CQ twitter feed component and add it to the CQ sidekick.

The CQ sidekick displaying a custom twitter feed component

Once added to the sidekick, authors can drag and drop it onto a CQ page during design time. To view this development article, click this link:

https://helpx.adobe.com/experience-manager/using/creating-cq-feed-components-display.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. 

Querying Adobe Experience Manager Data using the JCR API

You can create an Adobe Experience Manager (AEM) application that queries data located in the AEM Java Content Repository (JCR). To query data, you use a javax.jcr.query.Query instance that belongs to the JCR Query API. This API supports both searching and querying operations. For example, assume that your AEM application tracks your organization’s customers. You can query the JCR to obtain a customer result set in which a digital marketer is interested.

The following illustration shows customer data displayed within an AEM application.

This data is retrieved from the AEM JCR and displayed within a data grid control located in a client web page. The JCR Query API is used within an OSGi bundle that returns a result set to the client. This development article guides you through creating an AEM application that queries data from the JCR and displays the data in client web page. To view this development article, click here:

 http://helpx.adobe.com/experience-manager/using/querying-experience-manager-data-using1.html.

NOTE: Be sure to read this article for more information about querying data using the JCR API: http://docs.jboss.org/exojcr/1.12.13-GA/developer/en-US/html/ch-jcr-query-usecases.html#d0e3517

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. 

Persisting CQ data in the Java Content Repository

You can create an Adobe CQ application that captures data from users and stores the data in the Java Content Repository (JCR). When storing data within the JCR, each record can be saved as a separate node. A node can contain properties that store data values. 

Assume that you want to create a CQ application that tracks your customers.

When the end user fills in the CQ web form and clicks the Add Customer button, customer information is persisted in the JCR. The customer identifier value is returned and displayed in the Customer Id field. In this example, each submitted customer record is stored within a JCR node. The values, such as first name and last name, are stored as node properties, as shown in the following illustration.

This development article guides you through creating a CQ web application that captures data and stores it in the JCR. The JCR application logic is implemented as an OSGi bundle that is built using Declarative Services (DS) and Maven. DS is used to inject a SlingRepository instance into the service. The OSGi bundle is a managed component, which means that the OSGi service container creates the SlingRepository instance. 

To view this development article, click:

http://helpx.adobe.com/experience-manager/using/persisting-cq-data-java-content1.html.  

Note: If you are interesting in learning how to query the Adobe CQ JCR, click this link: http://scottsdigitalcommunity.blogspot.ca/2013/02/querying-adobe-experience-manager-data.html.

Note: If you are interested in persisting data in a relational database as opposed to the JCR, see http://scottsdigitalcommunity.blogspot.ca/2013/01/persisting-adobe-cq-data-in-relational.html. 

Note: When modeling data in the JCR, it is recommended that you read the following: http://dev.day.com/docs/en/cq/current/howto/model_data.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.