AEM CQ 561 - Working with Scaffolding

Goal

Generate pages with similar structure and varying content quickly. Scaffolding provides form like interface with fields to generate pages, with content entered into the scaffold. Check demo

Creating a Scaffold Page

1) Let's work on creating pages with a par, some static content in header, footer with text and image components in middle section. So the steps involved are

              a) Create a page from siteadmin or copy existing page
              b) Drag and drop necessary components onto the page par ie. text and image components
              c) Enter content for text by opening component dialog; drag image from content finder

The resulting page is like one below



2) If too many pages in your site have similar structure but only the text and image change, its generally useful to create Scaffolding to generate such pages. With Scaffolding we get rid of two steps - Create/Copy page by selecting templates from page dialog, Drag and drop components from sidekick; Depending on the number of components in page, page structure and number of look-alike pages to be generated scaffolding can save a lot of time

3) To create a scaffold, access Tools console http://localhost:4502/miscadmin and select Scaffolding in left tree; In the right pane select New, a dialog with single template Scaffolding Template appears. Enter title My Text Image. Click Create



4) Double click on My Text Image to open the scaffolding editor http://localhost:4502/cf#/etc/scaffolding/my-text-image.html. Click Sidekick -> Page tab -> Page properties and select the following

                       Target Template: The template used for page creation. In step 1 to create the page manually, we used a simple Basic Template.As we are generating pages of Basic Template select it
                       Target Path: The path where generated pages are stored



Here is the code for basic template page component jsp




5) After entering the details in page properties, a basic scaffold is created with Title to enter page title (stored as jcr:title) and Tags.




6) Every scaffolding has Dialog Editor to work on its form fields like Title above. Click on the Sidekick design mode (L shape at the bottom of sidekick) to access page having link for Dialog Editor. Click on the link to open Dialog Editor




   Dialog editor url http://localhost:4502/etc/scaffolding/my-text-image/_jcr_content/dialog.html



    Dialog in CRXDE Lite



7) Using the dialog editor we can add new properties for existing fields, but to add new fields a developer has to visit CRXDE

If a page is manually created, the following structure appears in CRX /content




With a Scaffold page we need to make sure the properties bordered above are created in CRX. So we add the necessary fields in Scaffold dialog. Access the created scaffold page in CRXDE http://localhost:4502/crx/de/index.jsp#/etc/scaffolding/my-text-image and add widget for Text field in the dialog - /etc/scaffolding/my-text-image/jcr:content/dialog/items/tab1/items/text ( you can copy an existing  richtext widget node available eg.  /etc/scaffolding/geometrixx/news/jcr:content/dialog/items/tab1/items/text)




The name of field is set to ./jcr:content/par/text/text. So any value entered for this field is stored in path /jcr:content/par/text/text relative to the newly created page

Similarly we need hidden fields for storing the value of sling:resourceType - foundation/components/text and textIsRich - true; so we create necessary hidden widgets



8) Similarly we need html5smartimage widget and hidden field for storing image specific values. As you can see the image specific values are stored under ./jcr:content/par/image relative to new page



The hidden field for storing Image Component resourceType




9) We have the scaffolding form now ready for creating pages http://localhost:4502/cf#/etc/scaffolding/my-text-image.html. Enter Title, Text, drag an Image from content finder, click Create and your page will be created (eg. http://localhost:4502/content/my-scaffolding-pages/ocean.html )



10) Here is the scaffolding page dialog xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="cq:Dialog"
    xtype="tabpanel">
<items jcr:primaryType="cq:WidgetCollection">
<tab1
            jcr:primaryType="cq:Panel"
            title="Properties">
<items jcr:primaryType="cq:WidgetCollection">
<title
                    jcr:primaryType="cq:Widget"
                    fieldLabel="Title"
                    name="./jcr:content/jcr:title"/>
<text
                    jcr:primaryType="cq:Widget"
                    fieldLabel="Text"
                    name="./jcr:content/par/text/text"
                    xtype="richtext">
<rtePlugins jcr:primaryType="nt:unstructured">
<table
                            jcr:primaryType="nt:unstructured"
                            features="*"/>
<format
                            jcr:primaryType="nt:unstructured"
                            features="*"/>
<lists
                            jcr:primaryType="nt:unstructured"
                            features="*"/>
<justify
                            jcr:primaryType="nt:unstructured"
                            features="*"/>
<edit
                            jcr:primaryType="nt:unstructured"
                            features="[paste-wordhtml]"/>
<findreplace
                            jcr:primaryType="nt:unstructured"
                            features="*"/>
<paraformat
                            jcr:primaryType="nt:unstructured"
                            features="*"/>
<subsuperscript
                            jcr:primaryType="nt:unstructured"
                            features="*"/>
<misctools
                            jcr:primaryType="nt:unstructured"
                            features="*"/>
<links
                            jcr:primaryType="nt:unstructured"
                            features="*"/>
<spellcheck
                            jcr:primaryType="nt:unstructured"
                            features="*"
                            invalidStyle="background-color: #ffdddd;"/>
<undo
                            jcr:primaryType="nt:unstructured"
                            features="*"/>
<image
                            jcr:primaryType="nt:unstructured"
                            features="*"/>
</rtePlugins>
</text>
<textResourceType
                    jcr:primaryType="cq:Widget"
                    ignoreData="{Boolean}true"
                    name="./jcr:content/par/text/sling:resourceType"
                    value="foundation/components/text"
                    xtype="hidden"/>
<richFlag
                    jcr:primaryType="cq:Widget"
                    ignoreData="{Boolean}true"
                    name="./jcr:content/par/text/textIsRich"
                    value="true"
                    xtype="hidden"/>
<image
                    jcr:primaryType="cq:Widget"
                    border="true"
                    cropParameter="./jcr:content/par/image/imageCrop"
                    ddGroups="[media]"
                    fieldLabel="Image"
                    fileNameParameter="./jcr:content/par/image/fileName"
                    fileReferenceParameter="./jcr:content/par/image/fileReference"
                    height="400"
                    hideLabel="false"
                    mapParameter="./jcr:content/par/image/imageMap"
                    name="./jcr:content/par/image/file"
                    requestSuffix="/jcr:content/par/image.img.png"
                    rotateParameter="./jcr:content/par/image/imageRotate"
                    sizeLimit="100"
                    xtype="html5smartimage"/>
<imageResourceType
                    jcr:primaryType="cq:Widget"
                    ignoreData="{Boolean}true"
                    name="./jcr:content/par/image/sling:resourceType"
                    value="foundation/components/image"
                    xtype="hidden"/>
</items>
</tab1>
<tab4
            jcr:primaryType="cq:Panel"
            title="Tags / Keywords">
<items jcr:primaryType="cq:WidgetCollection">
<tags
                    jcr:primaryType="cq:Widget"
                    name="./jcr:content/cq:tags"
                    xtype="tags"/>
</items>
</tab4>
</items>
</jcr:root>