volatile constants

Monday, May 29, 2006

Sharepoint 2007: The neat and tidy

After installing Sharepoint 2007 Beta2, the very first thing I noticed (besides all the bells and whistles), is the superior user interface; souped up with ajax at every turn. There is hardly any dropdownlist box, replaced with a rather sweet DHTML drop down menu that loads asynchronously.

Now, the one thing that caught my eye is the PeopleEditor control (part of Sharepoint's WebControl library). This is used in many security settings page, for example in the site collection adminitration page as shown here.



What these controls do is quite similar to those outlook email fields, where we can type in an alias, and click on the "Check Names" image button to resolve the actual user name. Once resolved, the name will be underlined, or if unresolved, you will see the red wavy underline, similar to a typical spell-check error in a word processor.



Now, How the heck do they do it - Part one.
Conventionally, we can apply a 'text-decoration: underline' to a text input control (IE-only), to achieve an effect close to the first text-box (the "resolved" name). However, what about the wavy underline thingie? It is not supported by any standard CSS implementations. The trick is to use a small image with a red underline, and set background-repeat attribute to repeat-x in the stylesheet.

In Sharepoint 2007, the CSS class used is ms-entity-resolved and ms-entity-unresolved respectively. Now, if we apply these attributes to a normal text-input, we get another problem. If we apply the above styles into a conventional <input type="text"> element, all we got is a textbox that applies the underline/wavy-underline in the entire input. Not good, as in Sharepoint 2007, we get to see this:



How the heck do they do it - Part two.
Furthermore, if we use the left/right arrow, the cursor will actually skip past the resolved/unresolved name, treating the entity as if one single character.

So, how the heck.. ? Well, to achieve this level of neatness, Sharepoint 2007 employes various DHTML tricks.. and most are specific to IE only. To achieve the above behaviour, Sharepoint didn't use any textbox input elements as we were made to believe. Yes, what we see here are not <input type="textbox"> tags; rather these are done using nested div and span, with the IE-specific attribute "contenteditable" set to "true".

To try this, use the following code snippet:


<style>
.squiggle
{
background-image:url("squiggle.gif");
background-repeat:repeat-x;
background-position:left bottom;
padding-bottom:2px;
vertical-align:text-top;
font-style:italic;
}
.container
{
border:1px solid #a5a5a5;
overflow-x: hidden;
width: 100%;
color: windowtext;
height: 18px;
background-color: window
}
</style>
<div class="container" contenteditable="true" tabindex="0">
<span class="squiggle" contenteditable="false" tabindex="-1">
<div style="DISPLAY: none" displaytext="here"></div>
<span contenteditable="true" tabindex="-1">unresolved!</span>
</span>
</div>


By the way, the squiggle.gif image can be found in Sharepoint's Template\Images folder.

This is the magnified version of it (200x):
Cool tricks to use, especially if we are creating controls with spell checks capabilities!

Note: As of today, these are only availble in IE. In FireFox, Sharepoint will simply render a textarea control.

88 Comments:

Post a Comment

<< Home