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 dialog appears. You can enter certain information, such as Title, Link, and so on. Just to demo, let me change the title to my name, Sunil, and see. You could see that the title of the page is changed.

The dialog you just saw is a touch-optimized dialog – it means this dialog is optimized to view in various devices, such as phones and tablets. AEM used to have a different dialog. Let us see it. Go to the Classic view. Double-click the title page. I hope you noticed the difference. This dialog is used in Desktops. Most of your users may want to use touch-optimized dialogs that enable them to work on hand-held devices. And of course, that’s the future.

I will first introduce you to the latter – the dialog that’s not touch-optimized – the Classic dialog. We will see how to create a dialog for the YouTube component. We have seen the component adds a YouTube video to the page. The author wants to change the URL of the YouTube video. So, the requirement is to provide them with a dialog that allows them to enter a URL.

Delete the dialog that you created earlier. Let us copy a dialog from an existing component. Then, we will refine it based on our requirements. This is always a good strategy because we are starting with something tried and tested. We can use the dialog of a component named, title.

• Delete the dialog you already created.
• Copy the dialog from /libs/wcm/foundation/components/title/dialog.
• Paste dialog underneath youtube.
• Remove /youtube/dialog/items/title/type.
• Select the title and update it.
• Field Label: YouTube URL
• Field Description: Enter the YouTube URL.
• (This is an instruction for authors.)
• Don’t change the name.
• xtype defines what exactly the field is. It’s a text field.

Now let us see how the dialog appears on the web page.

• Open the web page.
• Double-click.
• See that the dialog appears.

Let us wind up the session here. Remember, we need to add the logic to capture the URL entered here to update the web page. We will see how to accomplish that in the next session.

See you all soon!!