Creating a custom Image Text component for Experience Manager

As an Adobe Experience Manager component 6.3/6.4 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 Experience League

To become an Experience Business, you need more than just great tools and online help. You need a partner. Experience League is a new enablement program with guided learning to help you get the most out of Adobe Experience Cloud. With training materials, one-to-one expert support, and a thriving community of fellow professionals, Experience League is a comprehensive program designed to help you become your best.

Join the Adobe Experience League by clicking this banner.

I (Scott Macdonald) am a Senior Experience League 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 AEM or other 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

YouTube: Subscribe to the AEM Community Channel. 

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.

To read this development article, click https://helpx.adobe.com/experience-manager/using/aem63_slingmodel.html.

Join the Experience League

To become an Experience Business, you need more than just great tools and online help. You need a partner. Experience League is a new enablement program with guided learning to help you get the most out of Adobe Experience Cloud. With training materials, one-to-one expert support, and a thriving community of fellow professionals, Experience League is a comprehensive program designed to help you become your best.

Join the Adobe Experience League by clicking this banner.

I (Scott Macdonald) am a Senior Experience League 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 AEM or other 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

YouTube: Subscribe to the AEM Community Channel. 

Ask the AEM Community Experts for July 2017

Join the July version of Ask the AEM Community Experts where Peter Nash and Axis 41 community members will discuss AEM and Dispatcher topics focusing on real world topics.

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

Join the Experience League

To become an Experience Business, you need more than just great tools and online help. You need a partner. Experience League is a new enablement program with guided learning to help you get the most out of Adobe Experience Cloud. With training materials, one-to-one expert support, and a thriving community of fellow professionals, Experience League is a comprehensive program designed to help you become your best.

Join the Adobe Experience League by clicking this banner.

I (Scott Macdonald) am a Senior Experience League 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 AEM or other 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

YouTube: Subscribe to the AEM Community Channel. 

Using the Adobe Experience Manager ContextHub to work with Personal Experiences

You can work with the Adobe Experience Manager ContextHub to work with personalized experiences.  A personalized experience presents the visitor with a tailor-made environment displaying dynamic content that is selected according to their specific needs; be this on the basis of predefined profiles, user selection, or interactive user behavior.

That is, personalized content is what web site visitors want to see. It can be categorized, and therefore made available to users according to predefined rules and it must be dynamic; in other words the content must, in some way, be dependent upon the user. If every user would see the same content, then personalization would be redundant.

This article illustrates how to use the Contenthub to work with personalization, That is, the value of the components (or even which components are rendered) that are displayed depends on the user. Consider the following user, whom is a seller (the Business Segment).

Likewise, if a user whom is a buyer is selected from the Contexthub, then the contents of the web page reflects this, as shown in this illustration. 

This article walks you though how to setup personalization data and display the results using the AEM ContextHub.

The following video shows this use case.

To read this article, click https://helpx.adobe.com/experience-manager/using/contexthub_personal.html.

Join the Experience League

To become an Experience Business, you need more than just great tools and online help. You need a partner. Experience League is a new enablement program with guided learning to help you get the most out of Adobe Experience Cloud. With training materials, one-to-one expert support, and a thriving community of fellow professionals, Experience League is a comprehensive program designed to help you become your best.

Join the Adobe Experience League by clicking this banner.

I (Scott Macdonald) am a Senior Experience League 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 AEM or other 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

YouTube: Subscribe to the AEM Community Channel. 

Configuring Experience Manager Rich Text Editor Plugins in a Touch UI Component Dialog

You can create an Adobe Experience Manager (AEM) Touch UI component dialog which contains the Rich Text Editor (RTE) . As a component developer, you can configure the RTE when developing the component. The RTE provides authors with a wide range of functionality for editing their textual content. That is, providing them with icons, selection boxes and menus for a WYSIWYG experience.

To read this development article, click https://helpx.adobe.com/experience-manager/using/touchUI_RTE_configure.html.

Join the Experience League

To become an Experience Business, you need more than just great tools and online help. You need a partner. Experience League is a new enablement program with guided learning to help you get the most out of Adobe Experience Cloud. With training materials, one-to-one expert support, and a thriving community of fellow professionals, Experience League is a comprehensive program designed to help you become your best.

Join the Adobe Experience League by clicking this banner.

I (Scott Macdonald) am a Senior Experience League 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 AEM or other 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

YouTube: Subscribe to the AEM Community Channel.