Reusing Tabs or Fields From an Existing Dialog

Joe Gunchy is a dummy!  (read more about Joe here. He’s an idiot) He has 7 different components that all have a a group of fields he named, “Link Properties”.  Link Properties allows a content author to include a button (or text link) on a page with a name, color selection, link URL, ‘open in new window’ selection, and the ability to attach a downloadable content from the DAM. 

The Dialog creation and validation for the first one took about an hour to complete.  Then, he delegated the creation of the other 6 components to the developers on his team.  He told them what fields should be on the Link Properties dialog and which fields were required.  All 6 developers spent an hour and a half on theirs (after all, there is a learning curve to all of this).  All of the fields are represented in their Dialogs, but the names of the labels, the order the fields appear in the Dialog, and the validation messaging is different for each variation of the component.  Some put all of the fields on a separate Tab (which they named “Tab 1”), while some just appended the fields to the bottom of a really, really, really long Tab. 

What if you could create the “Link Properties” Tab once, then reuse it with, say, two lines of code?

“Whatever. You get what you pay for.” – Joe Gunchy

This is perhaps one of the most useful AEM tips I’ve learned.

Once you’ve defined a field that is used on an component Dialog, it isn’t necessary to recreate that field every time you need a similar field on another component. You can easily reuse the field and all of its properties like its labels, help text, and validation rules. For example, if I continually include a field on a Dialog for an “Approved By” name, I can create this field once and reuse it by taking advantage of AEM’s “everything is a resource” rule. That is, every piece of content in AEM has a path and can be retrieved and displayed. In this case, we want to retrieve a JSON representation of the field we want to reuse.

Here’s how…

  • Select the component widget you want to copy into your new component’s dialog.

Navigate to the parent component dialog and find the field you want to copy. In this example, I want to copy the “playSpeed” field from AEM’s out-of-the-box carousel component.

Path: /libs/foundation/components/carousel

1

  • Copy the path of the widget as shown in the address bar beneath the menu items. In this example, the playSpeed widget has the path:

/libs/foundation/components/carousel/dialog/items/carousel/items/playSpeed

This path will be pasted into a property on your new dialog with the extension “.infinitiy.json” added to the end. For example:

/libs/foundation/components/carousel/dialog/items/carousel/items/playSpeed.infinity.json

  • On your new component, create a new widget by selecting CREATE > CREATE NODE.

In this example, I named the field “playSpeed” to match its parent. However, you can name the field anything you want. Select cq:Widget as its type.

Create a new Widget

Create a new Widget

Define the name and type

Define the name and type

In the properties editor, add the following properties:

Name Type Value
xtype String cqinclude
path String /libs/foundation/components/carousel/dialog/items/carousel/items/playSpeed.infinity.json
4

/libs/foundation/components/carousel/dialog/items/carousel/items/playSpeed.infinity.json

/libs/foundation/components/carousel/dialog/items/carousel/items/playSpeed.infinity.json

Note the value of the path property is the path copied from Step 3 with .infinity.json added to the end.

Save your work.

You will now have a field on your dialog with the same values as its parent, including its label, description, and validation rules. This gives the content author a consistent, familiar authoring experience across multiple components.

Advertisements