SharePoint's Contact Selector

(Ported from fooshen.blogspot.com) 

After first installing Sharepoint 2007 Beta2 (way back in May), 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 Contact Selector 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 to achieve this effect?

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? 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:

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.

How to achieve this effect - the secret is here!
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 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!
However, when rendered in non-IE browser, SharePoint will simply render a normal TextArea element.

Comments

• Anonymous
  January 24, 2007
  SharePoint 2007 has a nice feature where they do a red squiggle validation for data entry controls, similar...