Wiki source code of In-place edit for object properties
Version 1.2 by Vincent Massol on 2022/01/25
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | You can enable in-place editing for an existing XWiki application, if you're using the [[Vertical Form>>Documentation.DevGuide.FrontendResources.VerticalForms.WebHome]] layout, by editing the application sheet (the page used to display the application entries) and operating 2 changes: | ||
| 2 | |||
| 3 | 1. Load the JavaScript code required for in-place editing and define some variables:((( | ||
| 4 | {{code language="none"}} | ||
| 5 | #set ($discard = $xwiki.jsfx.use('uicomponents/edit/editableProperty.js', { | ||
| 6 | 'forceSkinAction': true, | ||
| 7 | 'language': $xcontext.locale | ||
| 8 | })) | ||
| 9 | #set ($object = $doc.getObject('Path.To.YourClass')) | ||
| 10 | #set ($editing = $xcontext.action == 'edit') | ||
| 11 | {{/code}} | ||
| 12 | ))) | ||
| 13 | 1. Add some meta data to the definition term (##dt##) elements that wrap the field names:((( | ||
| 14 | {{code language="none"}} | ||
| 15 | <dt #if (!$editing && $hasEdit) | ||
| 16 | class="editableProperty" | ||
| 17 | data-property="$escapetool.xml($services.model.serialize($object.getProperty('yourProperty').reference))" | ||
| 18 | data-property-type="object"#end> | ||
| 19 | {{/code}} | ||
| 20 | ))) | ||
| 21 | |||
| 22 | The result should look like this: | ||
| 23 | |||
| 24 | {{image reference="editObjectPropertyInPlace.png"/}} | ||
| 25 | |||
| 26 | Example usage: | ||
| 27 | * [[FAQ Application Tutorial>>Documentation.DevGuide.Tutorials.FAQTutorial.FAQTutorialManual||anchor="HCreatethePageDesignSheet"]] | ||
| 28 | * [[XClass Application>>extensions:Extension.XClass Application||anchor="HDefaultObjectSheet"]] |
