Tutorials

Task-driven tutorials and recipes for PageSeeder

How to configure a custom properties editor

Skills requiredXML
Time required (minutes)15
Intended audienceDeveloper
DifficultyEasy
CategoryDocument

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 will need to create a document type with a properties fragment. See the tutorial: How to create a properties fragment.

Create the editor config

Go to the Document config page located under the Dev tab in the Developer perspective.

tutorial-doc-config.PNG

Click on the create file icon (5.PNG) next to the editor-config.xml file. If the file has been edited previously it will have a pencil icon next to it. Clicking on this will also allow you to modify the editor.

The new file will be named in the following format:

"/WEB-INF/config/template/[project]/psml/[document-type]/editor-config.xml"

In the example screen below, the project name is 'movie_database' and the document type is 'movie_select' but you can use 'movie_information' created in the previous tutorial above.

10.PNG

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 will 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 will treat the property listed below as a select list  (type: "select").

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

Output

select-test.PNG

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 will treat the property listed below as a checkbox list  (type: "checkbox").

property-checkbox.PNG

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

checkbox-test.PNG

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 will treat the property listed below as a date type  (type: "date").

property-date.PNG

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

date-test.PNG

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 will treat the property listed below as a text field  (type: "text").

property-text.PNG

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

text-test.PNG

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 will treat the property listed below as an XRef type  (type: "xref").

property-xref.PNG

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

xref-test.PNG

all types together

<editor-configs>
  <editor-config name="PSMLProperties">
    <field name="directed_by" type="text" label="Directed by"/>
    <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>
    <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>
    <field name="opening_date" type="date" label="Opening date"/>
    <field name="related_films" type="xref" label="Related films" placeholder="Lookup XRef"/>
  </editor-config>
</editor-configs>

alltypes-test.PNG

Created on , last edited on