SharePoint 2010 – how to hide BLOG fields – using jQuery

Within SharePoint 2010, I’m making use of the BLOG site template, to create an easy-to-use communication channel for the marketing people at the client.

There are a bunch of fields – but some are only relevant to the under-lying Nintex Workflow – and so I want to be able to hide these fields :

As they are CHECKBOX fields – you can’t actually set them to be HIDDEN – via the Content Type – I tried !

Also – if you set them to HIDDEN, they’re gone from any Views, or other screens – so, I’m just wanting to hide on the NEW and EDIT pages.

The answer is to use jQuery :

• Add the JS library – and include some SCRIPT tags
• Select the section of HTML (from the DOM)
• Set to HIDE

Here’s what you need to do – step-by-step.    (thx to Ken Zheng for the idea + sample JavaScript).

This premise works the same as adding a “Content Editor WebPart” – but within the page itself – meaning that no-one will be able to accidently (or deliberately) delete it off the page.

(1) Get jQuery onto your SharePoint site

• Go to the jQuery website – and download the latest file (v1.6.4 at the moment)
• Upload this JS file to your root site (Site Collection)
• I usually upload to the “SiteAssets” folder

(2) Open the site within SharePoint Designer

• Open SPD, and ‘open site’ to the URL : eg.  http://server/SM/
• Go to the LISTS section
• Find the “Posts” list – this is what I need (blog posts)
• NB.  The list/folder may be different for what YOU are needing to do.

(3) Edit the page : NewPost.aspx

• This is the web page for the list that allows for new blog posts to be entered
• Find the HTML markup for “ContentPlaceholderMain”
• Enter the SCRIPT text within this section
• >> Include the reference to the JS
• >> Include the ‘jQuery’ syntax
• Scroll below for the specific text – to copy+paste
• This does a ‘selector’ on the TEXT that I’ve specified – and then determines the TR that it is ‘within’

(4) Repeat the same steps for EditPost.aspx

• Yep – gotta do the same for ‘Edit Post’

 

That’s it !    Make sure you SAVE the page/s you’ve edited – and you can then try it out.

See !   The fields are gone – that’s nice & easy, eh ?

==================================================

Here’s the SCRIPT you’ll need – as shown above :

<script type="text/javascript" src="/SiteAssets/jquery-1.6.4.min.js" >
</script>

<script type="text/javascript">

/*

* Hide form fields in SharePoint

*/

$(document).ready(function() {

   $('nobr:contains("Newsletter – Can Be Added")').closest('tr').hide();

   $('nobr:contains("Newsletter – Approved Flag")').closest('tr').hide();

   $('nobr:contains("Newsletter – Has Been Emailed")').closest('tr').hide();
});
</script>