How to configure a custom properties editor

Skills required	XML
Time required (minutes)	15
Intended audience	Developer
Difficulty	Easy
Category	Document

Objective

When it comes to fielded or form-oriented data, PageSeeder provides a mechanism that allows developers to configure a document type with special properties fragments. These fragments contain one or more <property> elements, which is how PSML represents fielded or forms data.

Configuring a custom property editor allows developers to provide their users with specific options when editing. This tutorial explains how to configure a property as a 'select' or 'checkbox', 'text', 'date' or 'xref' editor object.

Prerequisites

The developer must have administration rights on the server being used.

Before creating an editor-config.xml file, you need to create a document type with a properties fragment. See the tutorial: How to create a properties fragment.

Tutorial

Create the editor config

Go to the Template configuration page, click the Create link for your document type in the Editing column:

Template configuration page – Editing

If an editing configuration already exists for your document, the link is edit instead, but it opens the same panel.

It opens the code editor panel titled editor-config.xml

This creates /psml/movie_information/editor-config.xml file that contains the configuration for the editors. The editor config for a document type is located in /psml/[document-type]/editor-config.xml.

Edit the configuration

Insert the following code stub into the text field:

<editor-configs>
  <editor-config name="PSMLProperties">
    <!-- Your config goes here -->
  </editor-config>
</editor-configs>

Then, edit the details specific to your document type. For this example we use movie classifications/ratings. See How to create a properties fragment for additional information regarding how to structure the content.

<editor-configs>
  <editor-config name="PSMLProperties">
    <field name="classification" type="select" label="Classification">
      <value>CTC</value>
      <value>PG</value>
      <value>M</value>
      <value>MA15+</value>
      <value>R18+</value>
      <value>X18+</value>
    </field>
  </editor-config>
</editor-configs>

The editor configuration shown above treats the property listed below as a select list (type: "select").

<property name="classification" title="Classification "/>

Check

Example input code and output

checkbox

<editor-configs>
  <editor-config name="PSMLProperties">
    <field name="film_genre" type="checkbox" label="Film genre">
      <value>Action</value>
      <value>Adventure</value>
      <value>Biography</value>
      <value>Comedy</value>
      <value>Crime</value>
      <value>Documentary</value>
      <value>Drama</value>
      <value>Film Noir</value>
      <value>Horror</value>
      <value>Musical</value>
      <value>Mystery</value>
      <value>Romance</value>
      <value>Science fiction</value>
      <value>Thriller</value>
      <value>Western</value>
    </field>
  </editor-config>
</editor-configs>

The editor configuration shown above treats the property listed below as a checkbox list (type: "checkbox").

Through the document template this is be displayed in the PageSeeder edit view as the following:

date

<editor-configs>
  <editor-config name="PSMLProperties">
    <field name="opening_date" type="date" label="Opening date"/>
  </editor-config>
</editor-configs>

The editor configuration shown above treats the property listed below as a date type (type: "date").

Through the document template this is displayed in the PageSeeder edit view as the following:

select

see above

text

<editor-configs>
  <editor-config name="PSMLProperties">
    <field name="directed_by" type="text" label="Directed by"/>
  </editor-config>
</editor-configs>

The editor configuration shown above treats the property listed below as a text field (type: "text").

Through the document template, this is displayed in the PageSeeder edit view as the following:

Xref

<editor-configs>
  <editor-config name="PSMLProperties">
    <field
      name="related_films"
      type="xref"
      label="Related films"
      placeholder="Lookup XRef"/>
</editor-configs>

The editor configuration shown above treats the following property as an xref type (type: "xref").