Ben Langhinrichs

Photograph of Ben Langhinrichs

IBM Champion logo

E-mail address - Ben Langhinrichs







Recent posts

Tue 7 Aug 2018

If it isn't preserved, it is lost



Fri 27 Jul 2018

ROI of Data slides from CollabSphere



Thu 14 Jun 2018

CKEditor #6 - Sharing a toolbar between rich text fields


August, 2018
SMTWTFS
   01 02 03 04
05 06 07 08 09 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

Search the weblog





























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)
CKEditor #1 - Basic toolbar configuration
CKEditor #2 - Use in Classic Domino web design
CKEditor #3 - Add your own toolbar plugin
 

Copyright © 2018 Genii Software Ltd.

What has been said:

No documents found

Have your say:

Name *:
E-mail:
e-mail addresses will not be displayed on this site
Comment *:


<HTML is not allowed>
Linking: Add links as {{http://xxx|title}}, and they will be activated once approved
Blocked? Unable to post a comment? Please read this for a possible explanation...