---
title: "How to configure a custom properties editor"
source: https://dev.pageseeder.com/get_started/tutorials/how_to_configure_a_custom_properties_editor.html
last_updated: 2026-09-05T17:35:22+10:00
tokens: ~1940
---

# How to configure a custom properties editor

| Property | Value |
| --- | --- |
| 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](../../guide/configuration/psml.md) with special [properties fragments](../../psml/elements/element_properties-fragment.md). These fragments contain one or more `<property>` elements, which is how [PSML](../../psml/elements.md) 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](how_to_create_a_properties_fragment.md).

## 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](/content/get_started/tutorials/../../images/tutorials/template_config_editing_v60000.webp)

> **Note:** 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**

> **Tip:** 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:

```xml
<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](how_to_create_a_properties_fragment.md) for additional information regarding how to structure the content.

```xml
<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"`).

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

### Check

![select-test.PNG](/content/get_started/tutorials/../../images/tutorials/4._how_to_configure_a_custom_properties_editor_using_select_files/select-test.webp)

## Example input code and output

### checkbox

```xml
<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"`).

![property-checkbox.PNG](/content/get_started/tutorials/../../images/tutorials/4._how_to_configure_a_custom_properties_editor_using_select_files/property-checkbox.webp)

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

![checkbox-test.PNG](/content/get_started/tutorials/../../images/tutorials/5._how_to_configure_a_custom_properties_editor_using_checkbo_files/checkbox-test.webp)

### date

```xml
<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"`).

![property-date.PNG](/content/get_started/tutorials/../../images/tutorials/4._how_to_configure_a_custom_properties_editor_using_select_files/property-date.webp)

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

![date-test.PNG](/content/get_started/tutorials/../../images/tutorials/6._how_to_configure_a_customer_properties_editor_using_date_files/date-test.webp)

### select

[see above](how_to_configure_a_custom_properties_editor.md)

### text

```xml
<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"`).

![property-text.PNG](/content/get_started/tutorials/../../images/tutorials/4._how_to_configure_a_custom_properties_editor_using_select_files/property-text.webp)

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

![text-test.PNG](/content/get_started/tutorials/../../images/tutorials/4._how_to_configure_a_custom_properties_editor_using_select_files/text-test.webp)

### Xref

```xml
<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"`).

![property-xref.PNG](/content/get_started/tutorials/../../images/tutorials/4._how_to_configure_a_custom_properties_editor_using_select_files/property-xref.webp)

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

![xref-test.PNG](/content/get_started/tutorials/../../images/tutorials/4._how_to_configure_a_custom_properties_editor_using_select_files/xref-test.webp)

### all types together

```xml
<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](/content/get_started/tutorials/../../images/tutorials/4._how_to_configure_a_custom_properties_editor_using_select_files/alltypes-test.webp)