Click here to Skip to main content
15,867,568 members
Articles / Web Development / XHTML

SharePoint Customization Tricks – Part 2

Rate me:
Please Sign up or sign in to vote.
4.10/5 (3 votes)
24 Jan 2009CPOL2 min read 82.8K   287   28   26
Two more tricks for SharePointers :)

Introduction

This multipart series of articles is intended to help you get ramped up with SharePoint customization. It's about modifying the default SharePoint user experience, list forms customization, branding, skinning SharePoint portals, etc. In Part 1, we introduced a generic function that can be used to hide the list view toolbar menu items (e.g., New Item, Upload, Edit in Grid view, etc.). If you haven't read it yet, I would encourage you to do that first. Here, I'll show you two other tricks for customizing the list form toolbar.

Trick #2: Hiding List Form Toolbar Menu Items!

dispform.JPG

Sometimes, you need to remove some items from the toolbar that appears at the top of DispForm.aspx. Unfortunately, the "HideCustomAction" feature can merely hide the items which have been rendered through the "Custom Action" feature framework such as Site Actions and Site Setting, so let's take the same approach we took in Part 1, which is delving back into the world of JavaScript, which I really find very handy when it comes to SharePoint customization.

The following function can be used to hide any toolbar item in dispform.aspx. Just call the function passing the names of the items comma separated (e.g., New Items, Alert Me, etc.). The function removes the items, and of course, the images rendered beside them (if found). Trick #3 will deal with where and how you can add the function to your list form.

JavaScript
hideFormMenuItems("New Item","Alert Me");
 
