Category: Component
-
Create your first Sightly component (YouTube component !!!)
In this session, you will learn how to create an AEM component. You have learned that an AEM component is used to display an information in a certain way. You will use Sightly to create the component. We will call the component as YouTube component. When you drag and drop the component to a web page,…
-
Summary: Your first Sightly template
This post provides a summary of what you learnt in the previous posts. Before going to the next step, creating components, let us first take a quick recap of all that we learned so far. AEM users generally belong to one of the following roles: Authors: create web pages. They use templates which provides the layout…
-
Apply a design to the AEM Sightly template
In this session, you will learn about adding a design to the template. You will use Sightly, because it’s HTML5 and very easy to use. This is in continuation of my previous blog posts. As usual, I have provided the video and transcripts below. Video can be watched in the Full screen mode. The sample design and…
-
Enable components in the Components tab
In the last session, we have added a space in the template that allows us to drag and drop a component to the web page. One of the shortcomings in the template was that it didn’t have any components in the Components tab. In this session, we will add components to the Components tab. Open the…
-
Add the Parsys component to template
In this session, let us try to modify the template we created earlier. We will add a parsys component in the template to provide a space in the web page to drag and drop components. Let us once again see how a page created using this template looks like. Log into to SiteAdmin. (http://localhost:4502/siteadmin) Double-click…
-
Summary – Create templates and use packages
In this session, let us summarize what we learned in the previous session: Create the first template. We created a template in three steps: Step 1: Created the company folder inside apps. Created a folder for components and templates. Step 2: Created a template inside the templates folder. Provided allowed paths as /content(/.*)?. And, we provided resourseType…
-
AEM Sightly Brackets Extension
You can install this extension on Brackets if you plan to use Sightly as the markup. The extension provides you with features such as syntax highlighting and code completion. Brackets extension provides front-end developers an AEM templating tool with which they are familiar. The idea is to bring more front-end developers to AEM template designing.…
-
While creating templates for Touch-Optimized GUI
In AEM 6.0, most of the functionalities are accessible through Touch-Optimized UI. When you create a template using Sightly or JSP, before extending the page component, the Classic UI displays the content in a page created based on the template. Of course, the page is displayed without the sidekick and other functionalities. This behavior,…
-
Slightly, some Sightly
AEM 6.0 introduces Sightly – a new templating language. Sightly replaces JSP as the most preferred templating language for AEM. Sightly helps you to separate your design from your code. The intention is to bring more front-developers to AEM component development. By providing a demarcation between the design and the development departments, Adobe expects to…
-
Integrating Search&Promote with AEM
Search&Promote allows you to create an index of your site by crawling your site in a regular interval. It helps you to implement powerful search functionalities in your website. In AEM 5.6.1, there are some out-of-the-box Search&Promote components that make integration easy. Some of these components use hardcoded values that you may need to change…
Digital Plots 