Genii Weblog


Civility in critiquing the ideas of others is no vice. Rudeness in defending your own ideas is no virtue.


Thu 14 Jun 2018, 11:23 AM
This is the sixth in a series on configuring and customizing CKEditor. While some applications such as discussions may have a single rich text field, there are many where multiple rich text fields are available to include different steps or kinds of information. In these applications, the repeated toolbars and attachment sections may overwhelm the page. In this post, I'll show how you can disconnect the toolbar from the top (or bottom) of the rich text, and then share the same toolbar between multiple rich text fields.
 
1) Our goal is one toolbar which will work with multiple different rich text fields
The toolbar will understand where the cursor is, so the toolbar actions will act on that rich text.
 
Three rich text fields with one shared toolbar
 
 
2) Setting up the location of the toolbar and bottom status bar
There are actually three parts of the CKEditor to worry about. The first is the editor area itself, which is defined by where the rich text field appears. That's the obvious one. The other two are the toolbar and the bottom bar, which is the status line which appears at the bottom of the editor space in a standard CKEditor configuration. Both the toolbar and bottom bar can be shared. In this case, I went one further and hid the bottom bar. There may be a better way to disable it (let us know in the comments!), but this is what I came up with.
 
Three rich text fields with one shared toolbar
 
 
3) Adding and setting the 'sharedspaces' addin
Now that we have the divs set where we want the toolbar and bottom bar, we go ahead and add an extraplugin for 'sharedspaces'. You'll notice I also added 'autogrow' which is a useful feature that allows the rich text field editor to grow with the content. I set the minimum and maximum height for the autogrow so that it worked well with the page. Then I set the sharedspaces top and bottom values to the ids of the divs. Again, there is likely a better solution to redefining the toolbar the exact same way for each field, but this worked.
 
Three rich text fields with one shared toolbar
 
 
4) There is a great deal of flexibility possible, including side-by-side fields and a vertical toolbar
This example shows three rich text fields side-by-side. At first, I put the toolbar at the top as in my earlier example, but then decided it would be more useful to have a vertical toolbar. I should note that I spent way too long trying to make the toolbar go vertical with separators and such before realizing I just needed to put it in a column with only room for one icon at a time.
 
Three rich text fields with one shared toolbar
 
 
5) XPages, a fixed location toolbar and other thoughts
While I only showed Classic design for this demo, the process is very similar for XPages. The extraplugins get added with dojoattributes, while the shared spaces are set like a custom tooIbar with another dojo attribute. The only trick is making sure your div ids work properly in XPages, which likes to mess with such things. As for a fixed location toolbar, I didn't create an example for it, but it would be easy to put the toolbar div into a non-scrolling area of the form while the rich text fields were in a scrolling part. Do you have other ideas about how and where to use the toolbar that might not be obvious? Do you have specialized fields that are implemented other ways such as popups or floating pages? Leave a comment and let us know.
 
All topics in the series
 

Copyright © 2018 Genii Software Ltd.

Tags:

Tue 12 Jun 2018, 02:59 PM

Collabsphere through the years

I am presenting a session at Collabsphere 2018, the successor to the well-respected MWLUG conference which has grown more and more vital over the past few years. If you are in the U.S. or Canada and haven't been able to get over to Engage or other overseas conferences, don't miss this. As an IBM Champion this year, I have had to look around and see which conferences might make sense, and this was an easy choice. Supported by IBM enough to get the inside information, but independent enough to hear more than IBM marketing, this is a conference worth the cost. Not that it costs much. A great hotel rate, negligible entry fee, and a reasonably priced city all make this an easy sell to your company, especially with the critical changes coming to Notes/Domino and the rest.

As for my session, the details are below. I promise it will be a good session, but I also promise you are likely to get even better information by hanging out with me at lunch or chatting in the halls. That is where some of the best discussions happen, and where a lot of the positive changes you'll see in Notes/Domino 10 were bandied about in previous years.

