AEM - Custom Component with Dialog CRXD

custom-component.html

<sly data-sly-use.templates="core/wcm/components/commons/v1/templates.html"/>
<div>
    <h2>${properties.yourname}</h2>
    <p>${properties.youremail}</p>
    <p>${properties.yourage}</p>
    <p>${properties.yourcontactno}</p>
</div>
<sly data-sly-call="${templates.placeholder @ isEmpty = !properties.productTitle}" />

custom-component.txt

Custom component with dialog:- CRXD

Step 1: Create Node
Name: samplecomponentwithdialogcrxd
Type: cq:Component

Add few properties here:-
jcr:primaryType => cq:Component
componentGroup => AEM Geeks - Content (String)
jcr:title => Sample Component with Dialog CRXD (String)

Step 2: Create .html file and the file name should be same as Node name.
samplecomponentwithdialogcrxd.html

Step 3: Create a dialog
Right click on the component node: create node
Name: cq:dialog
Type: nt:unstructured

Add properties here:-
jcr:primaryType => nt:unstructured
jcr:title => Fill your details (String)
sling:resourceType => cq/gui/components/authoring/dialog (String)

Step 4: Create a content node: 
Right click on the cq:dialog node: create node
Name: content
Type: nt:unstructured

Add properties here:-
jcr:primaryType => nt:unstructured
sling:resourceType => granite/ui/components/coral/foundation/fixedcolumns (String)


Step 5: Create a items node:
Right click on the content node: create node
Name: items
Type: nt:unstructured

Step 6: create a column node:
Right click on items node: create column
Name: column
Type: nt:unstructured

Add properties here:-
jcr:primaryType => nt:unstructured
sling:resourceType => granite/ui/components/coral/foundation/container

Step 7: Create a items node:
Right click on the column node: create node
Name: items
Type: nt:unstructured

Step 8: create all the node as Field items

Create a name node:
Right click on the items node: create node
Name: yourname
Type: nt:unstructured

Add properties here:-
jcr:primaryType => nt:unstructured
sling:resourceType => granite/ui/components/coral/foundation/form/textfield (String)
fieldLabel => What is your name
name => ./yourname

Create a email node:
Right click on the items node: create node
Name: youremail
Type: nt:unstructured

Add properties here:-
jcr:primaryType => nt:unstructured
sling:resourceType => granite/ui/components/coral/foundation/form/textfield (String)
fieldLabel => What is your email
name => ./youremail

Create a age node:
Right click on the items node: create node
Name: yourage
Type: nt:unstructured

Add properties here:-
jcr:primaryType => nt:unstructured
sling:resourceType => granite/ui/components/coral/foundation/form/textfield (String)
fieldLabel => What is your age
name => ./yourage

Create a contact no node:
Right click on the items node: create node
Name: yourcontactno
Type: nt:unstructured

Add properties here:-
jcr:primaryType => nt:unstructured
sling:resourceType => granite/ui/components/coral/foundation/form/textfield (String)
fieldLabel => What is your contact no
name => ./yourcontactno

Repeat same for rest all the required field. Then check it on the page and author accordingly.