Thursday, 22 June 2017

Creating an Experience Manager YouTube Component

Displaying Video content within a web site is a typcial requirement for Experience Manager authors. To address this requirement, you can create a custom Experience Manager component that can display a YouTube video. In addition, you can develop the component to retrieve information about the video and display the information within the component, as shown in this illustration.

To set the Video, an AEM author provides the Video ID in a component dialog: 



This development article covers the following tasks: 

1. Fetch the JSON Data using JSONObject into the Experience Manager component.
2. Play the video without the need to use an Iframe in HTML.
3. Video title and channel name shown using an accordion.

To read this development article, check back in July 2017. 



Monday, 12 June 2017

Ask the AEM Community Experts for June 2017

Title: Using Dynamic Media with Experience Manager

Date: Tues June 27, 2017 11 AM EST

Description: Join the Adobe Dynamic Media Eng Team for a discussion about using Dynamic Media with Experience Manage.


To sign up, click http://bit.ly/2sUMVf9.

Promote this blog in your own AEM Community Channels - take advantage of this FREE AEM webinar!!

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.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.


YouTube: Subscribe to the AEM Community Channel

Friday, 2 June 2017

Creating a Login Component for the Experience Manager Toy Store

You can develop a login component for the Adobe Experience Manager Toy Store site. That is, using a login component, you can restrict unauthorized users from accessing it. A login component better secures your site and ensure that only registered users can access the site. In addition, the login component should have Remember Me functionality to remember user name.(Using cookies).

This development article walks you through how to build a Login component for the sample Toy Store site.


To read this Experience Manager Development article - click https://helpx.adobe.com/experience-manager/using/toy_login.html

To watch the Video on the Experience Manager Community Channel -- click:  



Note - To learn how to build the sample Experience Manager Toy Store site, see http://scottsdigitalcommunity.blogspot.ca/2017/03/creating-your-first-adobe-experience.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.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel

Tuesday, 30 May 2017

Understanding the difference between Soap and Restful Web Services

A web service is the ability of a client application to invoke a service on a remote computer and get back data.  There are two types of web services:

  • Soap web service
  • Rest web service

Soap web service

A soap web service exposes a web service definition language (WSDL) document. Using a programming language like Java, you can create proxy objects that consume operations exposed by the web service’s SOAP stack. By creating a Java proxy object, your Java application can exchange the following messages with a soap web service:


  • Soap request: sent to the web service by a client application requesting an action.
  • Soap response: Sent to a client application by the web service after a SOAP request is processed.

A benefit of using web services is that you can create a client application in a development environment that supports SOAP. A client application is not bound to a specific development environment or programming language. For example, you can create a client application using Microsoft Visual Studio .NET and C# as the programming language. Likewise, you can create a client application using Java.

To read an article on AEM and SOAP - see http://scottsdigitalcommunity.blogspot.ca/2014/02/creating-adobe-cq-bundles-using-apache.html.

To read an article about creating an AEM HTL component that invokes a 3rd party SOAP web service and displays the result set, see http://scottsdigitalcommunity.blogspot.ca/2016/08/creating-aem-html-template-language.html.

Restful web services

A restful web service is the explicit use of HTTP methods. A restful web service is more lightweight as opposed to a soap web service. As a result, invoking a restful web service operation is normally faster than invoking a soap web service operation. You do not need to create Java proxy classes to invoke a restful web service. You can invoke a restful web service using almost any tool, leading to lower bandwidth and shorter learning curve. For example, you can invoke a restful web service using Java classes located in the org.apache.http package.

To read an article on AEM and Rest - see http://scottsdigitalcommunity.blogspot.ca/2013/11/creating-adobe-experience-manager.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.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel





Friday, 19 May 2017

Adding a Custom Carousel Component to the Experience Manager Toy Site

The ability to add custom components to an Adobe Experience Manager site is important as it offers you flexibility to address your business requirements. When developing custom components, you can use third-party libraries of which there are many. For example, you can use JQuery plug-ins to create custom components that can improve the look and feel of your site. For information about some existing JQuery plug-ins, see 50 Amazing jQuery Plugins That You Should Start Using Right Now.

As an example, this article is going to modify the Experience Manager Toy Site. This site contains a static image, as shown here.



To improve the look and feel of this site, the static image is replaced with a carousel component that displays different images located in the Experience Manager DAM. 


This article discusses how to create a custom carousel component then add it to the Experience Manager Toy Site. To read this article, click https://helpx.adobe.com/experience-manager/using/toystore_carousel.html.
.

