Developing AEM Components (Classic UI) developing-aem-components-classic-ui

Using CRXDE Lite, create a new component folder in:

/ apps/<myProject>/components/<myComponent>

Recreate the node structure as in libs, then copy the definition of an existing component, such as the Text component. For example, to customize the Text component copy:

• from /libs/foundation/components/text
• to /apps/myProject/components/text

Modify the jcr:title to reflect its new name.

Open the new component folder and make the changes you require. Also, delete any extraneous information in the folder.

You can make changes such as:

• adding a new field in the dialog box

  • cq:dialog - dialog for the touch-enabled UI
  • dialog - dialog for the classic UI

• replacing the .jsp file (name it after your new component)

• or completely reworking the entire component if you want

For example, if you take a copy of the standard Text component, you can add an additional field to the dialog box, then update the .jsp to process the input made there.

One of the following nodes should be present and properly initialized for the new component to appear:

• cq:dialog - dialog for the touch-enabled UI
• dialog - dialog for the classic UI
• cq:editConfig - how components behave in the edit environment (e.g drag and drop)
• design_dialog - dialog for design mode (classic UI only)

Activate the new component in your paragraph system by either:

• using CRXDE Lite to add the value <path-to-component> (for example, /apps/geometrixx/components/myComponent) to the property components of the node /etc/designs/geometrixx/jcr:content/contentpage/par
• following the instructions in Adding new components to paragraph systems

In AEM WCM, open a page in your web site and insert a new paragraph of the type you just created to make sure the component is working properly.

Access a page within your authoring environment that uses the paragraph system, for example <contentPath>/Test.html.

Switch to Design mode by either:

• adding ?wcmmode=design to the end of the URL and accessing again, for example:

  <contextPath>/ Test.html?wcmmode=design

• clicking Design in Sidekick

You are now in design mode and can edit the paragraph system.

Click Edit.

A list of components belonging to the paragraph system are shown. Your new component is also listed.

The components can be activated (or deactivated) to determine which are offered to the author when editing a page.

Activate your component, then return to normal edit mode to confirm that it is available for use.

Copy the standard textimage component from /libs/foundation/components/textimage into the Geometrixx component folder, /apps/geometrixx/components, using textimage as the target node name. (Copy the component by navigating to the component, right-clicking and selecting Copy and browsing to the target directory.)

To keep this example simple, navigate to the component you copied and delete all the subnodes of the new textimage node except for the following ones:

• dialog definition: textimage/dialog
• component script: textimage/textimage.jsp
• edit configuration node (allowing drag-and-drop of assets): textimage/cq:editConfig

Edit the component metadata:

• Component name

  • Set jcr:description to Text Image Component (Extended)
  • Set jcr:title to Text Image (Extended)

• Group, where the component is listed in the sidekick (leave as is)

  • Leave componentGroup set to General

• Parent component for the new component (the standard textimage component)

  • Set sling:resourceSuperType to foundation/components/textimage

After this step, the component node looks like this:

Change the sling:resourceType property of the edit configuration node of the image (property: textimage/cq:editConfig/cq:dropTargets/image/parameters/sling:resourceType) to geometrixx/components/textimage.

This way, when an image is dropped to the component on the page, the sling:resourceType property of the extended textimage component is set to: geometrixx/components/textimage.

Modify the component’s dialog box to include the new option. The new component inherits the parts of the dialog box that are the same as in the original. The only addition we make is to extend the Advanced tab, adding an Image Position dropdown list, with options Left and Right:

• Leave the textimage/dialogproperties unchanged.

Note how textimage/dialog/items has four subnodes, tab1 to tab4, representing the four tabs of the textimage dialog box.

• For the first two tabs (tab1 and tab2):

  • Change xtype to cqinclude (to inherit from the standard component).
  • Add a path property with values /libs/foundation/components/textimage/dialog/items/tab1.infinity.jsonand /libs/foundation/components/textimage/dialog/items/tab2.infinity.json, respectively.
  • Remove all other properties or subnodes.

• For tab3:

  • Leave the properties and subnodes without changes

  • Add a new field definition to tab3/items, node position of type cq:Widget

  • Set the following properties (of type String) for the new tab3/items/positionnode:

    • name: ./imagePosition
    • xtype: selection
    • fieldLabel: Image Position
    • type: select

  • Add subnode position/options of type cq:WidgetCollection to represent the two choices for image placement, and under it create two nodes, o1 and o2 of type nt:unstructured.

  • For node position/options/o1 set the properties: text to Left and value to left.

  • For node position/options/o2 set the properties: text to Right and value to right.

• Delete tab4.

Image position is persisted in content as the imagePositionproperty of the node representing textimage paragraph. After these steps, the component dialog box looks like this:

Extend the component script, textimage.jsp, with extra handling of the new parameter:

Image image = new Image(resource, "image");

if (image.hasContent() || WCMMode.fromRequest(request) == WCMMode.EDIT) {
     image.loadStyleData(currentStyle);

We are going to replace the emphasized code fragment %><div class=“image”><% with new code generating a custom style for this tag.

// todo: add new CSS class for the 'right image' instead of using
// the style attribute
String style="";
     if (properties.get("imagePosition", "left").equals("right")) {
          style = "style=\"float:right\"";
     }
     %><div <%= style %> class="image"><%

Save the component to the repository. The component is ready to test.

Copy the standard image component from /libs/foundation/components/image into the Geometrixx component folder, /apps/geometrixx/components, using image as the target node name.

Edit the component metadata:

• Set jcr:title to Image (Extended)

Navigate to /apps/geometrixx/components/image/dialog/items/image.

Add a new property:

• Name: allowUpload
• Type: String
• Value: false

Click Save All. The component is ready to test.

Open a page in Geometrixx such as English / Company.

Switch to design mode and activate Image (Extended).

Switch back to the editing mode and add it to the paragraph system. On the next pictures, you can see the differences between the original image component and the one you just created.

Original image component:

Your new image component:

The component is now ready to use.