function hideFormMenuItems()
{  
    var titleToHide="";
    var anchorTag;
    var allAnchorTags = document.getElementsByTagName('a');
    for(var i = 0; i < hideFormMenuItems.arguments.length; i++ )
    { 
        titleToHide = hideFormMenuItems.arguments[i];
        if(titleToHide!='Alert Me')
        {
            for (var j = 0; j < allAnchorTags.length; j++)
            {
                anchorTag= allAnchorTags[j];    

                if (anchorTag.title.indexOf(titleToHide)!=-1)
                {
                    anchorTag.parentNode.parentNode.parentNode.parentNode.
                    parentNode.style.display="none";
                    anchorTag.parentNode.parentNode.parentNode.parentNode.
                    parentNode.nextSibling.style.display="none";
                    break;
                }
            }
        }
        else
        {
            for (var k=0; k < allAnchorTags.length;k++)
            {
                anchorTag= allAnchorTags[k];
                if (anchorTag.id.indexOf("SubscribeButton")!=-1)
                {  
                    anchorTag.parentNode.parentNode.parentNode.parentNode.
                    parentNode.style.display="none";
                    break;
                }
            } 
        }
    }

    var allSpanTags = document.getElementsByTagName("span");
    var spanTag;
    var toolbarRow;
    var lastCell;

    for(var m=0; m < allSpanTags.length;m++)
    {
        spanTag = allSpanTags[m];
    
    if(spanTag.id=='part1')
    {
        toolbarRow = spanTag.childNodes[2].firstChild.firstChild;
        lastCell = toolbarRow.lastChild.previousSibling;
        while(lastCell.style.display=='none')
        {
            lastCell = lastCell.previousSibling;
        }
        if(lastCell.innerText == '|')
        {
            lastCell.style.display='none';
            break;
        }
    }
}

Kindly note that the function is case sensitive, so take care of the case the toolbar item names are rendered with.

Trick #3: Adding JavaScript Through CEWP!

The content editor Web Part gives you the ability to add any valid HTML on the Web Part page you place it in, and this surely includes <script> elements. The major advantage when using the content editor Web Part is that anyone with Designer permissions can do it quickly and easily.

Nice and easy, let's do it, just go to Site Actions, Edit Page!!

p2t2_editpage.JPG

Where the heck is the Edit Page menu item?!! Just like the old version, it's not available, I’m still not sure why they did that!

Trick #3: Just append "&ToolPaneView=2" to the URL, and you will have DispForm.aspx in Edit Mode in your browser.

addContentEditor18.JPG

Add a content editor Web Part just below the Web Part that renders the list form, and insert the JavaScript of Trick #2 as shown in the figure below. (It's preferable to mark the content editor Web Part as hidden.)

addContentEditor12.JPG

addContentEditor13.JPG

Exit the edit mode…

dispformafter.JPG

Tremendous, we managed to hide "New Item" and "Alert Me". What about renaming "Edit Item" to "Edit Program" and removing "Delete Item" but leaving the small image (x)? That is what I'm going to cover in Trick #4 in the next part!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect
Egypt Egypt
Ayman El-Hattab is a Regional Technology Solution Professional focusing on helping software professionals and organizations build better SharePoint Solutions using Microsoft Application Lifecycle Management (ALM) technologies and tools. Ayman has been in this role since 2010 and has presented at many conferences all over the Middle East & Africa about ALM, SharePoint, C#, asp.net and Business Intelligence technologies. Ayman is also a Microsoft Most Valuable Professional [SharePoint MVP] , ALM Ranger, published author and an enthusiastic speaker who enjoys working with the online and offline developer communities all over the world. Ayman is the founder of MEA ALM Community & SharePoint4Arabs, community lead at Egypt SharePoint User Group and an organizer of several SharePoint Saturday events. Outside of work, Ayman can be found watching soccer games, playing xbox or watching documentary movies.

Comments and Discussions

 
GeneralDoes not work with Google Chrome Pin
JeffWG17-Jun-11 8:33
JeffWG17-Jun-11 8:33 
Generalhide other items Pin
cb1624x6-Oct-10 5:49
cb1624x6-Oct-10 5:49 
QuestionCan this be used to hide Upload and Actions menu? Pin
colecg13-Sep-10 2:40
colecg13-Sep-10 2:40 
Generaldon't know why, but... Pin
cbennett51998-Mar-10 7:55
cbennett51998-Mar-10 7:55 
QuestionHi it is working fine ..But when we will get Trick #4 from your side? Pin
Suresh Kumar.A9-Sep-09 0:13
Suresh Kumar.A9-Sep-09 0:13 
AnswerRe: Hi it is working fine ..But when we will get Trick #4 from your side? Pin
Ayman M. El-Hattab9-Sep-09 0:58
Ayman M. El-Hattab9-Sep-09 0:58 
GeneralCant get it working Pin
jerseyden13-May-09 7:10
jerseyden13-May-09 7:10 
GeneralRe: Cant get it working Pin
Ayman M. El-Hattab13-May-09 13:28
Ayman M. El-Hattab13-May-09 13:28 
GeneralRe: Cant get it working Pin
jerseyden13-May-09 20:21
jerseyden13-May-09 20:21 
GeneralRe: Cant get it working Pin
Ayman M. El-Hattab13-May-09 21:47
Ayman M. El-Hattab13-May-09 21:47 
GeneralRe: Cant get it working Pin
jerseyden14-May-09 6:06
jerseyden14-May-09 6:06 
GeneralRe: Cant get it working Pin
Ayman M. El-Hattab14-May-09 10:48
Ayman M. El-Hattab14-May-09 10:48 
QuestionRe: Cant get it working Pin
hpcdr24-Mar-10 20:00
hpcdr24-Mar-10 20:00 
GeneralRe: Cant get it working Pin
vimalkumarsinghal14-Sep-10 0:03
vimalkumarsinghal14-Sep-10 0:03 
GeneralIt works. Pin
Indrajeetkumpavat8-Apr-09 0:07
Indrajeetkumpavat8-Apr-09 0:07 
GeneralRe: It works. Pin
Ayman M. El-Hattab9-Apr-09 13:46
Ayman M. El-Hattab9-Apr-09 13:46 
GeneralProblem Pin
audunms20-Mar-09 1:19
audunms20-Mar-09 1:19 
GeneralHi ... the code is not working.... Pin
jacobsaumy14-Feb-09 22:18
jacobsaumy14-Feb-09 22:18 
GeneralRe: Hi ... the code is not working.... Pin
Ayman M. El-Hattab25-Feb-09 0:13
Ayman M. El-Hattab25-Feb-09 0:13 
GeneralRe: Hi ... the code is not working.... Pin
aly_ashour25-Feb-09 21:33
aly_ashour25-Feb-09 21:33 
GeneralRe: Hi ... the code is not working.... Pin
Ayman M. El-Hattab25-Feb-09 21:41
Ayman M. El-Hattab25-Feb-09 21:41 
GeneralRe: Hi ... the code is not working.... Pin
aly_ashour25-Feb-09 22:10
aly_ashour25-Feb-09 22:10 
GeneralRe: Hi ... the code is not working.... Pin
aly_ashour26-Feb-09 0:39
aly_ashour26-Feb-09 0:39 
GeneralRe: Hi ... the code is not working.... Pin
Ayman M. El-Hattab27-Feb-09 23:06
Ayman M. El-Hattab27-Feb-09 23:06 
GeneralRe: Hi ... the code is not working.... Pin
AhmadZia21-Jul-10 15:27
AhmadZia21-Jul-10 15:27 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.