Improving #SharePoint Forms – Watermarks

So I found this cool jQuery plugin that does watermarks for form inputs. Using watermarks is a good way to help make SharePoint forms easier to use. To test the plugin I started with the new item form from same test list I used in my previous posts.

• Improving #SharePoint Forms – Hints
• Improving #SharePoint Forms – Character Count

Watermarks

Prerequisites

• jQuery Library referenced in the page
• CEWP on the page

Read the rest of this entry »

Improving #SharePoint Forms – Character Count

For the sake of demonstration I made a list called quotes. Each quote has a title, body and author field, as a requirement the body field should not have more than 200 characters. So to let users know when they are getting close to the character limit we will setup a character count script.

For this solution I will use this jQuery script from CSS Globe.

The default form

Read the rest of this entry »

Improving #SharePoint Forms

Over the next few weeks I will be writing a series of posts on how to improve the out of the box SharePoint forms by using simple CSS and jQuery solutions.  These solutions will help improve usability as well as enhance the look and feel.  Look for the first post later this week.

As a point of reference this is what we will be starting with.

Standard SharePoint Form

Stay tuned for more soon.

Resizable textareas in SharePoint edit forms

So one of the things that I have had end users complain to me about is the size of the text boxes on the new and edit forms of lists like the contacts list and announcement list. On a recent non-SharePoint project I used a jQuery plugin to create a resizable text area so I tried to implement it in SharePoint. Here is what happened.

I downloaded the Textarea Resize JavaScript jQuery plugin, saved in a SharePoint library along with the latest version of jQuery.

Selecting the Element

In order for the jQuery code to work it has to know which elements on the page you want to work with.

Here is the code SharePoint renders for a text box:

<textarea name="ctl00$m$g_3fa2cde8_0ea8_4421_814f_6a6d292fbe54$ctl00
$ctl04$ctl0ctl00$TextField"
rows="15"
cols="20" id="ctl00_m_g_3fa2cde8_0ea8_4421_ctl00_TextField" title="Body"
class="ms-long" dir="none"></textarea>

There are two problems:

1.  ASP.NET creates very long and hard to use IDs
2. The class ms-long culd apply to other elements on the page that I dont want to use the effect on.

Read the rest of this entry »