Genii Weblog
CKEditor #4 - Use Domino design elements in plugin
Mon 11 Jun 2018, 11:13 AM
Tweetby 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..
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.
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.
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.
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.
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.
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
Copyright © 2018 Genii Software Ltd.
What has been said: