Sample components Creation in AEM 6.4

Steps to create a simple component in AEM 6.4 .

Under /apps, create a project folder(I have create 'myproj'), under which create a /components folder.

Under components, create folders /content and /structure as shown below.

Below shown the component structure in AEM 6.4.

[Click on any image to see it big & clear]

[Component structure in AEM 6.4]

Under structure create a node called 'header'., rename the header.jsp to header.html.

Add property 'componentGroup' : myGroup for the header node.

Copy pasted below html content in 'header.html'

    <div>    
        <li>         
            <p>This is a sample component</p>
            <h3>Header</h3>
            <p>This is a sample text in body pf component</p>           
        </li>
      </ul>
    </div>

Under header node, create a 'dialog' [primary type : cqDialog; xtype dialog]
Under dialog node, we will have 'items' [primary type: cq:Widget; xtype:tabPanel]
Under items, we will have 'items' node [primary type: cqWidegtCollection]
Under items, we will have  'tab1' node[primary type :cq:Panel; title: Tab 1]

The component is ready now.

Author this component on a page:
Since this is a new component, we need to make this component available for our template.
Add this component to our template created earlier by following below steps.

We had placed the component under 'myGroup'.
Now go to template policy section and modify the property to add the component as part of this template. Procedure is shown in below image.

[AEM 6.4 add policy]

Now as you see the new component is available for our template for authoring.

[New component]

Author the component on template and create a new page, so that the newly created component is visible now.

[New component authored n AEM 6.4.png]

Now activate the page (which includes template, component activation), so that the page will be visible in publish environment.

AEM 6.4 Tutorials Video Series