Using jQuery to fix the removal of the Title column of a list

SharePoint List items all have a Title column (although it’s display name might be changed to something else). This Title column is a string, which is unfortunate as sometimes you really don’t need a string column on a list; this was the need I faced.

You can make a Title column not required:

turn-off-title-requirement

Also, if you go to the ‘Advanced Settings’ page of your list and ‘Allow management of Content Types’ you can then go into your content types and Hide the Title column. This is okay – but the Title column is still there – it’s just being displayed with “(no title)”…

List View Showing Title

That’s not such a problem for views on a list – you can simply choose to not show the Title column. But unfortunately, some other pages (such as EditForm.aspx and DispForm.aspx) use the Title column in their title and navigation:

original-edit-form

“(no title)” sucks a bit, especially as we probably do have something better to use as a title. I decided to use jQuery to replace the “(no title)”s in the Edit and Display forms:

code

Or, as text:

<script language="javascript" type="text/javascript">
$(document).ready(function() {
var user = $("span[class='ms-entity-resolved'] > span[id='content']");
var userText = user.text();
document.title = "Users - " + userText;
var pageTitle = $("h2[class='ms-pagetitle']");
var pageTitleHtml = pageTitle.html();
pageTitle.html(pageTitleHtml.replace("(no title)",userText));
var pageLink = $("td[class='ms-titlearea']");
var pageLinkHtml = pageLink.html();
pageLink.html(pageLinkHtml.replace("(no title)",userText));
});
</script>

Here I’m getting the new title from my user field – but you might want to use another field. Whatever, the same principle of using jQuery to get the value would work.

Then I update the Browser’s title bar with the new title.

Next, I select the page title and replace “(no title)” with my new title, before writing the html back, and finally I repeat this with the “(no title)” link in the breadcrumb. The end result is:

modified-edit-form

Nice. I repeated this for my Dispform.aspx too, though not the new Item form – it doesn’t display the title at all (as a new item doesn’t have one yet!) I also added an edit button to my list so that users can still edit these items:

modified-list-view

(And yes, there are other ways of dealing with this – building proper custom edit and display forms, for example – but this is quite low effort)

Advertisement
Using jQuery to fix the removal of the Title column of a list

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 )

Facebook photo

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

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.