5 things: Creating a Custom Component [ Dialog ] | AEM Community Blog Seeding

[kautuk_sahni]

5 things: Creating a Custom Component [ Dialog ] by Anmol Bhardwaj

Abstract

There are many scenarios where you cannot find any similarity between an OOTB or already created component and the one you need to create.

In this scenario, we need to build a new component from scratch or a “custom component”.

So let’s start with building one. The first step is to create a node (cq:component) and then create a dialog for the component.

Note: If you don't have a cq:dialog in your component, it will not come up in the drag-and-drop menu.

Create the dialog root node
Create a node (nt:unstructured) inside the component and name it cq:dialog.
Add the property sling:resourceType and the value = “cq/gui/components/authoring/dialog”
You can add a jcr:title which will come up in your dialog heading.


2. Create the dialog structure.
— Add a “content” node under the dialog, with the resource type as “granite/ui/components/coral/foundation/container”.
— Now, inside every non-field node i.e. any node which will contain other nodes inside it, you would need a node with type “nt:unstructured” and the name “items”.

3. Add the required fields.
— Now, once you are done with the structure, you can add any fields which you need inside it, I have used an input field for the title text.
— And a path browser that will let authors select an image.

4. Dialog components and fields reference
https://gist.github.com/salomao-santos/0cd0240b9824b52a5fdf777ab712cfe2

Read Full Blog

5 things: Creating a Custom Component [ Dialog ]

Q&A

Please use this thread to ask the related questions.