Wednesday, October 17, 2007

The Multi-line Text Box and its Malcontents - Part II

In Part I I posted an example that demonstrated dynamic resizing (past a minimum height) - giving multiline text box resizing functionality (in IE7 at least) similar to the rich edit text box. So the next question is, how difficult would it be to modify the javascript that renders InfoPath forms on the client to get around this print clipping problem? Well unfortunately although it might not be that hard, it's unlikely you're going to want to try it. According to this post by Liam Cleary (a SharePoint MVP) you shouldn't really modify server files - presumably because of the EULA or the risk of breaking all the SharePoint web applications on your IIS server.

Any other options? Well, you might think that using an expression box (which can be set to expand to show all text) on a print view could be a way to get around the problem of overflow text being clipped. There's only one issue - the expression box in all probability renders as an html <span> element - so any carriage return / line feeds are going to be ignored. It looks like any html is also escaped, so again, aside from messing with the rendering javascript (replacing \r\n with <br /> say), it's probably not going to give you the result you're after.

It looks like unless an update is released, the rich text box is it as far as text edit controls that will resize dynamically on a browser form. Form designers not wanting to use this control who want all text to be visible on screen or in print will have to make sure that control is sufficiently large at design time.

All of that said, the TextBox Render function is right there in plain text for everyone to see, so if I had to take a bit of a guess as to how the SharePoint developers might go about creating a quick fix for this problem in the future - one scenario could see code along the lines of that at the bottom of this post.

In Part III I’ll address another issue with the maligned text box and browser-enabled forms - KB931426. The Microsoft workaround is to use the rich text box, but for people who want to avoid this there is an alternative workaround.

9333:

ErrorVisualization.ShowAsterisk(objControl);}}if(objControl.onkeyup){objControl.fireEvent("onkeyup");}}


9405:

{if(UserAgentInfo.strBrowser==1){arrHtmlToInsertBuilder.push(" style=\"overflow:hidden;\" oncut=\"TextBox_OnCutOrPaste();\" onpaste=\"TextBox_OnCutOrPaste();\" onkeydown=\"TextBox_Resize(this);\" onscroll=\"TextBox_OnScroll();\" onkeyup=\"TextBox_Resize(this);\" ");}arrHtmlToInsertBuilder.push(arrTemplate[1]);


9414:

function TextBox_OnScroll(){var e=window.event.srcElement;var tr=e.createTextRange();if(tr.offsetTop>0)tr.scrollIntoView();TextBox_Resize(e);}function TextBox_OnCutOrPaste(){var e=window.event.srcElement;window.setTimeout(function(){TextBox_Resize(e);}, 25)}function TextBox_Resize(obj){var minHeight=obj.getAttribute("minHeight");if(minHeight==null){minHeight=obj.offsetHeight;obj.setAttribute("minHeight",minHeight);}if(obj.scrollHeight!=obj.clientHeight){var height=obj.offsetHeight+obj.scrollHeight-obj.clientHeight;obj.style.height=(height<minHeight)?minHeight:height;}};TextBox.OnFocus = function (objControl, objEvent)

5 comments:

Kris said...

Do you happen to know if there exists a custom infopath control that allows dynamic resizable text editing? (without rich text functionality)

Or, do you know a tutorial which explains how to extend the functionality of an InfoPath Forms Services control?

(PS: you can always contact me at krisdeswert at yahoo dot com)

txs8311 said...

The problem with extending the functionality of the Forms Services control is you're going to be mucking around with the JavaScript code files on your server - your Microsoft SharePoint EULA might not necessarily allow you to do that. As I'm not a lawyer and would rather not have to hire one, I'm leaving that one alone. Customizations like that would also be a bit of a headache to maintain on installations that aren't stand-alone. Still, it's not hard to find various tutorials and blog posts that give step by step directions on how to edit the core client code, if you're game.

Anonymous said...

Would it be possible to get these lines in context rather than line numbers? Our Core.js has already been modified... Having the lines before and after each section of code would be a great help if possible.


Thanks,
Jono

txs8311 said...

Hi Jono - this original (with line numbers matching the above) should make it a bit easier to find.

Anonymous said...

txs8311, you are an absolute legend! Thanks so much.

,Jono