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.json 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.json 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/template/[project]/psml/[document-type]/editor-config.json"

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:

{
  "PSMLPropertiesConfig": {
    // Your config goes here
  }
}

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.

{
    "PSMLPropertiesConfig": {
        "fields": {
            "classification": {
                "type": "select",
                "label": "Classification",
                "values": [
                    "CTC",
                    "G",
                    "PG",
                    "M",
                    "MA15+",
                    "R18+",
                    "X18+"                    
                ]
            }
        }
    }
}

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

{
    "PSMLPropertiesConfig": {
        "fields": {
            "film_genre": {
                "type": "checkbox",
                "label": "Film genre",
                "values": [
                    "Action",
                    "Adventure",
                    "Biography",
                    "Comedy",
                    "Crime",
                    "Documentary",
                    "Drama",
                    "Film Noir",
                    "Horror",
                    "Musical",
                    "Mystery",
                    "Romance",
                    "Science fiction",
                    "Thriller",
                    "Western"
                 ]
            }
        }
    }
}

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

{
  "PSMLPropertiesConfig": {
    "fields": {
      "opening_date" : {
        "type": "date",
        "label": "Opening date"
      }
    }
  }
}

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

{ 
  "PSMLPropertiesConfig": {
    "fields": {
      "directed_by" : {
      "type": "text",
      "label": "Directed by"    
      }
    }
  }
}

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

{
  "PSMLPropertiesConfig": {
    "fields": {
      "related_films": {
        "type": "xref",
        "label": "Related films",
        "placeholder": "Lookup XRef"
      }
    }
  }
}

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

{ 
  "PSMLPropertiesConfig": {
    "fields": {
      "directed_by" : {
        "type": "text",
        "label": "Directed by"
      },
      "film_genre" : {
        "type": "checkbox",
        "label": "Film genre",
        "values": ["Action", "Adventure", "Biography", "Comedy", "Crime",
                  "Documentary", "Drama", "Film Noir", "Horror", "Musical",
                  "Mystery", "Romance", "Science fiction", "Thriller", 
                  "Western"]
      },
      "classification" : {
        "type": "select",
        "label": "Classification",
        "values": ["CTC", "PG", "M", "MA15+", "R18+", "X18+"]
      },
      "opening_date" : {
        "type": "date",
        "label": "Opening date"
      },
      "related_films": {
        "type": "xref",
        "label": "Related films",
        "placeholder": "Lookup XRef"
      }
    }
  }
}

alltypes-test.PNG

Created on , last edited on