(Or really any dialog for page properties!)

Creating a Page With CreatePageWizard

When a new page is created, it is done with the Create Page Wizard. This is handy to know if your project has never had a need to customize it. Just like a component, it uses a .content.xml file to structure the the properties. This is how it is able to be customized - the same way as a regular component! You can overlay or extend page prop tabs as well!

Basic Tab XML Structure

The code below is a simple example of a Blog Tab for your page component. These are displayed when you create a new page (wizard), or edit the page properties (page edit).

Explanation of what “Blog Tab” contains:

• Container with the Title “Blog Options” (tag tabBlogOptions). This is the tag label, and is the text that will display next to the other tabs. Do not mix it up with the root title, which is the dialog title.

• Multifield with the tag name authors. Multifield allows the author to create a list of items with multiple properties. This authors list has one property:

  <?xml version="1.0" encoding="UTF-8"?>
  <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
  	xmlns:jcr="http://www.jcp.org/jcr/1.0"
  	xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
  	xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
  	jcr:primaryType="nt:unstructured"
  	sling:resourceType="cq/gui/components/authoring/dialog"
  	jcr:title="Blog Tab">
  	<content jcr:primaryType="nt:unstructured"
  		granite:class="site-authoring__dialog-fixed-columns"
  		sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
  		<items jcr:primaryType="nt:unstructured">
  			<tabBlogOptions
  				jcr:primaryType="nt:unstructured"
  				jcr:title="Blog Options"
  				sling:resourceType="granite/ui/components/coral/foundation/container">
  				<items jcr:primaryType="nt:unstructured">
  					<authors
  						jcr:primaryType="nt:unstructured"
  						sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
  						fieldLabel="Authors">
  						<field
  							jcr:primaryType="nt:unstructured"
  							sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
  							name="./authors"
  							rootPath="/content/your_site" />
  					</authors>
  				</items>
  			</tabBlogOptions>
  		</items>
  	</content>
  

</jcr:root>

Nice and simple! Now, because we know we will be adding functionality to the Create Page Wizard, let’s move on to the next step.

Add the ClientLib with Granite Coral UI

Here is the small snippet of the code that needs to be included in the .content.xml file.

<customDialogClientlibs jcr:primaryType="nt:unstructured"
				sling:resourceType="granite/ui/components/coral/foundation/includeclientlibs"
				categories="[cq.authoring.dialog]">
			</customDialogClientlibs>

Result

Putting it together gives us:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
	xmlns:jcr="http://www.jcp.org/jcr/1.0"
	xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
	xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
	jcr:primaryType="nt:unstructured"
	sling:resourceType="cq/gui/components/authoring/dialog"
	jcr:title="Blog Tab">
	<content jcr:primaryType="nt:unstructured"
		granite:class="site-authoring__dialog-fixed-columns"
		sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
		<items jcr:primaryType="nt:unstructured">
					<customDialogClientlibs jcr:primaryType="nt:unstructured"
				sling:resourceType="granite/ui/components/coral/foundation/includeclientlibs"
				categories="[cq.authoring.dialog]">
			</customDialogClientlibs>
			<tabBlogOptions
				jcr:primaryType="nt:unstructured"
				jcr:title="Blog Options"
				sling:resourceType="granite/ui/components/coral/foundation/container">
				<items jcr:primaryType="nt:unstructured">
					<authors
						jcr:primaryType="nt:unstructured"
						sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
						fieldLabel="Authors">
						<field
							jcr:primaryType="nt:unstructured"
							sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
							name="./authors"
							rootPath="/content/your_site" />
					</authors>
				</items>
			</tabBlogOptions>
		</items>
	</content>
</jcr:root>

.. And now our multifields will properly work when creating a new page!

Ending Notes

The Create Page Wizard doesn’t load the same front-end code that the Page Editor does. That’s because the page doesn’t exist yet, so AEM hasn’t pulled in any of the page’s clientlibs or runtime scripts. Once the page is created and you’re in Page Edit mode, all of the page’s normal clientlibs load as usual.

Additional dialog clientlibs should only be included in Create Page Wizard if your page type requires extra form functionality before page creation. Otherwise authors can fill those out later in Page Properties, where all your component-level clientlibs are already available.