-
Learn about Edit Config nodes
We have learned about dialogs and design dialogs. In this post, I want to familiarize you with another node, called editConfig. Let us take a look at the image component. Drag and drop an image component to the page. Drag and drop an image to the component. The action you performed is drag and drop. To…
-
Create a design dialog (for the YouTube component)
In this session, I will introduce you to design dialogs. Use YouTubeComponent-1.0.5.zip from my GitHub account. We have seen the dialogs associated with components. They can be Touch-Optimized dialogs or Classic dialogs. Let us quickly take a look at the page we created. You can see three instances of the same YouTube component. We have entered…
-
Add a touch-optimized dialog (for the YouTube component)
In this short session, you will learn how to add a touch-optimized dialog for the YouTube component. As I mentioned earlier, a touch-optimized GUI is designed for using in hand-held devices, such as iPad, tablets, and so on. (I have uploaded the package in GitHub. You should use: YouTubeComponent-1.0.3.zip) Double-click the component that we developed. The…
-
Get data from a dialog using Sightly (Get a custom URL for the YouTube component)
In this session, you will see how to update the YouTube component to capture the URL entered by an author in the dialog. (I have uploaded the sample code in GitHub.) We have accomplished the following so far. Created a YouTube component that will add a specific YouTube video to the page. Created a dialog…
-
Create Adobe Experience Manager dialogs (Add a dialog to the YouTube component)
In this short session, we will see how to create AEM dialogs. This is primarily an overview session about AEM dialogs. I have shared the package in GitHub. AEM dialogs are used to enter information to a component. For example, if you open a page that I showed here and double-click the Title element, a…
-
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…