Learning XPages Part 37 : Adding A Rich Text Control To The Form

One of the true headaches of the Domino
Developer in the past has been working with RichText files in their web
based applications. There have been many different solutions, For BlogSphere
I wrote code that would convert the field to MIME and then extract the
html and then convert all the internal links to embedded images into real
links. Other options included using external tools like FcskEdit or TinyEdit
or some of the high quality tools from Genii
Software which have been designed
specifically for Domino. In this part fo the series I’m going to add a
richtext field to our phonebook for an ‘About Me’ section to see what options
we have now with XPages.

Let’s start by opening our ‘Person’
form in the domino designer and adding a new field called ‘AboutMe’ and
giving it a type of ‘RichText’.

Save and close the form and then open
the content_person custom control. I have decided to add the about me section
as a new tab to the tabbed panel we created earlier in the series. To add
a new tab to the tabbed panel just right click in the tabs areas of the
tabbed panel and select the ‘Append Tab’ option from the context menu.
Your new tab will appear and the properties box below will automatically
switch to the properties of the new tab.  Change the label for the
tab to ‘About Me’ and then from the controls pane on the right drag over
a new control of type ‘Rich Text’ into the tabs content area.

You should see a nice richtext editor
appear, select it and look down at the properties for the control and change
to the data section. We need to bind the control on the XPage with the
new field in our notes form so set the data source to ‘personDoc’ which
is the name of the data source we setup for this custom control and then
in the ‘Bind To’ dropdown select the new ‘AboutMe’ field.

Save the custom control and then preview
your phonebook, log in and go to a person’s record and look at the about
me tab in both read mode and edit mode to see how it appears.

If you save the change to the document
in Xpages then it will be saved into the new richtext file on the domino
form :

This RichText is still very rudimentary.
I couldn’t see a way to embed images or links via the web interface and
due to some CSS issues the line heights were slightly off when the document
was in readmode again after saving it. I’m still trying to figure out the
CSS to resolve this issue.

In the next part I’ll look at how the
end user can upload a new photo of themselves for display in the header
section of the person details page.