Limit character length in multiline text box in SharePoint using jQuery

SharePoint really provides many of the features out of the boxes. I would say 75% of feature it provides out of the box; however there are some scenarios where these features cannot help us.

Let me give you a classic example. Recently I got a simple requirement. When we create multiline text box in SharePoint, unfortunately there is no option to limit the number of characters in that. It is available in single line of text field but not in multiline text.

Ok, what is the solution? Yes, we can create custom field and ready to go. Yes I agree. But this will take time to create custom field and deploy on the server which may administrator in the company does not give access easily to upload anything.

Hummm…..So what to do? Answer is use jQuery. JQuery is here to save you.

All you have to do is add content editor web part on the page, and just bind keypressed event of textbox and count the number of characters. That is it. So simple. If it exceeds certain number of characters, you popup some message and then do not allow to enter more character in that.

Sounds great. Isn’t it? I know, yes of course.

At least this is far better than developing custom field type and then installs it in server through WSP.

Make sure that you add content editor web part in New Form as well as Edit Form both.

Let us say I have reason filed as multiline textbox in the list and I want to limit number of characters in that 100. We do not want to allow any more character to type in.

So here is the jQuery that you write. If you know that jQuery syntax, then this is not difficult to understand. Text area is what we are looking for with title Reason as list field.



And there you go, try to add more characters in reason and see the result.



So, doesn’t it save your lot of time to write custom field for such a common requirement? Do share your thoughts

Style Individual Navigation Items for 2010

Style Individual Navigation Items for 2010

Well first you will need to modify the master page and do a search for “UseSimpleRendering="true"”. This basically tells SharePoint to render the navigation using a clean unordered list <UL> <LI> format.
Since this is so clean, it does not have any unique ID’s attached to it like it did in SharePoint 2007.

So if you change it to false: UseSimpleRendering="false" you can clearly see that each node now has a unique ID:

So if we simply take the same approach for 2007 we can get similar results.  You will notice the only difference in the ID’s from 2007 to 2010 is that they put in a “V4” after the word “Menu” and before the “n#”

1. 2007 ID: zz1_TopNavigationMenun0
2. 2010 ID: zz1_TopNavigationMenuV4n0

You can also remove the “ms-topnav” since it is not needed. You should end up with something like this:

Below is the CSS that I used to achieve the design above for SharePoint 2010. Remember you need to make that modification to the master page noted above to get this to work. Also notice that I kept the “a” reference at the end of each ID.
#s4-topheader2{
border: none;
background-color: transparent;
background-image: none;
font-weight: bold;
height: 54px;
padding-bottom: 5px;
}
#zz1_TopNavigationMenuV4n0 a{
background-image: url(/_layouts/images/newshomepage.png);
background-repeat: no-repeat;
background-position: -40px -3px;
background-color: #006699;
border: 1px #006699 solid !important;
padding:18px 20px 18px 80px;
color: #FFF;
}
#zz1_TopNavigationMenuV4n1 a{
background-image: url(/_layouts/images/PLICON.PNG);
background-repeat: no-repeat;
background-position: -40px -3px;
background-color: #FF9933;
border: 1px #FF9933 solid !important;
padding:18px 20px 18px 80px;
color: #FFF;
}
#zz1_TopNavigationMenuV4n2 a{
background-image: url(/_layouts/images/ANNOUNCE.PNG);
background-repeat: no-repeat;
background-position: -40px -3px;
background-color: #336633;
border: 1px #336633 solid !important;
padding:18px 20px 18px 80px;
color: #FFF;
}
#zz1_TopNavigationMenuV4n3 a{
background-image: url(/_layouts/images/ReportCenter.png);
background-repeat: no-repeat;
background-position: -40px -3px;
background-color: #990000;
border: 1px #990000 solid !important;
padding:18px 20px 18px 80px;
color: #FFF;
}
#zz1_TopNavigationMenuV4n4 a{
background-image: url(/_layouts/images/SMT_LARGE.PNG);
background-repeat: no-repeat;
background-position: -40px -3px;
background-color: #660066;
border: 1px #660066 solid !important;
padding:18px 20px 18px 80px;
color: #FFF;
}
#zz1_TopNavigationMenuV4n5 a{
background-image: url(/_layouts/images/categories.png);
background-repeat: no-repeat;
background-position: -40px -3px;
background-color: #999;
border: 1px #999 solid !important;
padding:18px 20px 18px 80px;
color: #FFF;
}

Display user profile picture next to welcome name

1.) Add the following to the top of your custom master page right before the doctype: <%@ Register Tagprefix="SPSWC" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

2.) Add in the following control right before the welcome text: <SPSWC:ProfilePropertyImage PropertyName="PictureUrl" style="float: left; height: 20px;" ShowPlaceholder="true" id="PictureUrlImage" runat="server"/>

A nice feature that you can customize is if you don’t want to show a placeholder image if a users has not uploaded a custom picture you can simply change ShowPlaceholder="true" to “false”. and it will only show a picture if someone has specified a custom one in their profile.
Before:

After:

If you want to have the image on the right simply move the control after the welcome and muiselctor controls, also remove the float:left in the picture style:
<wssuc:Welcome id="IdWelcome" runat="server" EnableViewState="false"></wssuc:Welcome>

<wssuc:MUISelector ID="IdMuiSelector" runat="server"/>

<SPSWC:ProfilePropertyImage PropertyName="PictureUrl" style="height: 20px;" ShowPlaceholder="true" id="PictureUrlImage" runat="server"/>
The 20px height is that golden number because any larger and the image will get cropped off on the bottom in IE7 and in IE8 you will start to see some separation and cropping of the ribbon when viewing the other ribbon tabs.
30px height:

20px Height:

The inline CSS above on the control is just to keep this blog post simple, Its recommended to move that inline style into your custom CSS file.