The ROI of Data - Building on your company's existing investment 
Often neglected in the quest for better, faster, easier applications is the invested value in the data, both new and old, that makes your applications more than demoware. Whether converting a Notes client application to a MEAN stack mobile app, or taking an existing Domino web app and building new connections and features, or building reports on a collection of data created and stored by a mixture of applications, there are techniques and methods to get more bang for your buck.

In this session, we will discuss the kinds of data available, not all of it obvious, techniques for normalizing the data for analytics without losing the strengths of NoSQL, and how to unbundle and use data stored in rich text, MIME, attachments and more.

Copyright © 2018 Genii Software Ltd.

Tags:

Tue 12 Jun 2018, 01:44 PM
This is the fifth in a series on configuring CKEditor. In my previous post,  I showed how to use a Domino form and view to add doclinks. In this, I'm going to show how to simulate the Notes way of attaching documents along with attachment icons that launch the files. Note: I have used our product, AppsFidelity, for the example. Other topics should be much less product focused, but this seems the best way to demonstrate it..
 
1) Our goal is to create specialized images as attachment icons to launch files as in Notes client
In other words, the first of the following two images is what we want to see on the web, rather than the second which is what we see now.
 
Inline GIF image
 
The default is to add the attachments at the bottom as in this image. This loses context. For example, you can't tell that I added Bonnie's rap sheet first, so the order they are mentioned doesn't match the order they are presented. Iin my example above, the location tells you all you need to know. Imagine the confusion possible when a long document with many attachments is displayed.
 
Inline GIF image
 
 
2) Adding the plugin and dialog
This process is very similar to the Doclink example in the previous post, with one notable exception being that we open the Domino form and save it as a temporary document rather than just reading it.
 
Inline GIF image
 
See in this brief video:
 
 
 
3) How the attachment image is generated
The attachment icon with the text embedded is a challenge. When the file is uploaded to the temporary document, an extra step must generate the attachment icon. This can be accomplished with the C API and an image library. Here, I use AppsFidelity as an extension manager so when the temp document is saved, the image is generated as a second attachment. Then, the HTML inserted in the plug knows where the image will be. Alternately, you could use a web services call or other extension to return the image.
 
Inline GIF image
 
4) How the attachment moves from the temporary document to the original (edited) document
You could leave the attachment in a separate document, but that leads to management and security issues. Instead, on submission of the original document, the save process copies the attachment over, changes the HTML to point internally, and removes the temporary document.
 
 
5) How this looks if opened in Notes client
If you have a web only solution, it doesn't much matter how this works in Notes, but if you did open it, you would have an image with a link to the web document which would then open a browser to open the attachment. To avoid this since we already have an extension manager, we can catch the open from Notes and convert the MIME to rich text with "normal" Notes attachments.
 
Inline GIF image
 
 
6) A multitude of other extensions are possible
Once you open up the idea of actions that reach outside of the local editor, you could have an icon that did a pull request on a stock ticker symbol and inserted a chart, or you could have a dropdown with different boilerplate language which could get inserted, or you could have a translate button which would add (or replace selected content) a translated version. The sky is the limit. The imporatnt thing to realize is that you can extend the toolbar in ways that server your business needs and add capabilities beyond simple rich text manipulation.
 
 
7) Commercial side-note - what AppsFidelity brings to the table 
This file attachment action requires either AppsFidelity or other extensive coding. Subsequent topics in this series will not be similarly focused, but I wanted one last opportunity to invite you to  try AppsFidelity by requesting an AppsFidelity evaluation license. See the ways AppsFidelity can empower your applications, both for web only and web/Notes applications, and for Classic or XPage apps.
 
All topics in the series
 
  

Copyright © 2018 Genii Software Ltd.

Mon 11 Jun 2018, 11:13 AM
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
 

Copyright © 2018 Genii Software Ltd.

Tags:

Fri 8 Jun 2018, 12:42 PM
This is the third in a series of short posts on configuring CKEditor, the web editor included with Domino. It is used by default for rich text fields in XPages, and in the second post, I showed how to use it for rich text fields in Classic Domino web design. I also showed how to configure the toolbar to include only the actions you want. In this post, I'll show how you can include your own actions, termed plugins, into the toolbar in both XPages and Classic.
 
