You should add a custom OpenUI Field Extension configuration like the following example in YAML format. This is an example called exampleArticlePicker, as a custom REST Service for OpenUI Picker, with ../../examples/hippoblogarticles.jsp (e.g, http://localhost:8080/cms/examples/hippoblogarticles.jsp), which responds with a list of items or single item in JSON.
/hippo:configuration/hippo:frontend/cms/ui-extensions/exampleArticlePicker:
jcr:primaryType: frontend:uiExtension
frontend:config: "{\r\n \"findOneUrl\": \"../../examples/hippoblogarticles.jsp?id={{id}}\"\
,\r\n \"findAllUrl\": \"../../examples/hippoblogarticles.jsp?q={{q}}\",\r\n \
\ \"showSearchInput\": true,\r\n \"searchOnInit\": false,\r\n \"initSearchTerm\"\
: \"\",\r\n \"treeViewMode\": false\r\n}"
frontend:displayName: Example Article Picker
frontend:extensionPoint: document.field
frontend:initialHeightInPixels: 80
frontend:url: angular/exdocpickerbase-openui/index.html
| Parameter name | Description | Default value(s) |
|---|---|---|
| frontend:displayName | The display name of this OpenUI Extension. See Configure a Document Field Extension for detail. | |
| frontend:extensionPoint | The type of extension point. This should be set to document.field. See Configure a Document Field Extension for detail. | |
| frontend:url | The OpenUI Extension page URL, provided by this plugin. This should be set to angular/exdocpickerbase-openui/index.html. See Configure a Document Field Extension for detail. | |
| frontend:initialHeightInPixels | The initial height of this plugin in the document editor in pixels. See Configure a Document Field Extension for detail. | |
| frontend:config |
The JSON string of the configuration for the frontend configuration of this plugin.
{
"findOneUrl": "../../examples/hippoblogarticles.jsp?id={{id}}",
"findAllUrl": "../../examples/hippoblogarticles.jsp?q={{q}}",
"showSearchInput": true,
"searchOnInit": false,
"initSearchTerm": "",
"treeViewMode": false
} |
| Parameter name | Description | Default value(s) |
|---|---|---|
| findOneUrl |
The REST API URL template, in Handlebars templating syntax,
to resolve a single resource item.
Note that only id variable, which is the identifier of the specific item, is provided in templating for this URL. As this URL template configuration is interpolated, you can configure this in multiple ways. e.g, ../../myresources/{{id}}, https://api.exmple.com/myresources/{{id}}, etc. See Specification of REST Services for OpenUI Document Field Picker for detail. |
|
| findAllUrl |
The REST API URL template, in Handlebars templating syntax,
to find multiple resource items.
Note that only q variable, which is the user's input in the search textbox, is provided in templating for this URL. As this URL template configuration is interpolated, you can configure this in multiple ways. e.g, ../../myresources/, https://api.exmple.com/myresources/?query={{q}}, etc. See Specification of REST Services for OpenUI Document Field Picker for detail. |
|
| showSearchInput | Flag whether to show the search input textbox and search button at the top of the picker dialog UI. | true |
| searchOnInit | Flag whether to execute search as soon as the dialog opens. | false |
| initSearchTerm | The initial search term parameter which is passed to the findAll REST Service URL template. | Empty string |
| treeViewMode | Flag whether to open the flat list view picker dialog or tree list view picker dialog. This should be set to false for this flat list view picker dialog option. | false |
Once you defined a new OpenUI Extension for OpenUI External Document Field Picker followint the above instructions, you can configure document field(s) with your custom OpenUI Field Extension by setting the field type to Open UI String in any document types. See Configure a Document Field Extension for detail.
An example field configuration with the OpenUI External Document Field Picker looks like the following:
/hippo:namespaces/exdocpickerbasedemo/eventsdocument:
jcr:primaryType: hipposysedit:templatetype
jcr:mixinTypes: ['editor:editable', 'mix:referenceable']
jcr:uuid: 08c73691-c539-4b63-81f6-81a3403c55c7
/hipposysedit:nodetype:
jcr:primaryType: hippo:handle
jcr:mixinTypes: ['mix:referenceable']
jcr:uuid: 003586bb-c610-48c9-9faa-64805e3b7179
/hipposysedit:nodetype:
jcr:primaryType: hipposysedit:nodetype
jcr:mixinTypes: ['hipposysedit:remodel', 'mix:referenceable']
jcr:uuid: e84b7e04-6978-4e73-a001-2fc8ff6f44a0
hipposysedit:node: true
hipposysedit:supertype: ['exdocpickerbasedemo:basedocument', 'hippostd:relaxed',
'hippotranslation:translated']
hipposysedit:uri: http://www.exdocpickerbasedemo.com/exdocpickerbasedemo/nt/1.0
# ...SNIP...
/relatedarticleid:
jcr:primaryType: hipposysedit:field
hipposysedit:mandatory: false
hipposysedit:multiple: false
hipposysedit:ordered: false
hipposysedit:path: exdocpickerbasedemo:relatedarticleid
hipposysedit:primary: false
hipposysedit:type: OpenUiString
# ...SNIP...
/editor:templates:
jcr:primaryType: editor:templateset
/_default_:
jcr:primaryType: frontend:plugincluster
frontend:properties: [mode]
frontend:references: [wicket.model, model.compareTo, engine, validator.id]
frontend:services: [wicket.id, validator.id]
type: exdocpickerbasedemo:eventsdocument
# ...SNIP...
/relatedarticleid:
jcr:primaryType: frontend:plugin
caption: Related Article
field: relatedarticleid
plugin.class: org.hippoecm.frontend.editor.plugins.field.PropertyFieldPlugin
wicket.id: ${cluster.id}.right.item
/cluster.options:
jcr:primaryType: frontend:pluginconfig
ui.extension: exampleArticlePicker
# ...SNIP...