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 :

image

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’

image

(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.

image

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

Smile

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

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>
Advertisements

3 thoughts on “SharePoint 2010 – how to hide BLOG fields – using jQuery

  1. Pingback: SharePoint – Use JQuery to hide columns based on a Users Group Membership | theezitguy

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