Posts tagged "components"

Setting default values on CQ components

Components are self-contained portions of code within CQ. While not necessarily visual or part of the user interface, oftentimes they are. Within the CQ framework components can be dragged from the SideKick and placed within a page layout.

Within the CQ page editor, a component can have a dialog to configure values for the component instance that is on the page. Documentation exists that describes how to create a component for use within CQ. It is not necessary for the page author to open the component editor and edit all of the values each time a component is used. Properties can be defined with a default value which is applied automatically.

Prerequisites

To create a default value on a component, knowledge of how to create and edit components within CRXDE or CRXDE Lite is necessary.

Setting a default value on a CQ component

Go to the widget within the component’s dialog that is used to set the property on the component and add a property to the widget itself: defaultValue. If it is possible to select multiple values the defaultValue property should be an array.

Example

In this example I will have a simple viewer component that has a single configurable property: alignProp. Alignment may either be a Left or Right. By default, the value should be Left.

Within the /apps/dekesmith/examples/components/ directory I created a new component node called simple-viewer:

{
    " jcr:title":"Simple Viewer",
     "allowedParents":["*/*parsys"],
     "sling:resourceSuperType":"foundation/components/parbase",
     "componentGroup":"Media",
     "jcr:primaryType":"cq:Component",
     "dialog":{
          "jcr:primaryType":"cq:Dialog",
          "items":{
               "jcr:primaryType":"cq:WidgetCollection"
               "items":{
                    "jcr:primaryType":"cq:WidgetCollection",
                    "tab1":{
                        "jcr:primaryType":"cq:Panel",
                        "title":"tab1",
                        "items":{
                            "jcr:primaryType":"cq:WidgetCollection",
                            "alignment":{
                                  "jcr:primaryType":"cq:Widget",
                                  "fieldLabel":"Alignment",
                                  "type":"select",
                                  "xtype":"selection",
                                  "defaultValue:","Left",
                                  "name":"alignProp",
                                  "options":{
                                       "jcr:primaryType":"cq:WidgetCollection",
                                       "Left":{
                                            "jcr:primaryType":"nt:unstructured",
                                            "value":"Left",
                                            "text":"Align Left"    
                                       },
                                       "Right":{
                                            "jcr:primaryType":"nt:unstructured",
                                            "value":"Right",
                                            "text":"Align Right"
                                       }
                                  }
                            }
                        }               
                    } 
                }
          }
     }
}
 

This component has an edit dialog for setting properties of the component within the CQ site editor. The edit dialog has a single tab with a single selection menu, alignment, that sets a property for the component, alignProp. The alignment menu has two choices, Right and Left. The default value should for the property should be added on the widget that sets that property. To give the alignProp property a default of Left I added a defaultValue to the selection widget, alignment.