Creating a component with design dialog

Design dialogs are a very useful feature of cq5. It allows you to store configurations that can be accessed across pages. To be more specific the data is stored at a common place for each template. Changes through a design dialog will get reflected across all pages created using the same template.

A design can be used to store CSS and a lot of other stuff. To create a design go to miscadmin from site admin(click on the gear icon in the top toolbar). Under the design, the folder creates a new page out of the design template (like u create a normal page). That is all it takes to create a design. To assign your site design on the page follow these steps.

1. Open the page from the site admin
2. click on the page properties link in the sidekick to launch page properties dialog
3. click on the advanced tab
4. select the design you created from the dropdown
This design will get assigned to all the child pages as well

To create a component with design dialog follow these steps
1. Head to components folder of your project under /apps.
2. Right-click and select create a component from the create menu.
3. Enter label, title, component group, and click on next till you get ok option and hit ok.
4. Right-click on the component and select create dialog option from the create menu.
5. Enter the label as design_dialog(this cannot be different) and title of your choice and hit ok.
6. Go to tab1 node under the design dialog node and select create a node from the create menu
7. create a textfield under the design dialog(follow creating a component with dialog post if you don't know how)
8. Now drag and drop your component into your page (check out previous posts if you don't know how).
9. Now on your page's sidekick select design mode (ruler icon on the sidekicks bottom toolbar).
10. you will see an edit bar that says the design of <your components name>
11. type some text and click ok
 

The design dialog is ready. Head to /etc/designs and look for under your design's jcr:content node. A node will be created with the page template's name. Under the template node, a node for your component would have been created with the text you entered in the dialog stored as a property. Any changes you make in the component across pages of the same template will get reflected here. This how the allowed components of a parsys work.

To fetch the stored data use currentStyle.get("<name of the text field>",String.class). ${currentStyle.nameOfTextField} in JSTL (global.jsp) must be included on your component to use the implicit currentStyle object.