Learning XPages Part 37 : Adding A Rich Text Control To The Form
Tags : Lotus Domino XPages RichText
Bookmark :
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.
Bookmark :
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.
Comments
Posted by Darin At 03:09:16 PM On 03/06/2009 | - Website - |
Posted by celia At 04:11:03 AM On 04/01/2009 | - Website - |