Search This Blog

Thursday, February 14, 2013

Rich Text Box Controls in Browser-Enabled InfoPath Forms

Over the years of developing InfoPath forms, I have become aware of many idiosyncrasies of browser-enabled forms. I usually find myself trying to find workarounds for designs that are simple in a client based InfoPath form but fall apart in browser-enabled forms. In this post, I present a workaround for using rich text boxes in browser-enabled InfoPath forms.

In the last project I worked on, I had an InfoPath form which required several text boxes to be on a page (as many as 24). The original design of this form had each of these text boxes in the form as rich text boxes. Most of these rich text boxes had data validation rules as well as conditional formatting. I wasn’t breaking any of the rules for making the form browser-enabled and the form worked great in preview mode. Everything was fine until I began using the form in the browser.

Some of the behavior in the browser included:

  • The toolbar for the rich text box hides the label for the rich text box.
  • The toolbar for the rich text box wouldn’t always disappear (even when focus was moved from the textbox). But a teammate discovered that if you click in the upper right corner of the toolbar, it will close out the toolbar.

  • Moving focus from a rich text box causes a postback to the server (because of the validation and conditional formatting) and doesn’t always return focus to the appropriate control on the page. This may leave the user in a different section of the form and cause confusion for the user.
  • Validation for a rich text box does not always work.
  • With this validation rule, if the user enters text into a rich text box and then deletes the text, once focus has moved from the rich text box control, the form does not show an error for the control. This happens because the markup HTML for the control still contains <div></div>, making the XML node for the rich text box control not blank. Therefore, a user is able to complete the form without filling out a required field. The attempted workaround was to set the validation to require a minimum of 20 characters. (This works, but it’s not quite elegant).

With all these things added up, the performance and usability of the form decreased significantly enough to require some sort of workaround. It turned out that there was no real need to include rich text boxes because the users most likely would not take advantage of the formatting provided in the toolbar. The biggest sacrifice was that a rich text box’s height would expand to show all the content within the control whereas a regular text box has a set height. Since the customer was willing to live with this sacrifice, the rich text boxes were changed to regular text boxes with a set height (about 100px to indicate the text box required a lengthy answer). The standard data validation rules work just fine for a text box (if field1 is blank, then “This field is required”). This simple change improved performance and usability tremendously.

This form also had a read-only version. In this read-only version, expression boxes were used to display the data from these text boxes. An expression box will expand to show all content in a field. The expression boxes were even modified to look like a text box (modify the Borders and Shading to change the outline and the background to be white); even with gray text to indicate the control is read-only.

Each InfoPath project seems to provide a new opportunity for imaginative workarounds. In this specific case, the increased number of rich text boxes on a single page is what affected performance and usability. It’s not that rich text boxes shouldn’t be used in browser-enabled InfoPath forms, it’s just that they should be used sparingly and deliberately.

Happy InfoPath form designing!

4 comments:

  1. It is perfect time to make some plans for thee long run andd it's time to
    be happy. I have learn this post and iif I may I wiszh to counssl you few interesting issues or suggestions.
    Perhaps you can write subsequent articles relating to this article.
    I wisxh to learn moee issues approximately it!


    Feel free to visit my webpage: Beats By Dr Dre

    ReplyDelete
  2. Thanks for finally writing about > "Rich Text Box Controls in Browser-Enabled InfoPath Forms" < Loved it!

    My web-site - North Jacksonville criminal lawyer

    ReplyDelete
  3. Wonderful blog! I found it while surfing around on Yahoo News.
    Do you have any suggestions on how to get listed in Yahoo News?
    I've been trying for a while but I never seem to get there!
    Thanks

    my blog post :: garcinia cambogia

    ReplyDelete