1) A simple toolbar plugin 
Toolbar actions can do a number of things. They can add content, they can manipulate existing content, and they can use content for some action outside of the rich text (like a button on a Notes form). I decided to build the classic Hello World action, represented by a globe icon. But in this case, when you say Hello, World!, it says Hello back to you. Here's how it will work:
 
Inline GIF image
 
 
2) Building the plugin 
If you look at the directories under the data directory, you will find data\domino\html\ckeditor\plugins which has all sorts of existing plugins. I started by adding a subdirectory called hello, which will be the name of my plugin.
 
Inline JPEG image
 
In that directory, I add a subdirectory names icons and create a JavaScript file called plugin.js to implement the code. Under the icons, I add a 16x16 px icon for the action as a .png file. For ease of use later, call it by the same name as the plugin name, so in this case hello.png. It looks like this:
 
Inline GIF image
 
The plugin.js code is very simple, though plugins can be much more extensive:
 
Inline GIF image
 
 
3) Adding the plugin to XPages 
We add a dojo attribute called extraPlugins with a value of "hello", and the modify the dojo attribute for toolbar to include the plugin. Here is the end result when seen in the source of the custom control:
Inline GIF image
 
When we open it up and hover over the globe icon, we see "Hello, World!" (the label from plugin.js):
 
Inline GIF image
 
and when we click on the action, it inserts the HTML we want at the insertion point:
 
Inline GIF image
 
 
4) Adding the plugin to Classic
The only code we need to change is in the doLoadCKEditor function in JS Header. We need to add that same extraPlugins value, and we need to modify toolbar. Here is the modified functionto get the toolbar seen in the animated GIF at the beginning of this post:
 
Inline GIF image
 
 
All topics in the series
 

Copyright © 2018 Genii Software Ltd.

Fri 8 Jun 2018, 11:50 AM
This is the third in a series of short posts on configuring CKEditor, the web editor included with Domino. It is used by default for rich text fields in XPages, and in the second post, I showed how to use it for rich text fields in Classic Domino web design. I also showed how to configure the toolbar to include only the actions you want. In this post, I'll show how you can include your own actions, termed plugins, into the toolbar in both XPages and Classic.
 
1) A simple toolbar plugin 
Toolbar actions can do a number of things. They can add content, they can manipulate existing content, and they can use content for some action outside of the rich text (like a button on a Notes form). I decided to build the classic Hello World action, represented by a globe icon. But in this case, when you say Hello, World!, it says Hello back to you. Here's how it will work:
 
Inline GIF image
 
 
2) Building the plugin 
If you look at the directories under the data directory, you will find data\domino\html\ckeditor\plugins which has all sorts of existing plugins. I started by adding a subdirectory called hello, which will be the name of my plugin.
 
Inline JPEG image
 
In that directory, I add a subdirectory names icons and create a JavaScript file called plugin.js to implement the code. Under the icons, I add a 16x16 px icon for the action as a .png file. For ease of use later, call it by the same name as the plugin name, so in this case hello.png. It looks like this:
 
Inline GIF image
 
The plugin.js code is very simple, though plugins can be much more extensive:
 
Inline GIF image
 
 
3) Adding the plugin to XPages 
We add a dojo attribute called extraPlugins with a value of "hello", and the modify the dojo attribute for toolbar to include the plugin. Here is the end result when seen in the source of the custom control:
Inline GIF image
 
When we open it up and hover over the globe icon, we see "Hello, World!" (the label from plugin.js):
 
Inline GIF image
 
and when we click on the action, it inserts the HTML we want at the insertion point:
 
Inline GIF image
 
 
4) Adding the plugin to Classic
The only code we need to change is in the doLoadCKEditor function in JS Header. We need to add that same extraPlugins value, and we need to modify toolbar. Here is the modified functionto get the toolbar seen in the animated GIF at the beginning of this post:
 
Inline GIF image
 
 
All topics in the series
 

Copyright © 2018 Genii Software Ltd.