Genii Weblog

CKEditor #4 - Use Domino design elements in plugin

Mon 11 Jun 2018, 11:13 AM

by Ben Langhinrichs
This is the fourth in a series of short posts on configuring CKEditor, the web editor included with Domino. In my previous post, I showed how to create your own Hello World plugin and add it to the toolbar. Now, I'll show a useful plugin that uses the database design elements in the current database to add doclinks via a Doclink action. 
1) We will open a form with an embedded view to select the doclink 
The technique in Notes where you copy a doclink and then paste it elsewhere is both difficult to implement on the web and fairly cumbersome. Instead, we will launch a form with an embedded view, and then let the doclink selection happen with a simple click. Adding a bit more flexibility here, if you click the icon, you get a doclink, but if you click the subject title, you will get a text link. These are then shown in the dialog so you have a chance to edit the subject if you like..
Inline GIF image
2) Adding a dialog to to a toolbar plugin 
In order to launch the dialog box when we click the doclink icon on the CKEditor toolbar, we need to add a section to our plugin.js, which otherwise looks fairly like the Hello World example from yesterday. We will also add a dialogs folder under the doclink plugin folder with a doclink.js to handle the specialized logic.
Inline GIF image
Inline GIF image
3) Creating a form in the dialog to allow setting fields  
While it is easy to create the dialog and ask for input, one tricky aspect is creating a form so that the Domino design elements can find and set the fields from the opener. The input fields herewill be set when clicking the icon in the embedded view in Domino. Notice that the first part of the dialog is the Browse Database button which triggers the BrowseDatabase function I will show in a moment. Note: You could extend this  to give you a dropdown of databases, or have the form retrieve values from other databases to create a pseudo-view. The latter would be a bit more work, but would allow access to databases that did not have the form and view added to them.
Inline GIF image
4) Opening the form with the embedded view 
The BrowseDatabase uses the db path and ReadForm to open a form in the database which we created with an embedded view.
Inline GIF image
5) The logic behind the embedded view 
The trick here is to have an onClick event in the column formula which sets those values from urlForm back in the dialog which opened this window, after which you simply close the window, returning you to the dialog.
Inline GIF image
6) Inserting the HTML pressing OK 
Similar to the insertHTML logic in the Hello World plugin, we simply use the input fields in the onOK event to either create a doclink or a text link.
Inline GIF image
7) Commercial side-note - what AppsFidelity brings to the table 
While this plugin works like a charm if you have a web only solution, if you also have Notes users, those doclinks will be URL links and not work so well. Along with its other features, AppsFidelity auto-converts the doclinks so that in Notes they are true doclinks and on the web they are true web links. If you want to try it out for yourself, request an AppsFidelity evaluation license and see all the ways AppsFidelity can make your applications work better..
All topics in the series
CKEditor - customizing and empowering the toolbar (intro)
1) CKEditor #1 - Basic toolbar configuration
2) CKEditor #2 - Use in Classic Domino web design
3) CKEditor #3 - Add your own toolbar plugin
4) CKEditor #4 - Use Domino design elements in plugin 
5) CKEditor #5 - Powering plugins with other extensions 
6) CKEditor #6 - Sharing a toolbar between rich text fields 

Copyright 2018 Genii Software Ltd.

What has been said:

No documents found