Structured Data Definitions
Now, you want to create a structured data definition. A data definition is a way to capture forms-based input into the system and have it outputted as transformable XML. You are going to create a simple data definition with fields for company contact information and write the corresponding XSL to transform it into HTML. There are five steps in creating and implementing a data definition:
- Use the visual data definition builder (/common/data definition builder/), or write a data definition by hand in XML.
- Assign the data definition to the page via the page system settings.
- Edit the page, and fill in the form capture fields from the data definition.
- View the XML outputted from the data definition, and write a corresponding XSL stylesheet to transform it to the desired output.
- Apply the stylesheet to the page’s DEFAULT region to transform the content (do not supply a block for the DEFAULT region because the data definition XML is automatically placed there).
A. Create a Data Definition
- Go to the Administration area, and select Data Definitions in the left navigation bar.
- Click the New Data Definition button.
- For the Name field, type in contact.
- For the XML field, type in the following XML:
<system-data-structure>
<text identifier="paragraph" multiple="true" label="Paragraph" required="true" multi-line="true" />
<text identifier="company" label="Company" required="true" />
<text identifier="phone" label="Phone" required="true" />
<text identifier="fax" label="Fax" required="true" />
<text identifier="email" label="Email" required="true" />
</system-data-structure> - Each text element represents an input field. The identifier attribute is the name of the resulting XML element produced with the captured data. The label attribute is the value that appears on the screen for the form field. The required attribute makes the user fill that field in before submitting content.
- Now click Submit to save the new data definition.
When you have the chance, please browse through the existing data definitions that came with the software in order to see some of the advanced functionality available.
B. Attach a Data Definition
With the new contact data definition ready, you want to copy an existing page and attach it, replacing the word processor. In addition, please try out the visual data definition builder found in the /common/data definition builder/ folder under the main asset area of the system (the Home area).
To copy a page and attach a data definition:
- Go back to the Home area.
- Browse to the page you would like to copy. We will select our example page created earlier /web/example.
- Click the Copy tab.
- In the System Name field, type contact-us.
- Click Submit to copy the page.
- Go to the Edit tab.
- Click on the System pane in order to show the page settings.
- Click the browse icon located to the right of Data Definition.
- Select the contact data definition and click Confirm.
- Check the box that says Use data definition (boxes that are already checked, should remain checked
- Click Submit to save the page changes.
- The page will reload and the main default region will be empty. Click the Edit tab.
- Instead of the word processor, you now have the data definition form (labeled contact). For the Paragraph field, type in My first paragraph.
- For the Company field, type My company.
- For the Phone field, type 123-123-1234.
- For the Fax field, type 123-123-1235.
- For the Email field, type me@mycompany.com.
- Click the Submit button to save the changes. The page will reload and the information that you entered in the data definition form will appear in the main default region.
- In order to add a new paragraph, click on the Edit tab in order to return to the data definition form. Click the single plus ‘+’ sign above the Paragraph field to add a new paragraph.
- For the lower empty Paragraph field, type My second paragraph.
- Click the Submit button to save the changes.
The page will reload and all of the values just entered will run together. You need to attach presentation logic to the XML representing the data collected in the data definition. First, you want to look at the resulting XML document created from the output of the data definition. View the HTML source of the resulting page (by right-clicking on the page, selecting This Frame and then View Frame Source), and look for the tag <system-data-structure>. The XML snippet ends with </system-data-structure>. The elements, in between the open and close system-data-structure tag, correspond to the identifier put in the data definition and the value filled in the form when editing the page. You can copy this XML snippet into your favorite XML/XSL IDE and write a corresponding XSLT to make it into HTML with the desired formatting and CSS classes.
C. Create a Stylesheet
You want to go ahead and write a simple XSL to transform this XML into HTML.
- Browse to your existing stylesheets folder, or create a new folder. We don’t have a folder, so we will create /web/stylesheets.
- Once in the desired folder, click on New -> Default -> Stylesheet in the top navigation menu to create the new stylesheet.
- For the XML field, put in the following:
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" />
<xsl:template match="/system-data-structure">
<div><!-- We always need a root tag for transforms -->
<xsl:for-each select="paragraph">
<p><xsl:value-of select="." /></p>
</xsl:for-each>
<p>
<strong><xsl:value-of select="company" /></strong><br/>
Phone: <xsl:value-of select="phone" /><br />
Fax: <xsl:value-of select="fax" /><br />
Email: <a>
<xsl:attribute name="href">mailto:<xsl:value-of select="email" /></xsl:attribute>
<xsl:value-of select="email" />
</a>
</p>
</div>
</xsl:template>
</xsl:stylesheet>
The XSL matches the root XML element, <system-data-structure>, and then loops over all of the paragraph elements, outputting their values. The company element is then outputted in bold, followed by the phone and fax elements. Finally, the email element is turned into a mailto link and outputted. If you like, copy this XSL into your favorite XML editor, and make sure it is well formed and proper. You can even run the transformation against the XML from the view source above in a typical XML/XSL IDE. - Now go into the System pane, and type in contact-us for the Name field. It is generally a good practice to name the stylesheet the same name as the data definition to which it is transforming the resultant XML content.
- Click Submit to save the new stylesheet.
We now have our XSL ready to be applied to the XML produced from the data definition content.
D. Apply a Stylesheet to a Data Definition
To apply a stylesheet to a page data definition:
- Browse to the desired page that uses a data definition. We will use the page that was just created: /web/contact-us.
- Click the Edit tab, and select the Configurations pane to display the available configurations.
- The default configuration, HTML, will be shown. Click the browse icon located next to Stylesheet in the DEFAULT region row.
- Select the stylesheet you just created, and click Confirm in the browse icon window. We will select /web/stylesheets/contact-us.
- Click the Submit button to record the change.
You will now see the same page as before, except the XML data from the data definition has been transformed into standard HTML and outputted in the default region. You will see the formatting, which includes spacing, bold, and the hyperlinked email address. Try changing the stylesheet just created to see different outputs on the page. A good tip when you are working on a stylesheet in the system and you want to see the changes on the page is to move your mouse over to the icon denoting the page region, and click on the icon. Then click on the Edit tab under the stylesheet listing, or click on the pencil icon located to the left of the stylesheet listing, which is labeled web/stylesheets/contact-us. After saving the changes in the stylesheet, in the top navigation menu, click on History and then click on the corresponding page to quickly jump back to it.
Thanks for going through Part 2 of the Technical Introduction. Part 3 is available online:- Learn how to set up PDF, Printer Friendly, and XML configurations, create and associate workflows, and display recent press releases.