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 lot of other stuff .To create a design go to miscadmin from site admin(click on the gear icon in the top tool bar). Under the design folder create 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 a design on the page follow these steps.

1. Open the page from site admin
2. click on the page properties link in the side kick to launch page properties dialog
3. click on the advanced tab
4. select the design you created form 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 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 node from the create menu
7. create a textfield under the design dialog(follow creating a component with dialog post if you don't no 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 side kick select design mode (ruler icon on the sidekicks bottom tool bar).
10. you will see a edit bar that says 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 templates 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 works.

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.

Related Items