Configure a virtual page template

A virtual page template is a template, that associates an HTML page with the data of a node of a particular base or primary node type and its relationships. Once a virtual page template has been created and published at /jcr:system/nodes/templateInstances you will get a virtual HTML page, whenever you access a node of the given node type.

To specify a new virtual page template, you must do the following steps

1. Create a new, empty virtual page.
2. Edit the page like a HTML page.
3. Associate HTML elements with node type properties.
4. If you have introduced additional new node types, you must describe a relationship between the primary node type and the new node types. In addition, you may specify any named queries associated to elements.

Create a new virtual page template

You create a virtual page template as described in the Create virtual page template use case. This includes the selection of the node type, for which the template will be made.

Edit the HTML

Then you can edit the template as described in the Use the HTML view use case, i.e. like an HTML page. This page is an example of the virtual pages, that will be created.

Associate HTML element with node type

Next you associate elements of the page with properties of the node type or its descendant nodes and properties. For this, you use the context menu of the HTML element structure view of the explorer window. In the virtual page template editor, this view will be preselected.

The context menu includes

• Map to extended node type. An explorer tree pops up and you can select a property of the node type that is the node type root of this HTML element or a one of its descendant nodes or properties. At the start, the node type selected for the virtual page during creation will be the only node type root, located at a DIV element below the BODY element.
• Map to a new node type. This time, the control lets you select a node type from the node types configured in the repository, e.g. by means of use case Create a new node type. When you do this, you create a new node type root for the element and the branch below the element.
• Remove mapping. This deletes the association made before. You use this to correct an earlier association.
• Associate a named query. If you have already mapped a data element to the element, this will let you add a named query to the element. When editing the page at runtime, this will execute the query and let you select one of the results of the query for this element.
• Mark uneditable. If you have already mapped a data element to the element, this will make the element uneditable, i.e. the editor will not try to prompt the user for this element.
• Mark editable. This will reverse this operation, i.e. make an element editable again, that has been made uneditable before.
• Map element to component page. This will appear only, if the element has been mapped to a node type before and the node type supports a component editor, please compare Use the HTML view. Similar to the component editing for HTML pages, this will allow to edit the component page directly in the virtual page.
• Create branch element. Before using this, you select multiple consecutive elements. Then, this menu action will create a DIV element as the parent of the selected elements.

  This can be handy, if you want all the elements (e.g. a heading and the subsequent paragraph) appear only in case a certain node or node property is present. In this case, you can associate the newly created DIV element to the appropriate node or property.

• Add style. This allow to add CSS style sheet documents to the template, gibing the template a specific look and feel different from other parts of the application.

If you want to add a hyperlink or an image, that shall be associated to an element, please refer to the Insert hyperlink and Insert image use cases.

Specify node queries

For each named query and for each newly created node type root you need to specify a query. To do that, use the view menu item Data binding.

Named query

A named query can be connected to an element mapped to a node property. The query should specify only a single result column. When using the template to edit data of a node, the editor will execute the named query and let the user select one of its results for the property value.

To edit a named query, select the query in the table and press Edit. The Structured search control will appear, please compare the Structured search action for details.

Secondary query

For each new node type root created using Map to new node type before, you must instruct the system about the relation to the primary node. This is called a secondary query.

There are two possible relationships:

• A reference property of the external node type refers to the current node, i.e. its property jcr:uuid.
• In reverse, a property of the current node will refer to the external node, i.e. its property jcr:uuid.

In addition, you must specify the path where the external nodes can be found. This path will be used to create new external nodes as well, if you did not specify Select attribute for a hyperlink to the secondary query node type root.

These settings can be specified in the data binding editor:

Pushing the New or Existing button will show an Explorer dialog control to select the path. Invoking -> this or this -> will show the properties of the primary node type (when the primary node references the secondary node, use this ->) or the external node type (when the secondary node references the primary node, use ->this).

XSL Stylesheet view

The editor will create an XSL stylesheet from the information entered, which will be used by the application to generate the virtual page. If you are familiar with XSL stylesheets, you can see the stylesheet by selecting XSL Stylesheet from the View menu.