NOTE: To build the Experience Manager Toy Site, see Creating your First Adobe Experience Manager 6.3 website.

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.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel



Monday, 15 May 2017

Developing your first Experience Manager 6.3 Components

When working with Adobe Experience Manager projects, you often need to develop custom components. This article discusses how to on board new developers to Experience Manager and build custom components. This article starts by creating a properly structured Experience Manager project that follows best practices. That is, it discusses specific tooling for both Java developers and front-end developers, as well as how to edit the rendered markup with HTL and Sling models.

In addition, this article covers working with Experience Manager Core Components. For information, see Core Components.


To read this Experience Manager 6.3 developer article, click https://helpx.adobe.com/experience-manager/using/aem63_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.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel


Tuesday, 9 May 2017

Ask the AEM Community Experts for May 2017


Title: Using Lazybones and Editable template in AEM projects

Date: Tues May 30, 2017 11 AM EST

Description: Join Ankur Ahlawat and Scott Macdonald for a discussion about using Lazybones and Editable template in AEM Projects. By joining this session, you will gain a better understanding of how to build AEM projects that take advantage of Lazybones and the new Editable Templates in your projects.


To watch this session - click: https://communities.adobeconnect.com/pkou4185bxyh/?proto=true .

Promote this blog in your own AEM Community Channels - take advantage of this free AEM webinar!!


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.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.


YouTube: Subscribe to the AEM Community Channel

Monday, 8 May 2017

Creating Editable Templates for an Experience Manager Website

When developing enterprise scale Adobe Experience Manager web sites, you can use editable templates. An editable template lets you specify the layout of a page, You can for example, determine the look and feel of the template, specify which components are allowed in the template, and so on. An editable template is built using the Experience Manager template editor.

This article adds editable templates to the Experience Manager Toy Site. This editable template uses a policy which determines what AEM components are allowed in it, as shown in the following illustration.


The following illustration shows the editable template in Initial Content mode.


Using an editable template, you can create pages for your site. The Experience Manager pages have the same look and feel, but have different content. To read this development article, check back later in June 2017. 

NOTE: This Experience Manager developer article builds off of the Sample Toy Site built for Experience Manager 6.3. For information about developing this site, see Creating your First Adobe Experience Manager 6.3 website.

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.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel


Monday, 1 May 2017

Creating Multimedia Experiences using Assets and Dynamic Media

Building interactive and responsive multimedia experiences can be difficult given the vast number of platforms and screens. The Adobe Experience Manager Assets and Dynamic Media capabilities offer a framework and suite of components that allow creators and marketers to effortlessly customize and deliver interactive multimedia viewers across all devices. These easy-to-use tools give marketers the power to build rich and scalable multimedia experiences with little to no technical knowledge.


By reading this article, you will learn the following:


  • Use Dynamic Media to take a single set of assets and serve unlimited customized variations, including size, color, format, and zoom.
  • Author and deploy interactive experiences using out-of-the-box viewers and graphical authoring tools
  • Develop custom viewers using the HTML5 Dynamic Media SDK for complete control
To read this article, click https://helpx.adobe.com/experience-manager/using/aem_dynamic_media.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.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel

Friday, 28 April 2017

Validating Adobe Experience Manager Classic UI dialog values

You can validate fields in an Adobe Experience Manager classic UI dialog with custom JavaScript logic. You can validate fields before saving the data in nodes for any dialog using the Experience Manager classic UI. In this development article, you will learn how to apply custom validations to dialog fields in the classic UI by using JavaScript.

Note: This article discusses how to access and validate dialog fields by using JavaScript. You can apply similar JavaScript logic to your own dialog fields to address your project's business requirements.


Likewise, you can validate email fields, as shown in the following illustration.




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.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel

Thursday, 27 April 2017

Adobe Experience Manager 6.3 is Live

Adobe Experience Manager 6.3 is now live.

Here are some good resources to check out:

Adobe Experience Manager 6.3 documentation

What’s New with Experience Manager 6.3

AEM 6.3 Feature Video Landing Page

Creating your First Adobe Experience Manager 6.3 website

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.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel

Wednesday, 12 April 2017

Creating an Adobe Experience Manager project using Lazybones

