Tuesday, 10 October 2017

Creating a Mail List Component for the Experience Manager Toy Store Site

You can create Adobe Experience Manager custom components that function as Mail Sign Up  components. An Mail Sign Up component lets web site visitors sign up to a mailing list that typically includes emailing out newsletters. In this article, the Mail List component is added to the Experience Manager Toy Store site.


When the user fills in the fields and clicks the Submit button, the data is persisted in a relational database by using a DataSourcePool


This development article discusses how to inject a DataSourcePool service into an AEM service to which an HTL component submits data. By injecting a DataSourcePool, your service can connect to a relational database such as MySQL.  

This article shows use of the following AEM technologies: 

1. Building a HTL component that can submit data to a back-end service. 
2. Using Sling Models with an HTL component. 
3. How to inject a DataSourcePool into an AEM 6.3 service. 

To read this development article, check back on Tues Oct 17, 2017.  



Thursday, 5 October 2017

Ask the AEM Community Experts for October

Sign up for this month's Ask the AEM Community Experts.

Here are the Details:

Date
Tuesday, October 31, 2017
11:00 AM to 12:00 AM

Topic:
The ability to create custom components is a very important use case when working with Adobe Experience Manager. The preferred language to create custom component is HTL. This session will present a Deep Dive when working with HTL and will cover such topics as working with Sling Models, the Java USE API, how to deal with collections to build rich custom components meant for Experience Manager web sites.

Presenters:
Shivani Garg, AEM Developer
Saurabh Gupta, AEM Developer




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, 28 September 2017

Using an WCMUsePojo class to populate an Experience Manager Touch UI Select Field

You can create an Adobe Experience Manager (AEM) 6.3 Touch UI component that contains a drop-down control that can be used within the AEM Touch UI view. The data type of the drop-down field is /libs/granite/ui/components/foundation/form/select.

An AEM author selects drop-down values during design time. For example, an author can select a country from the drop-down field, as shown in this illustration.



You can populate a drop-down field by using a com.adobe.granite.ui.components.ds.DataSource object. For information, see DataSource.

Furthermore, you can create this object in a Java WCMUsePojo class and use HTL to invoke it. That is, get the values defined in the DataSource object. Finally you can bind the resource type of the HTL code to the dialog node that represents the drop-down field.

This development article steps your through how to use a DataSource object, a Java Map collection object, and HTL to populate a drop-down field in an AEM 6.3 component.

To read this development article, click https://helpx.adobe.com/experience-manager/using/aem63_datasource.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





Wednesday, 27 September 2017

Setting Maximum items in an Experience Manager 6.3 Multifield

You can create an Adobe Experience Manager (AEM) 6.3 Touch UI component that can be used within the AEM Touch UI view. Furthermore, you can use the AEM HTML Template Language (HTL - formally known as Sightly) to develop the AEM component. For example, consider an author whom enters information into a multi-field control in the component's dialog, as shown in this illustration.


In the previous illustration, notice that the Page Name and Path controls are used within a multifield control. When an author clicks the Add Field button, a new area that contains a Page Name, Path and Flag control appears. This lets an author dynamically enter as many values as required into the dialog.

Sometimes you may have a requirement to set a limit of the number of multifield items that an author can set. When the author attempts to go over the limit, a message appears, as shown in this illustration. 


This development article discusses how to use script to set the maximum number of multifield items an AEM author can set in a Touch UI component dialog. To read this development article, click https://helpx.adobe.com/experience-manager/using/multifield_aem63_setlimit.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




Wednesday, 20 September 2017

Creating Personal Experiences using Experience Manager and Target

When working with Adobe Experience Manager and Adobe Target to create personalization use cases, you can use Experience fragments to change the content that is displayed. Experience Fragments are a new feature introduced in AEM 6.3. They allow content authors to reuse content across channels including Sites pages and 3rd party systems. For more information, see Using AEM Experience Fragments.

