Wednesday, April 7, 2010
jQuery to the Rescue: Labeled Sections on Default Forms
Author: Jim Bob Howard
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?
Something like this:
It’s a fairly simple process with jQuery.
- Add a column to your list for each label you want.
- Name each label with the same convention that will let you find it easily with jQuery (e.g. mine are lblHardware and lblSoftware). Make sure that your convention prepends something identifying.
- Set the type to "Single line of text."
- Set the default value to what you want the label to read.
- Sort your columns to put the section label where you want it.
- On your NewForm and EditForm, add a CEWP with the following code in the Source Editor:
- DispForm renders differently, so add a CEWP with the following code in its Source Editor:
Hardware label will appear below IP/Computer Name and above the next set of columns
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/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]").parent().parent().prev().each(function(index){
// Finds the TR that contains the label (change lbl to your prepend convention)
var lblText = $(this).next().find("span > input").val();
// Gets the label text (the default value)
$(this).parent().before("<tr class='ms-SPButton ms-WPAddButton'>" +
"<td nowrap=true valign=top width=100% class='ms-formlabel' colspan=2>" +
"<h3 class='ms-standardheader ms-WPTitle'>" + lblText +
"</h3></td></tr>"); // Adds a TR formatted as label
$(this).parent().hide(); // Hides the default TR
});
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("nobr").css("white-space","normal"); // Lets the labels wrap
$("a[name^=SPBookmark_lbl]").parent().parent().parent().each(function(index){
// Finds the TR that contains the label (change lbl to your prepend convention)
var lblText = $(this).find("td#SPFieldText").text();
// Gets the label text (the default value)
$(this).before("<tr class='ms-SPButton ms-WPAddButton'>" +
"<td nowrap=true valign=top width=100% class='ms-formlabel' colspan=2>" +
"<h3 class='ms-standardheader ms-WPTitle'>" + lblText +
"</h3></td></tr>"); // Adds a TR formatted as label
$(this).hide(); // Hides the default TR
});
});
</script>
You’re done.
Changing Labels
Because the end user is never presented with the lbl* field to modify, only a list maintainer can change the labels.
In List Settings, the maintainer can change the order, change the groupings under each label, and/or add a new one using Steps 1-4 above.
Author: Jim Bob Howard
Jim Bob Howard is a web designer / web master in the healthcare industry. He has been working with SharePoint only since March 2009 and enjoys sharing what he has learned. You can email him at [email protected].
View all entries in this series: JimBobHoward - jQuery to the Rescue»
Entries in this series:
- jQuery to the Rescue - Automate All Day Event
- jQuery to the Rescue - Default Text Based on Radio Button Click
- jQuery to the Rescue: Writing a Survey ID to a List on Response Creation (w/o Workflow)
- jQuery to the Rescue: Requesting a review only once per user
- jQuery to the Rescue: Displaying/Hiding Content based on User Permissions or "When Edit Items permissions don't work..."
- jQuery to the Rescue: Labeled Sections on Default Forms
Is it me or jQuery keeps saving the living life out of SharePoint 2007?
I think it’s just you.
Great article. Need to try this out!
Very nice Jim Bob! Thanks-
Charlie Epes
Buffalo, NY
Hi Jim Bob
Great article – I thought there had to be a better way of doing that what I was doing.
I am gonig to try this right now.
Regards
Iain
Hi Jim Bob
Just tried it – just brilliant.
Iain
Hi Jim Bob
Back again.
I would also like to add in some CSS Code to keep with our branding initiative.
I tried adding the following below the tag
.lblText
{
font-size:8px;
text-align:center;
color:#D8D9DA;
background-color:#3F779A;
margin:0;
}
Nothing happened – what did I do wrong?
Iain
Since you’re working with an ID, it should be #lblText. If it was a class name, you would use .lblText.
Let me know if that does it for you.
Blessings,
Jim Bob
PS: Of course, that has to be wrapped in tags…
“style” tags, that is… ;)
Hi Jim Bob
Thanks – not being a programmer, I dont know those things – I just looked at other examples, so thanks for that pointer.
Yes, I have the style tags there – this is what I have:
#lblText
{
font-size:8px;
text-align:center;
color:#D8D9DA;
background-color:#3F779A;
margin:0;
}
What I did notice when I saved was a very quick flicker to what looked like the change, then it went back to normal.
Any ideas ?
Iain
See my comment to Charles below…
I need to ask a very pedestrian question:
Can I merely place the CSS at the bottom of the JQuery in one CEWP?
#lblText
{
font-size:8px;
text-align:center;
color:#D8D9DA;
background-color:#3F779A;
margin:0;
}
Yes, as long as it’s inside style tags, that should work. Or you can include it all as a style attribute on the span tag.
Be sure to remove my class references, though: since CSS “cascades,” inline styles are applied last and therefore have the highest priority. Inline class and style attributes that conflict with one another will often yield unpredictable results.
Hi Jim Bob
I dont understand when you say to remove your class references.
Iain
I will upstage Iain in his claim of not being a programmer… I’m a code luddite.
With your JQuery for the New and Edit Forms, could you insert Iain’s CSS in the right spot so I can see how the entire JQ and CSS should read? Thank you very much.
Signed,
Pedestrian User Charlie
Morning
This is what was placed within the CEWP
$(document).ready(function() {
$(”nobr”).css(”white-space”,”normal”); // Lets labels wrap
$(”input[title^=lbl]“).parent().parent().prev().each(function(index){
// Finds the TR that contains the label (change lbl to your prepend convention)
var lblText = $(this).next().find(”span > input”).val();
// Gets the label text (the default value)
$(this).parent().before(”" +
“” +
“” + lblText +
“”); // Adds a TR formatted as label
$(this).parent().hide(); // Hides the default TR
});
});
#lblText
{
font-size:8px;
text-align:center;
color:#D8D9DA;
background-color:#3F779A;
margin:0;
}
great solution !
I would also like to know if there is away to change the color / formatting of the label. we are using the obsidian theme and orange labels with red text are unreadable.
Dear Netta,
You’ll have to play with the classes to get it the way you want.
The core.css sets the TD font color for .ms-WPTitle to #4C4C4C, which is a darkish grey. But the Obsidian theme overrules that and make it #FB8C3C, which is an orange very similar to the background color gradient of .ms-WPAddButton on the TR.
Remember that CSS stands for cascading style sheets and inline styles come last in the cascade and therefore overrule any styles they impact. Which means…
You can set the font color of the label text by adding style=’color:{your color: name or hex value}’ to the H3 tag in the jQuery code above.
IOW, change:
h3 class=’ms-standardheader ms-WPTitle’
to:
h3 class=’ms-standardheader ms-WPTitle’ style=’color:#4C4C4C’
In edit mode, the Site Actions button uses white text on this color background, so you might play around with it to see what color works best.
Hope that helps.
Blessings,
Jim Bob
Hi Jim Bob, very cool solution that works perfect on my NewForm.aspx. However, when I go to add this trick to the EditForm and DispForm pages, only the yellow row appears where my lbl headings have been placed. My header text from the default value field is no where to be found. I verified that I am using the correct source code for each form. Any ideas why this could be happening?
FYI…I ended up using SPD 2007 to customize the default forms because I couldn’t figure out how to add the content editor web part directly to the forms without SPD. WSS 3.0 limitation? Not sure if that has anything to do with my problem. Thank you for any help you can provide.
Thanks!
Ryan
Ryan,
To add the CEWP w/o SPD, you have to get into ‘edit’ mode for the page. To do that, add this to the querystring of your URL: &PageView=shared&ToolPaneView=2, right after the ?ID=n, deleting everything else to the right of that. Then you can “Add a Webpart” and choose “Content Editor Web Part” to add to the page.
As for why your text isn’t showing up… that’s going to be hard to diagnose remotely. But, if it works for NewForm, it should work for EditForm. It’s not likely that adding the CEWP from SPD is the problem because the default form will render the same way.
Perhaps do a “View Source” on your page and search for your label text to see if it’s showing up at all?
Blessings,
Jim Bob
PS: Feel free to email me further questions and/or post them to Stump the Panel.
Ryan,
See my reply to Bill below. I’d venture that your situation is the same.
Blessings,
Jim Bob
Thanks Jim Bob. I just tried your solution and that is exactly what the problem was. After testing it on one record, I modified the others and it works! Thanks for you help!!!
Excellent!!!
Glad to hear it.
Blessings,
Jim Bob
I have a similar problem. It works fine with the NewForm but on the EditForm the header shows but not the text.
Bill,
Are you using a theme other than the default? Can you email me a screenshot?
Also, right-click and do a “view source.” Include that in the email if you can. Thanks!
Blessings,
Jim Bob
Using Lacquer theme. I have items you asked for but can’t find your email. Please advise.
Thanks, Bill
After troubleshooting with Bill, we realized that the record he was using to test the EditForm was one that was created before he added the label columns, which means they didn’t have the default text to be used for the Section Labels.
If this is your situation, too, you can remedy your “old” records by following these steps:
Create a list view based on All Items, and adding all of the lbl* columns to the view
Click Actions > Edit in Datasheet
From here, you can enter the label text for each Section Label for each record
To expedite the process, enter all labels in the top row only, then
Highlight all of the cells in each of the lbl* columns (NOT any of the others), including the ones you just entered (This will be easiest if all of the lbl* columns are grouped together.), and
Press Ctrl-D, which will Fill down and copy the data in with whatever is in the topmost selected cell(s)
Delete the view you created, since you won’t need it anymore.
Now all old data is fixed, and all new data will get the labels by default.
Blessings,
Jim Bob
Hi Jim Bob
I see others are having the same problem as me.
I added in another label and all I get is the bar – no text.
I did play around a little bit and got the title with a text box next to it. All the other labels had the values in them – this one didnt.
I also noticed that when trying to do other things like change a record and save it – nothing would happen. I had users calling me to say nothing was working. I deleted the field and everything worked.
Not sure what is going on as I have three label in use and they work great.
Any ideas ?
Iain
So three work and one doesn’t? Odd.
Is it the first column, perhaps? The only other thing that comes to mind is that there is a conflict with the text you’re trying to display. And if the jQuery is running into an error, that would probably explain why it wasn’t saving.
Can you shoot me a screen-shot of what it’s doing and what is supposed to be in the field?
Blessings,
Jim Bob
Should this also work in 2003? Doesn’t seem to for me.
Yes, Robert, it should. That’s what I have.
How far are you able to get with it? Maybe I can help troubleshoot.
Blessings,
Jim Bob
Let me try one more time before I take much of your time.
Okay. I tried each of the codes provided on both the display and edit forms with no luck.
FYI, I did not change “lbl” or any text in the web part code since I used the “lbl” convention.
Steps I took:
Put page in edit mode. Appended ?toolpaneview=2
Added CEWP
Posted code is Source Editor.
My field name is: lblAdminUseOnly
Robert,
When putting the page in edit mode, did you also include &PageView=shared ?
Did you move the CEWP to the bottom of the page?
Is anything happening?
Are your getting any sort of error in the status bar?
Let’s move this over to STP; let me see what your HTML looks like; perhaps that will help.
Blessings,
Jim Bob
Hi Jim,
How do I make this code to work with surveys? I tried as it is and it is rendnering the label and textbox rather then as a heading.
Oh, Shalin! That’s a big can of worms!
First, you’ll have to notice that if you have a branched survey, the first page will be a NewForm page. Every branch after that will be an EditForm page.
Then, you’ll have to search the HTML source to determine how the field is drawn on a survey. And whether it’s the same every time. And then build jQuery that finds the right field in that structure.
It’s (probably) doable, but not as straight-forward as this one.
Post it out on STP and we can talk it out there.
After looking at Shalin’s post on STP, I was able to walk through massaging the jQuery to work with a Survey.
Follow the discussion on Stump the Panel
Blessings,
Jim Bob
Let’s try that link again:
http://www.endusersharepoint.com/STP/viewtopic.php?f=10&t=1080&p=4082
This is a great tip. If I could only get it to work…
I get the hidden row, just not getting any text in there. So not sure where I am supposed to enter the text. I guess that it comes from the actual columns them self since that’s the only way to have multiple ones in the same list, such as Hardware and Software in your example. So the script just removes the lbl tag and keeps the Hardware and Software? Mine doesn’t do this.
I put CEWB at bottom. If I get it to work will it allow spaces in the text? Thanks in advance…
Dear Chris,
This works by faking out the user when he creates a new item. The script doesn’t care what name of the column is (except that it begins with ‘lbl’), it’s the value of that column that matters.
And, if you’re looking at old items, that column will be empty unless you go into Data Sheet View and add it in. For new items, it’s filled in by default and hidden so the user can’t change it. He also can’t change it on the EditForm because it’s hidden. It can only be changed in Data Sheet View.
Hope that clarifies a bit.
Oh, and yes, since it’s the data and not the column name, it can have spaces.
Blessings,
Jim Bob
I know this has been out for a while, but I just found this and it was really helpful so I wanted to say thanks. Also, I found a little tweak to this I wanted to share: adding an id to the newly inserted row.
All I did was add another variable and assigned it the title of the label field:
var trID = $(this).next().find(”span > input”).attr(”title”);
Then I
$(this).parent().before(”" +
“” +
“” + lblText +
“”); // Adds a TR formatted as label
Sorry, I accidentally hit submit before I finished properly editing.
So, I then added the variable to the jQuery that creates the new row:
$(this).parent().before(”" +
“” +
“” + lblText +
“”); // Adds a TR formatted as label
This means that every label row has an id attached to it. Why go through this effort? Because it allows cool tricks like this:
$(”#lblSectionOne”).prev().nextUntil(”#lblSectionTwo”).hide();
which would hide all of SectionOne in one step.
Oh, and how do we post code in these comments, or can we?
HTML code is hard to paste here. It’s much easier on STP because you can wrap it in < code > tags.
To continue following this discussion, see Carlos’ post on STP:
http://www.endusersharepoint.com/STP/viewtopic.php?t=2087&p=8200#p8200
I’ve tried this and it’s works wonderfully on the new item and display forms, but the edit form doesn’t seem to work. When I go into edit mode on the page and add the webpart – at first it looks good. The dividers show up and all is well and I exit edit mode for the page, but when I go back into the Edit Form, it’s busted. The divders are showing up like regular text fields and it actually takes all the other fields and puts a label over the top of the input field (same name as column).
It’s really weird. I end up having to delete the webpart off the Edit Item form. The only thing I can think of that is different is that I am using Content Types. Could this cause the issue when trying to add this bit of code to the Edit Form page?