Sometimes you may need to create a large set of pages that share structure but have differing content. Through the standard Adobe Experience Manager (AEM) interface, you would need to create each page, drag the appropriate components onto the page, and fill each of them in individually.
With scaffolding, you can create a form (a scaffold) with fields that reflect the structure you want for your pages and then use this form to easily create pages based on this structure.
Scaffolding (in the classic UI) respects MSM inheritance.
Scaffolds are stored in the Tools console of the site admin.
The scaffold consists of a form with a field for each piece of content that will make up the page to be created and four important parameters which are accessed through the Page Properties of the scaffold page.
The scaffolding page properties are:
The body of the scaffold is the form. When a user wishes to create a page using the scaffold he fills out the form and clicks Create, at the bottom. In the News example above the form has the following fields:
To create a scaffold, go to the Tools console, then Default Page Scaffolding and create a page. A single page template type is available, the Scaffolding Template.
Go to the Page Properties of the new page and set the Title Text, Description, Target Template, and Target Path, as described above.
Next, you have to define the structure of the page that this scaffold will create. To do this, go into design mode on the scaffold page. A link appears, letting you edit the scaffold in the dialog editor.
Using the dialog editor, you specify the properties that will be created each time a new page is created using this scaffold.
The dialog definition for a scaffold works similarly to that of a component (see Components). However a few important differences apply:
sling:resourceType
property of the paragraph is filled in automatically when the paragraph is created. With a scaffold all the information defining both the content and the assigned component for a given paragraph must be provided by the dialog itself. In scaffold dialogs this information must be provided by using Hidden fields to submit this information on page creation.A look at the example News scaffold dialog in the dialog editor helps to explain how this works. Go into design mode on the scaffold page and click the dialog editor link.
Now, click the dialog field Dialog > Tab Panel > Text > Text, like this:
The property list for this field appears on the right side of the dialog editor, like this:
Notice the name property for this field. It has the value
./jcr:content/par/text/text
This is the name of the property to which the content of this field will be written when the scaffold is used to create a page. The property is stated as a relative path from the node representing the page to be created. It specifies the property text, below the node text, which is below the node par, which is itself a child of the jcr:content node below the page node.
This defines the location of the content storage for the text that will be inputted into this field. However, we also need to specify two more characteristics for this content:
In a normal component dialog you would not have to specify this information because it is implicit in the fact that the dialog is already bound to a specific component.
To specify these two pieces of information, you use hidden fields. Click the first hidden field Dialog > Tab Panel > Text > Hidden, like this:
The properties of this hidden field are as follows:
The name property of this hidden field is
./jcr:content/par/text/textIsRich
This is a boolean property used to interpret the text string stored at ./jcr:content/par/text/text
.
Because we know that the text should be interpreted as a rich text, let’s specify the value
property of this field as true
.
The dialog editor allows the user to change the values of existing properties in the dialog definition. To add a new property, the user must use CRXDE Lite. For example, when a new hidden field is added to a dialog definition with the dialog editor it does not have a value property (that is, a property with the name “value”). If the hidden field in question requires a default value property to be set, then this property must be added manually with one of the CRX tools. The value cannot be added with the dialog editor itself. However, once the property is present, its value can be edited with the dialog editor.
The second hidden field can be seen by clicking it like this:
The properties of this hidden field are as follows:
The name property of this hidden field is
./jcr:content/par/text/sling:resourceType
And the fixed value specified for this property is
foundation/components/textimage
This specifies that component to be used to render the text content of this paragraph is the Text Image component. Using with the isRichText
boolean specified in the other hidden field, the component can render the actual text string stored at ./jcr:content/par/text/text
in the desired way.
In the classic UI, scaffolding is fully integrated with MSM inheritance (when applicable).
When you open a page in Scaffolding mode (using the icon at the bottom of sidekick) any components that are subject to inheritance will be indicated by:
These show that the component cannot be edited - until inheritance is canceled.
This is comparable to inherited components when editing page content.
Clicking either the lock symbol or the image icon lets you break inheritance:
After unlocking, you can restore inheritance by clicking the unlocked padlock symbol - this will lose any edits you have made.
If the inheritance is canceled at the page level (from the Livecopy tab of Page Properties), then all components are editable in Scaffolding mode (they are shown in an unlocked state).