Using Experience Fragments, you can display content based on the audience. For example, some users may see this content.


While others see this content. 


Using Adobe Target, you can setup personalization use cases. This article steps you through how to setup personalization use cases using Experience Fragments, Experience Manager, and Adobe Target. 



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, 13 September 2017

Ask the AEM Community Experts for Sept 2017

September 2017 – Ask the AEM Community Expert Session


Topic: Best practices for working with ContextHub in Adobe Experience Manager

Speaker: Varun Mitra, Training Instructor/Developer, Worldwide Field Enablement Adobe

ContextHub is a framework for storing, manipulating, and presenting context data. The client-side JavaScript API enables you to access the data for personalizing content. Join Varun Mitra, on Tuesday September 26th at 8:00 AM PDT for an in depth look at best practices for working with ContextHub , and how to use a data layer in an AEM Sites.

To watch this session -- click:


http://bit.ly/917AtACE


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, 11 September 2017

Creating a custom Touch UI Grid Component for Adobe Experience Manager

You can develop a custom Adobe Experience Manager (AEM) Touch UI grid component to address your business requirements. An AEM grid control component lets an AEM author split the content in the main panel of the web-page into multiple columns. Using a component dialog, an author defines the number of columns required and then create, delete, or move content within each of the columns.


Using a custom Grid control, an AEM author can specify different width options by using a dialog.


This grid component uses Bootstrap.  To read this development article, click https://helpx.adobe.com/experience-manager/using/bootstrap_grid.html

NOTE: This development article shows an example of using a HTL component with Sling Models. 

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, 8 September 2017

Creating an Adobe Experience Manager 6.3 Project using Adobe Maven Archetype 11

You can create AEM 63 projects by using Adobe Maven Archetype 11.  This development article walks you through creating an AEM 6.3 project by using Archetype 11 and explains the default AEM files and services that are created.

The following illustration represents a default page that is created.



Under the Service Component section in the above illustration, notice the values that are displayed.

HelloWorldModel says:
 Hello World!
 This is instance: fe95f477-e525-432b-9fed-9d65dba3f5d2
 Resource type is: aem10/components/content/helloworld


These values are returned by a default AEM service. Once you understand all of the files and services that are created by Maven, you can use this project as starting point for your AEM 6.3 projects.

To read this development article, click https://helpx.adobe.com/experience-manager/using/maven_arch11.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

Monday, 28 August 2017

Creating an Experience Manager Responsive Banner Component

As an Adobe Experience Manager Developer, you can create a custom Banner component. A Banner Component typically embeds an advertisement into a web page.  That is, it is used to attract traffic to a website by linking to the website of the advertiser. This development article walk you thought how to build a responsive Banner component that can be used in an AEM site.


The Banner component built in this article uses the Bootstrap library. For information, see Bootstrap.

To read this development article, click https://helpx.adobe.com/experience-manager/using/htl_banner.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, 15 August 2017

Passing Binary Data between Experience Manager Workflow Steps

You can develop a custom Adobe Experience Manager (AEM) workflow step that sets a binary value that can be retrieved by another step in the same workflow. For example, assume you read a byte array and you need that value in a later step. You can store the value and retrieve it in a later step.

To read and write binary values in an AEM workflow, you need to write custom steps. A custom workflow step is implemented as an OSGi bundle that you can build using Maven and the AEM Workflow APIs that belong to the com.adobe.granite.workflow.exec package. For information, see Package com.adobe.granite.workflow.exec.

To demonstrate how to pass values in a workflow between steps, this article uses the following workflow model.




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, 11 August 2017

Creating an AEM HTML Template Language 6.3 component that uses a Multifield

You can create an Adobe Experience Manager (AEM) 6.3 Touch UI component that can be used within the AEM Touch UI view. Furthermore, you can use the AEM HTML Template Language (HTL - formally known as Sightly) to develop the AEM component. For example, consider an author whom enters information into a multi-field control in the component's dialog, as shown in this illustration.


