You can enable in-place editing for an existing XWiki application, if you're using the Vertical Form layout, by editing the application sheet (the page used to display the application entries) and operating 2 changes:

  1. Load the JavaScript code required for in-place editing and define some variables:
    #set ($discard = $xwiki.jsfx.use('uicomponents/edit/editableProperty.js', {
      'forceSkinAction': true,
      'language': $xcontext.locale
    #set ($object = $doc.getObject('Path.To.YourClass'))
    #set ($editing = $xcontext.action == 'edit')
  2. Add some meta data to the definition term (dt) elements that wrap the field names:
    <dt #if (!$editing && $hasEdit)

The result should look like this:


Example usage:


In-place editing also supports creating objects. For this, the attribute data-object-policy="updateOrCreate" needs to be added to the <dt>-element. A use case for this is adding an additional property to the information tab below the content that is stored in an object of the document which doesn't exist on all documents.

For displaying the initial property value in the <dd>-element you can create the object and its property using the #createObjectAndPropertyIfMissing-macro. It supports an object reference in the form Some.Class[number].someProperty where the [number]-part is optional and denotes the number of the object to edit. Note that this modifies the (copy) of the document in the current context which might not be desirable. As an alternative you can check if the object exists and if not just manually display the default value of the property. An example for this can be seen in the activation UI of the Numbered Headings Application.


Get Connected