You can create an Adobe Experience Manager 6.3 project by using Lazybones, which is a templating language that you can use to setup an Experience Manager project. For more information, see Lazybones.
This development article walks you through an efficient path to create a new Experience Manager project. This article covers the following tasks:
  •     Create an Experience Manager project by using Lazybones.
  •     Setup the project using the Eclipse plug-in.
  •     How to use the Experience Manager Template Editor.
  •     How to set policies for Templates and Components. 
  •     How to create a Page based on the template in the Touch UI.




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.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel



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


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeMktgCare.

TwitterFollow me on Twitter @smac2020  


Wednesday, 5 April 2017

Creating a custom action for an Adobe Experience Manager Form component

You can create an Adobe Experience Manager (AEM) form using various form components located in the Forms Category and submit the data to a custom form action. The custom form action can send the data to an Experience Manager service that can process the data using Java application logic to meet your business requirements. For example, you can store the data in the AEM JCR, in a relational database or send the data within an email message (as a few examples). However, to keep this article simple, the custom AEM service writes the posted data to the AEM log file.

An Experience Manager form can be consumed in a mobile device or a web browser running on a desktop. For example, consider a desktop user filling out the following form.



You can build a custom form action that is invoked when an end user fills out the form and clicks the submit button. In this article, the custom form action named customFormAction is created, as shown in the following illustration.



This article steps you through how to build a custom form action that sends data to an Experience Manager service build using Java APIs. To read this development article, click https://helpx.adobe.com/experience-manager/using/form_component_customaction.html.

Adobe Digital Marketing Community

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



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


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeMktgCare.

TwitterFollow me on Twitter @smac2020  


Tuesday, 28 March 2017

Adobe Experience Manager Additional Community Content

This blog entry lists additional content that the community will find useful.

White Papers


Community Blogs

CQ Ops (Tumblr)
AEM CQ5 Tutorials(Community Member's AEM Blog)
Adobe CQ/Adobe AEM (Community Member's AEM Blog)
Ryan Lunka's Blog (Author of AEM in a Classroom)
Daniel Klco CQ/AEM Blog(Community Member's AEM Blog)
Himanshu Jain CQ/AEM Blog(Community Member's AEM Blog)
Adobe CQ/AEM Club Blog(Community Member's AEM Blog)
CQ5 AEM TRICKS OF TRADE(Community Member's AEM Blog)


Popular Articles

   
   
   
   
   
   
           
           
Adobe CQ Interview Questions

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.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel

Monday, 27 March 2017

Creating your First Adobe Experience Manager 6.3 website

You can develop an enterprise scale website using Adobe Experience Manager 6.3 that contains different sections, based on existing HTML, such as:

  • header
  • body
  • menu
  • footer

In this development article, you will learn the process of building AEM 6.3 templates and components and adding HTML and CSS to build a site. You will also learn how to perform these tasks:
  • modularizing the page-rendering components 
  • defining local supertypes 
  • making use of AEM supertypes

The following illustration shows the website that is build by following the steps in this article.





To watch the Video on this use case - click:

 



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.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel



Thursday, 9 March 2017

Managing multiple instances of the same Adobe Experience Manager OSGi service

When developing custom services for Adobe Experience Manager, you can define a service that can be configured using the Felix Configuration screen.


You define configuration fields that show up in the Felix configuration screen by using a @Property annotations. For example: 

@Property(description="adress to whom email is sent",value=DEFAULT_ADDRESS)
    private static final String ADDRESS = "mailservice.address";
    private String address;

You can configure your AEM service to use different configuration values. For example, you can configure 1 to many different instances of the same service. 

Assume you want to develop a custom email service that contain the following configuration values. 
  • the email address to which an email is sent
  • the email address from which the email is sent
You can configure the custom email service so that each service instance has a different value for these configuration settings. You can enter an AEM configuration value into an AEM configuration dialog, as shown here. 


In this configuration dialog, the to and from email addresses are configurable. You can configure additional configuration settings for the same service.  

When you use the custom Service within AEM, you can create a reference to the exact configuration service that you want to reference. To do this, you use the @Reference annotation and additional metadata such as: 


 @Reference(target = "(mailservice.label=InternetA)")
     MailService mailServiceA; 
     
     @Reference(target = "(mailservice.label=InternetB)")
     MailService mailServiceB;      


In the above dialog, there is a additional field named emailservice.label. You can reference the value in this field with the target value when using the @Reference annotation. 

This development article guides you through how to create an OSGi service where there are multiple configured services and how to use the  @Reference(target = "(mailservice.label=InternetA)") annotation properly.  


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.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel