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 - 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; 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 - Package Install
<?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>
