Hippo CMS External Document Picker Base

This project provides base external document picker Wicket plugins and OpenUI Extension based plugins for Hippo CMS with simple example implementations for developer's references.

This project contains various external document pickers for different use cases:

OpenUI External Document Field Picker (for use cases to select metadata of external content for CMS document fields)
- (a) OpenUI Flat List View Picker Option (for use cases with general list views or search results to select from, using OpenUI Field Extension)
- (b) OpenUI Tree List View Picker Option (for use cases with hierarchically organized content such as external taxonomy data, using OpenUI Field Extension)
External Document Field Picker (for use cases to select metadata of external content for CMS document fields)
- (a) Flat List View Picker Option (for use cases with general list views or search results to select from, using traditional Wicket plugins)
- (b) Tree List View Picker Option (for use cases with hierarchically organized content such as external taxonomy data, using traditional Wicket plugins)
External Picker Folder Context Menu (for use cases to implement a custom behavior on a folder context menu or add metadata of external content for CMS folder)
- (a) Flat List View Picker Option (for use cases with general list views or search results to select from)
- (b) Tree List View Picker Option (for use cases with hierarchically organized content such as external taxonomy data)
External Link Picker Button in the RichText Editor (for use cases with genral list views or search results to select from in CKEditor fields)

External Document Field Picker

External Document Field Picker allows developers to define their own domain specific models to search/select external document(s) for a field of a CMS document. Developers can simply use this forge module plugin class and configurations with injecting their own org.onehippo.forge.exdocpicker.api.ExternalDocumentServiceFacade implementation class.

External Document Field Picker may show either Flat List View or Tree List View for the backend data in the picker dialog, depending on configurations and implementations. If you want to show a Tree List View in the picker dialog instead of the default Flat List View, you need to use slightly different plugin configurations and your org.onehippo.forge.exdocpicker.api.ExternalDocumentServiceFacade implementation class must implement the three more operations defined in org.onehippo.forge.exdocpicker.api.ExternalDocumentTreeService additionally, in order to provide hierarchical information resolutions on the searched external backend data.

For detail, please see Architecture, Developers How-to (Flat List View) and Developers How-to (Tree List View) pages.

External Link Picker Button in RichText Editor

This plugin module allows developers to define their own domain specific models to search/select external document(s) in RichText Editor (CKEditor) fields through your own REST Services. Developers can simply add this forge module dependency and add extra CKEditor module configurations for RichText editor configuration(s).

For detail, please see Architecture and Developers How-to pages.

Demo Application

Build and run the demo project

You can check out, build and run demo application from the demo folder. It contains all the examples explained in this site documentation.

Here are example commands to check out, build and run demo application:

  $ cd demo
  $ mvn clean verify
  $ mvn -P cargo.run

Visit http://localhost:8080/cms/.

Testing OpenUI External Document Field Picker with Demo Application

Log on to the CMS application and open an events document. You will see two fields referring to some external documents below. ('Related Article' field and 'Related Category' field)

Testing External Document Field Picker with Demo Application

Log on to the CMS application and open a news article document. You will see two fields referring to some external documents below. ('Introductory External Document' field and 'Related External Documents' field)

If you edit the document, then you will be able to click on 'Browse...' button for each field to see the following popup dialog. You can search and browse your domain specific external documents there based on your service class implementation. If you select external document(s) and click on the OK button, then the field will be set to those selected external documents.

If a field is configured to support Tree List View picker dialog mode, then the plugin may show a tree list view like the following on 'Browse...' button clicked. You can expand or collapse your domain specific external tree data there based on your service class implementation. If you select external tree item(s) and click on the OK button, then the field will be set to those selected external documents.

Navigate External Documents through Tree List View

Testing External Picker Folder Context Menu Item with Demo Application

Select a document folder and pull down the folder context menu.

When you select 'Add External Categories ...' context menu item, you will see the dialog like the following screenshot. This is configured with the Tree List View picker dialog mode just as an example.

If you select some items and click on 'OK' button in the dialog, it will save extra property in the selected folder node with the metadata of the selected items. However, please note that this example is only for demonstration purpose to show how easily you can add a custom folder context menu item for a custom behavior in your use cases.

In practical use cases, you might want to create documents, images or assets based on the metadata from the user's selection under the selected folder instead of writing properties directly on the selected folder, for example. It is totally up to your org.onehippo.forge.exdocpicker.api.ExternalDocumentServiceFacade implementation class in the end anyway.

Testing External Link Picker Button in the RichText Editor with Demo Application

Log on to the CMS application and open a news article document to edit the "Content" RichText field. If you select a text and click on the "Link to Hippo Blog Articles" (next to "Anchor" button), then you will see the following popup dialog to search external documents.

If you select an item and click on OK button, then you will see the text linked with the external document information.