Skip to content

Adding Group Headers and Using The Same Displayed Name for Multiple Fields in SharePoint 2010

by on April 20, 2012

In order to create a form with Grouped content (add a number of people, vehicles, etc) with multiple properties of the same name, we need to use a bit of fancy jQuery footwork. While you can make a custom form, this will eliminate the need to maintain forms when changes are made in future.

The Outcome:

image

 

The Code:

Javascript File

Create a document called mylistname.js in your preferred javascript library (I like to keep all mine in the style library in a specific theme folder if there is one) and add the content below. While the “month” and header code below is specific to my form, you should be able to change them to match the field titles you have.

$(document).ready(function() {

    //remove –# from month labels
    $(‘td.ms-formlabel > H3:contains("–1"), td.ms-formlabel > H3:contains("–2"), td.ms-formlabel > H3:contains("–3")’).each(
        function(index){
            var s = $(this).text().substring(0,$(this).text().length-4);
            $(this).html(s);
        }
    );
    //add headers and change resource group labels
    $(‘td.ms-formlabel:contains("IS Resource Group 1")’).parent(‘tr’).before("<tr><td style=’background:#C3C3C3; font-weight:800; text-transform:uppercase; padding:5px;’ colspan=’2′>IS Resource Hours Initial Estimates (if known)</td></tr><tr><td style=’background:#E1E1E1; font-weight:800; text-transform:uppercase; padding:5px;’ colspan=’2′>IS Resource Group 1</td></tr>").find(‘h3’).text(‘Group Name’);
    $(‘td.ms-formlabel:contains("IS Resource Group 2")’).parent(‘tr’).before("<tr><td style=’background:#E1E1E1; font-weight:800; text-transform:uppercase; padding:5px;’ colspan=’2′>IS Resource Group 2</td></tr>").find(‘h3’).text(‘Group Name’);
    $(‘td.ms-formlabel:contains("IS Resource Group 3")’).parent(‘tr’).before("<tr><td style=’background:#E1E1E1; font-weight:800; text-transform:uppercase; padding:5px;’ colspan=’2′>IS Resource Group 3</td></tr>").find(‘h3’).text(‘Group Name’);

});

Content Editor on Form Pages

Add a content editor to the form pages to pull in the newly minted javascript file.

  1. Go to the List
  2. Ribbon > List tab > Customize List section > Modify List Forms
  3. Select the list you want to edit NOTE: You will need to repeat the steps below on the Edit & Display formsimage
  4. Click on the link to Add a Web Part
  5. Select the category Media and Content > Content Editor web part > Click Add
  6. Click your cursor where it says Click Here to Add New Content
  7. When the contextual Format Text tab appears in the ribbon, click on the Edit HTML Source button to open the HTML edit windowimage
  8. Since SharePoint can remove tabbing and change code if it decides the syntax is incorrect, we are going to link to the file. You can also use the Content Link functionality of this web part, but I often link to multiple js files and would rather just have one Content Editor Web Part on the page.
  9. In the HTML editor, link to the file you have created by using standard .js linking script tag. In the code below, I am linking to both spservices and my custom file.

<script src="/style%20library/mytheme2012/js/jquery.spservices-0.6.2.js" type="text/javascript"></script><script src="/style%20library/mytheme2012/js/mylistname.js" type="text/javascript"></script>

Hide the Web Part

Since the web part just contains code, we don’t want a title or border, so  just change the chrome to none.

  1. Web Part Dropdown Menu Arrow > Edit Web Part
  2. In the content editor Web Part Properties box that pops up, expand Appearance
  3. At the bottom of the section, set Chrome Type to none
  4. Click ok
  5. Now that you are done with the form, you can click on the Stop Editing button to return to the list and repeat these steps on another form!

Admire your work! ^_^

Advertisements
Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: