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 three different URLs in the dialogs and each of them displays a unique video. Means, whatever you enter for a component’s dialog is specific to that instance of the component. This value is not preserved when you use the same component in the web page again.

In certain situations, you may want to use the same value across all the instances of the component. A classic example would be the company icon of your website. You don’t want it to get changed in all the instances. Wherever you use it, the icon is the same. Let us build something similar to it in our YouTube component. Assume that you want to add a copyright information, which is going to be the same in all instance of the component. You would have guessed it, you need to use design dialogs.

Let us start.

Go to the aem-company folder in CRXDE Lite.
Select youtube.
Copy dialog and paste it at the same place.
It gets pasted as copy of dialog.
Now rename it as design_dialog.
Expand and select the title node, and rename as copyright.
Similarly, change the name value to copyright.
To access this dialog, go to the web page.
Go to the Classic mode.
Select Design and select Edit.
Now, enter the copyright information: Copyrighted by AEM Company
Click OK. Nothing happens as expected, because we have not written the logic to capture the data entered and display it on the page. Before we do that, let us first see, where this data is written. We have seen that for dialogs, the data is written within the dialog node itself.

Go to /etc/designs/aem-company/jcr:content/homepage/content/youtube.
Note that the data from design_dialog is written inside the /etc/designs/aem-company. That’s,it can have only one value.
Open the url.js.
Update the code as follows. (I have commented out the update – we had a discussion on the same code earlier. I am not going to do it again.)
use(function() {
var CONST = {
PROP_TITLE: "jcr:title",
PROP_COPYRIGHT: "jcr:copyright"
}
var url = {};
url.text = granite.resource.properties[CONST.PROP_TITLE]
//Capture value from design_dialog
url.copyright = currentStyle.get(CONST.PROP_COPYRIGHT, "");
if (url.text == null) {
url.text = "https://www.youtube.com/embed/dI1yi2mmNuo";
}
// Adding the constants to the exposed API
url.CONST = CONST;
return url;
});
Open youtube.html and update.

<div data-sly-use.url="url.js" style="overflow: hidden;">
<iframe width="600" height="510" src="${url.text}" frameborder="0" allowfullscreen></iframe>
<h3>${url.copyright}</h3>
</div>

Refresh the page.
Note that all videos have been updated with the copyright information.

That’s it. Here is the summary: Design_dialog is used to capture information that should be unique across components. It’s stored in /etc/designs/.