O'Reilly logo

SharePoint 2010 at Work by Mark Miller

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Labeled Sections on Default Forms

Have you ever wanted to break up the columns on a list item into sections without having to unghost or customize the page in SPD (see Figure 3-6)?

UnghostedDispForm with group labels

Figure 3-6. UnghostedDispForm with group labels

It’s a fairly simple process with jQuery.

  1. Add a column to your list for each label you want.

  2. Name each label with a convention that will let you find it easily with jQuery (for example, mine are lblHardware and lblSoftware). Make sure your convention prepends something identifying.

  3. Set the type to Single line of text.

  4. Set the default value to what you want the label to read. Refer to Figure 3-7.

    Setting up the label column

    Figure 3-7. Setting up the label column

  5. Sort your columns to put the section label where you want it, as shown in Figure 3-8.

    Put the labels where you want them to fall on the page

    Figure 3-8. Put the labels where you want them to fall on the page

  6. On your NewForm and EditForm, add a CEWP with the following code in the Source Editor:

    <script src="/scripts/jquery.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
    
      $(document).ready(function() {
        $("nobr").css("white-space","normal"); // Lets labels wrap
        $("input[title^='lbl']").closest("tr").prev().each(function(index){
           // Finds the TR that contains ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required