More SharePoint Branding – Customisation using JavaScript Part 3

34 Comments on “More SharePoint Branding – Customisation using JavaScript Part 3”

1. Place a favourite in your browser with: javascript:MSOTlPn_ShowToolPane(‘2’)
   This does the same as ToolPaneView=2
   Originally by Todd Bleeker: http://mindsharpblogs.com/todd/archive/2005/02/11/285.aspx

2. I like the concept. How can I add record navigation in tool bar like top/previous/next/last record in toolbar rather than new/edit/delete or any other options?

3. This rocks man.
   It also worked well for the Calendar columns that everyone wants to hide, and worked nice and clean.

   Thanks!!

4. What can I say. Brilliant! However, you might want to improve it in a few ways. For example, if I have two fields: “Field A” and “Field AB” and I enter “Field A” as the field to be replaced, it will match both of those and hide whichever one comes first on the page. You may want to change this line of the code:

   if (arr[i].innerHTML.indexOf(FieldName) > 0) {

   To something like:

   if (arr[i].innerHTML.indexOf(‘FieldName=”‘ + FieldName + ‘”‘) > 0) {

   so that the name must match exactly. Also, you should make sure you are doing a good job of matching fields that contain dangerous punctuation, like single and double quotes, ampersands, greater than and less than, etc.

   Sometimes the fieldname and FieldInternalName

   are different, so you may want to try to distinguish b/w those, or provide 2 methods: findacontrol() and findacontrolinternal().

   Finally, it can be nice to try to group together fields, like if GroupA is resp for a set of fields and GroupB for another set of fields. In that case, you might name all GroupA fields with a prefix: “A:Name”, “A:DOB” and for GroupB: “B:Date Due”, “B:Supervisor”. Then you could add a findcontrolsbygroup() method that would search for any field that starts with a given prefix:

   if (arr[i].innerHTML.indexOf(‘FieldName=”‘ + FieldNamePrefix) > 0) {

   That way, you can take care of a group of fields at once. If you don’t like to make the titles of each field “ugly” by adding a prefix, then you could use content types/site columns and there use the prefix for each field/column, but in your list you change the name of each column to something “prettier”. Then in the code above you search by FieldInternalNameinstead:

   if (arr[i].innerHTML.indexOf(‘FieldInternalName=”‘ + FieldNameInternalPrefix) > 0) {

5. I have played around more with the techniques you described. One problem I have long had with SP lists is that calculated fields that create url always end up with UGLY links. It has to be “http://www.yahoo.com” and not Yahoo. also, all links open in the same window. I used a Content Editor web part to look for UGLY links, modify them and open them in new windows, if applicable.

   But then I create a list that grouped by a given field with the items collapsed. When I open the items of the group, none of my changes to links were made by the group by/collapsed uses ajax-like functionality. the content/links are not there when the page loads. any way to apply your techniques to both the data that is there on page load AND content that is added dynamically when you expand a group?

6. Thanks for your work which will be useful once I get it working. I have followed your instructions but nothing I do to the JS code on the webpart seems to invoke a result, error or otherwise. Have created an alert in hideFields() to test but it does not fire. Running MOSS 2007 with IE7. Any hints?

7. Hi Paul,
   Just a few weeks since I started working with SP; your site in general and this post in particular
   has being of TERRIFIC help in my learning. THANKS A LOT for your hard work and for sharing it
   with others!

8. Dennis-

   The code above uses “Fancy Quotes” and is rendered differently in the browser.

   Try installing the webpart from the Freebies tab, configuring the Feature, and extracting the source.
   Or, just replace all double quotes with shift+’ key (“).
   Heres the code (Hopefully this wont print fancy quotes)

   // Hide Fields web part by http://www.cleverworkarounds.com
   _spBodyOnLoadFunctionNames.push(“hideFields”)
   function findacontrol(FieldName) {
   var arr = document.getElementsByTagName(“!”); //get all comments
   for (var i=0;i 0) {
   return arr[i];
   }
   }
   }

   function hideFields() {
   var control;
   control = findacontrol(“Title” );
   control.parentNode.parentNode.style.display=”none”
   }

9. Hi,
   Thanks a lot for this tutorial, this was just what I was looking for.
   Now i have a doubt, I was trying to filter, by user, the part where you hide the fields to be edited.
   I made this function:

   function GetUserId()
   {
   name = document.getElementById(“zz8_Menu”).children[0].innerText;
   var username = name.substr(12);
   return username;

   }

   I tried to use it like this:

   var control;
   var user = GetUserId();

   if(user==”someusername”)
   {
   control = findacontrol(””);
   control.parentNode.parentNode.style.display=”none”;
   }

   After following your steps and changing this as i have explained, the script didn’t wok.
   Can you pinpoint me where did I made the wrong turn.

   Thanks in advance
   Zacarias Benta

10. Great work, thank you for your time. How did you get the target Audience proerties field to display? Was this done through an additional script?

11. Nevermind, I did more research and found this feature is only available on MOSS. I like post 14, is there a way to do it by groups, reading groups, or if permission are not “Full Control”

12. Awesome work, these are some of the best tutorials I have come across.
    I have a question, I have applied everything you have mentioned above and it works. The only part that is not working for me is when you give access to those who you specify. I have giving access to a group that includes myself but I am not able to see the field that is hidden. Would you know what the problem is?

    Thank you for your time.

13. This works wonderfully. Can this also be used to hide the Content Type field in the EditForm.aspx?

14. I tried to use this on EditForm.aspx but the problem is it ends up with the publishing toolbar on top of the page which shows up for whoever goes to the page. (I can’t remove it even though I click on save and publish) Any workarounds or reasons why this is happening. It works fine on the NewForm.aspx. tx

15. Another thing I noticed is that this works only on IE and does not hide the fields on Firefox (Mozilla). Has anyone encountered the same problem?

16. ISSUE: There is one major problem with adding Web Parts to any SharePoint form using the «&ToolPaneView=2 ».

    If the Publishig feature is enabled on the site, you won’t be able to publish your modified form. SharePoint will be caught in a never ending loop. I don’t know if it’s a bug or if this usecase should simply not be!

17. Excellent Solution! .. and without using SP Designer. Just wanted to know if I try to hide a field of type “People and Groups” in the same way .. it doesnt work. Anything I can append to this code to get that hidden too in Newform.aspx Thanks!

18. Look at how many times in this article you began a sentence with “So,…”! How much more of a socially conformist dork can you be?! Tacking on “So,…” and “Okay, so,…” to the front end of a sentence is asinine in the first place, but it’s also as unimaginatively passé as Seattle grunge/pussy/van Dyke beards and army boots + pant-load shorts and “I was just kind of like…”, and “Gag me with a spoon!” – not to mention those ugly little narrow-black-plastic-frame specs that twerps and their little twerpette chicks must think are cool. Get your iPhone outta your ass and your iPod outta your ear, stop linking up to the herd-mind and write something original (in English, that is!)! (This isn’t a flame – it’s a WAKE-UP CALL!)

19. Hehe, sorry but Mrs Cleverworkarounds already told me off about excessive use of “so” like…a year ago (deliberate passe pun there) and you will find all my more recent writings have eliminated that habit. 🙂

    Count the number of “so’s” in the “One best practice” series 🙂

    regards

    paul

20. Hi
    I have been using the code in a manually created WSS web part (dont have access to SPD or server) up to the point where I introduced calculated fields.
    in each case the field name displays the same while the innerfield name is correct.
    debugging using alert the table structure for control.parentNode.parentNode.innerHTML is IDENTICAL for the table elements where inner and field name
    are the same but the style.display = ‘none’ just does not get applied.

    any help would be greatly appreciated.

21. sorry – correction: works perfectly where field and inner field names are the same
    wont work where they are different.

    thanks

22. I don’t see a way to edit the source either in the browser or SPD. I am running moss. any suggestions

23. Great articles. Thanks so much!! These have been a HUGE help to me. I already
    know JavaScript and am learning Sharepoint….this information was the BIG push
    that I needed.

24. I loved the &ToolPaneView=2 hack and have used it in this example showing how add javascript to a CEWP to set the default duration for new Calender events.

    http://blog.pentalogic.net/2009/09/setting-default-duration-for-new-calender-events/

25. Hi – LOVE this approach. I’d like to see the ‘flip’ side of this regarding audiences. That is, to hide columns for everyone but show them for a particular audience. Like hide for Staff, Visitors, Contribuitors, but show for Managers and Owners.

26. The best and neatest solution is here using SPD:
    http://www.sharepoint911.com/blogs/laura/Lists/Posts/Post.aspx?ID=3

27. Working properly in MOSS 2007.
    Please tell me the steps how we can implement this same in SP 2010

28. Hi!

    This is great info! Thanks! But…
    Do you how I can do the exact opposite of this?

    In your tutorial, the “hidden” fields will only be hidden to the members of the group you specified. I wanted to do the exact opposite: hide the fields to everyone, except to those specified. Is it possible? Thanks.

29. Thanks! Very helpful

30. How about changing the redirect page after clicking the OK button and CANCEL button.. I want it to be redirected to a specific page

31. I’m looking for a similar solution to JC DLS. I can get a redirect to happen on a form load, but have no idea how to tie into the submit.

32. How about changing the redirect page after clicking the OK button and CANCEL button.. I want it to be redirected to a specific page

33. I noticed that if I had multiple fields that had the same root word, then the script would not find the exact row to hide. I modified your script to this:

    _spBodyOnLoadFunctionNames.push(“hideFields”);

    function findacontrol(FieldName) {
    var arr = document.getElementsByTagName(“!”);//get all comments
    for (var i=0;i 0) {
    return arr[i];
    }
    }
    }

    function hideFields() {
    // uncomment the next line if you are troubleshooting
    // debugger;
    var control;
    // Add the two lines below for each control to be hidden
    control = findacontrol(“”);
    control.parentNode.parentNode.style.display=”none”;
    }

    This forces the getElementsByTagName to find the line that says FieldName=””, so the whole string is matched.

34. none of the code uploaded correctly
    

    _spBodyOnLoadFunctionNames.push("hideFields");

    function findacontrol(FieldName) {
    var arr = document.getElementsByTagName("!");//get all comments
    for (var i=0;i 0) {
    return arr[i];
    }
    }
    }

    function hideFields() {
// uncomment the next line if you are troubleshooting
// debugger;
var control;
// Add the two lines below for each control to be hidden
control = findacontrol("");
control.parentNode.parentNode.style.display="none";
}