To read this Adobe Experience Manager 6.3 development article, click https://helpx.adobe.com/experience-manager/using/multifield_aem63.html

Added an new package for AEM 6.3 that included a RTE

Based on community feedback - such as https://forums.adobe.com/thread/2379678, we added a separate package that contains a RTE in the Multifield. It works - see: 


This is the JCR node structure now:


Notice that the RTE data is stored as JSON data under the page: 




You can see this by installing the second package that is part of this article

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, 8 August 2017

Ask the AEM Community Experts for August 2017

Join Lokesh Bangalore Shivalingaia, a top community member, for a discussion about using Adobe Experience Manager core components and how to use them in your digital marketing projects.

By joining this session, you will gain a deeper understanding of how to work with this new generation of Experience Manager components.


Make sure to RSVP. then export your calendar reminder. At 8 AM PDT join us to hear best practices from Lokesh, and get your questions answered from the AEM Experts.

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


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, 31 July 2017

Creating a custom Image Text component for Experience Manager 6.3

As an Adobe Experience Manager component developer, you can create custom components to address project requirements. For example, you can create a custom image/text component that can let an author dynamically set the position of the image on a web page.  A author can set the image on the left side of the page, as shown here.


Likewise, the author can set the image on the right side. 



Benefits of creating this custom text/image component are as follows: 
  1. No need to merge everything into one single component.
  2. An author can drag and drop additional components as required.
  3. This component has a custom image, heading and button component. which can be added or deleted from the parsys.
  4. It is responsive so as per screen resolution, it is adjusted.
  5. In the main div, you can first select the image position i.e left/right.
To read this development article, click  https://helpx.adobe.com/experience-manager/using/htl_image_text.html.

NOTE: this component does not make use of backend Java code, only front end HTL logic. 

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, 25 July 2017

Working with Experience Fragments and the Experience Manager ContextHub

When working with Adobe Experience Manager ContextHub and Personalization use cases, you can use Experience fragments to change the content that is displayed. Experience Fragments is a new feature introduced in AEM 6.3. It allows content authors to reuse content across channels including Sites pages and 3rd party systems. For more information, see Using AEM Experience Fragments.

Using Experience Fragments, you can display content based on the audiences. For example, some users may see this content:


While others may see this content. 


This development article walks you through how to use experience fragments when using the ContextHub, 


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, 24 July 2017

Creating Adobe Experience Manager 6.3 Sling Model Components

You can work with Sling Models when developing with Adobe Experience Manager (AEM) 6.3. That is, when developing an Experience Manager project, you can define a model object (a Java object) and map that object to Sling resources. For more information, see Sling Models.

A Sling Model is implemented as an OSGi bundle. A Java class located in the OSGi bundle is annotated with @Model and the adaptable class (for example, @Model(adaptables = Resource.class). The data members (Fields) use @Inject annotations. These data members map to node properties.

Consider the following Java class named UserInfo.

package SlingModel63.core;
  
import javax.inject.Inject;
  
import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.Model;
   
@Model(adaptables = Resource.class)
public class UserInfo {
    @Inject
    private String firstName;
    @Inject
    private String lastName;
    @Inject
    private String technology;
       
    public String getFirstName() {
        return firstName;
    }
    public String getLastName() {
        return lastName;
    }
    public String getTechnology() {
        return technology;
    }
   
}

As you can see in the code example, the @Model annotation is used. Likewise, each data member in the UserInfo class is annotated using the @Inject annotation. This Java class is mapped to a Sling resource, like the one shown in the following illustration.


Notice that the class members in the UserInfo class map to the String properties that belong to the /content/testsling/slingmodel node. This article walks you through creating a Sling Servlet that uses a Sling Model to map to this resource.

The following illustration shows the output of the Sling Servlet that uses Sling Models. Notice that the values in the node properties are displayed.



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