Authoring Core Components

 

Authoring Core Components

 

In Adobe Experience Manager, components are the structural elements that constitute the content of the pages being authored.

 

Components have always been a fundamental element of the AEM experience, making page creation simple but powerful for the author and the development of components flexible and extensible for the developer.

 

Core Components were introduced to provide robust and extensible base components, built on the latest technology and best practices

 

Core components make page authoring more flexible and customizable, and extending them to offer custom functionality is simple for the developer.

 

However, using these components in the project is developer job to get maximum benefits of these pre-configured and pre-built components.

Note for Developers:

Core Components are not immediately available to authors, the development team must first integrate them to your environment . Once integrated, they may be made available and pre-configured via the template editor .

Benefits As an author:

Author will notice several advantages of the Core Components, including:

·       Simple to use and well-integrated with the page editor

·        Feature-rich capabilities to accommodate many use cases as illustrated by the WKND   reference site as well as in the Component Library

·        Pre-configurable to define which features are available to page authors via the template editor

·        Built around accessibility guidelines

·        Built to support responsive layout.

·        Built to support easy localization

 

Configuring Foundation Components was the job of a developer.

However with Core Components, a template author can now configure a number of capabilities via the template editor.

For example, if an image component should not allow image upload from the file system, or if a text component should only allow certain paragraph formatting, these features can be enabled or disabled with a simple click.

 

Edit and design dialog of component

 

Because the Core Components can be pre-configured by template authors to define what options are allowed as part of a template, and then further configured by the page author to define actual page content, each component can have options in two different dialogs.

 

Edit Dialog	Design Dialog
Options that a page author can modify during normal page editing for the placed components.	Options that a template author can modify when configuring a page template.
The content displayed by the component and how it will ultimately appear on the page.	What options the page author has available when editing the component
For example, Formatting of content text, rotate an image on a page	For example, Which text formatting options are available, which image in-place options are available

 

Component Styling

The styles of most Core Components can be defined using the AEM style system.

A template author can define which styles are available for a particular component in the Design Dialog of that component.

The content author can then choose which styles to apply when adding the component and creating content.

 

Core Components can be tricky to integrate in project:

To get up-and-running with Core Components in your own project, there are four steps, which are detailed below in 4 steps:

1.     Download and Install

2.     Create Proxy Components

3.     Load the Core Styles

4.     Enable the Components

 

Step 1:

Download and install

Releasing new versions of the Core Components more often allows Adobe to be more flexible in delivering new features. Developers in turn can be flexible in which components they choose to integrate into their projects and how often they wish to update them.

Step 2:

Create Proxy Components

Core Components must not be directly referenced from the content. To avoid that, they all belong to a hidden component group ( .core-wcm or .core-wcm-form ), which will prevent them from showing up directly in the editor.

 

Instead, site-specific components must be created, which define the desired component name and group to display to page authors, and refer each to a Core Component as their super-type.

These site-specific components are sometimes called "proxy components", because they don't need to contain anything and serve mostly to define the version of a component to use for the site.

However, when customizing the Core Components , these proxy components play an essential role for markup and logic customization.

Step 3:

Load the Core Styles

For using in your project create a Client Library that contains all of the CSS and JS files that are needed for your site.

On the Client Library of your site, add the dependencies to the Core Components that might be needed. This is done by adding an embed property.

Make sure that the proxy components and client libraries have been deployed to  AEM environment.

 

Step 4:

Allow the components

The following steps are to be performed in the Template Editor .

·        In the Template Editor, select the Layout Container, and open its policy.

·        In the list of Allowed Components, select the proxy components created previously, which should show up under the component group assigned to them. Once done, apply the changes.

·        Optionally, for the components that have a design dialog, they can be pre-configured.

In the pages created from the edited template, you should now be able to use the newly created components.