This multipart series of articles is intended to help you getting 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, I introduced a generic function that you can use to hide the list view toolbar menu items (e.g. New Item, Upload, Edit in Grid view, etc.). In Part 2, I showed you how to remove items from the list form toolbar. If you haven’t read both posts yet, I would encourage you do to that first .

After posting the previous articles, I received a lot of e-mails from SharePointers asking how to rename the items in the list form toolbar. That’s why I decided to write Part 3 in the series. After I finished writing the article and taking some snapshots, another SharePointer asked me on MSDN Forums if it’s possible to remove the Text while retaining the images, for instance, removing “Delete Item” while retaining the (X) rendered beside it. Today I’ll show you to do both tasks by JavaScript.

Trick #4: Renaming List Form Toolbar Items!

Sometimes, you need to rename some items in the toolbar rendered at the top of DispForm.aspx to match the List Name. For instance, you have a custom list named “Programs” that stores the courses offered by a university. It would be better to have “New Program” rather than the default “New Item” and “Edit Program” rather than “Edit Item”. Sometimes, you just need to totally delete the text and just leave the images with a tooltip that explains the action performed on clicking them.

Before

After

This function can be used to achieve both tasks, just call the function passing the old and new names of the item. For instance if you need to rename “Add Item” to “Add Program”, use renameFormMenuItems(“Add Item”,”Add Program”);. In case you need to remove the text and leave the image, call the function passing an empty string as the new name as follows: renameFormMenuItems(“Delete Item”,””);.

Download Function from here

Kindly note that the function is case sensitive, so “New Item” will work while “nEw iTeM” is not gonna work.

Nice and easy, isn’t it?

Now a question is imposing itself, how can we use this function? The answer is the content editor web part; please refer to trick #3 in the previous article for more information.

What about hiding the toolbar altogether?

There are a lot of solutions that imply unghosting the page using SharePoint Designer, but I don’t prefer those solutions! Again, let’s perform this task using JavaScript. I’ve included two functions in the zip file, one for renaming the toolbar items and the other for hiding the toolbar altogether! Waiting for your feedback.

This multipart series of articles is intended to help you getting 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, I introduced a generic function that you can use to hide the list view toolbar menu items (e.g. New Item, Upload, Edit in Grid view, etc.). In Part 2, I showed you how to remove items from the list form toolbar. If you haven’t read both posts yet, I would encourage you do to that first .

After posting the previous articles, I received a lot of e-mails from SharePointers asking how to rename the items in the list form toolbar. That’s why I decided to write Part 3 in the series. After I finished writing the article and taking some snapshots, another SharePointer asked me on MSDN Forums if it’s possible to remove the Text while retaining the images, for instance, removing “Delete Item” while retaining the (X) rendered beside it. Today I’ll show you to do both tasks by JavaScript.

Trick #4: Renaming List Form Toolbar Items!

Sometimes, you need to rename some items in the toolbar rendered at the top of DispForm.aspx to match the List Name. For instance, you have a custom list named “Programs” that stores the courses offered by a university. It would be better to have “New Program” rather than the default “New Item” and “Edit Program” rather than “Edit Item”. Sometimes, you just need to totally delete the text and just leave the images with a tooltip that explains the action performed on clicking them.

Before

After

This function can be used to achieve both tasks, just call the function passing the old and new names of the item. For instance if you need to rename “Add Item” to “Add Program”, use renameFormMenuItems(“Add Item”,”Add Program”);. In case you need to remove the text and leave the image, call the function passing an empty string as the new name as follows: renameFormMenuItems(“Delete Item”,””);.

Download Function from here

Kindly note that the function is case sensitive, so “New Item” will work while “nEw iTeM” is not gonna work.

Nice and easy, isn’t it?

Now a question is imposing itself, how can we use this function? The answer is the content editor web part; please refer to trick #3 in the previous article for more information.

What about hiding the toolbar altogether?

There are a lot of solutions that imply unghosting the page using SharePoint Designer, but I don’t prefer those solutions! Again, let’s perform this task using JavaScript. I’ve included two functions in the zip file, one for renaming the toolbar items and the other for hiding the toolbar altogether! Waiting for your feedback.

Introduction
This multipart series of articles is intended to help you getting 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 do to that first. Today I’ll show you another two tricks for customizing the list form toolbar.

Trick #2 : Hiding List Form Toolbar Menu Items!

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).
Download hideFormMenuItems.zip – 755 B , Trick #3 will deal with where and how you can add the function to your list form.

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 and this surely includes ”

Where the heck is 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 the Edit Mode in your Browser.

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

Exit the edit mode…

remendous, 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!

This multipart series of articles is intended to help you getting ramped up with SharePoint Customization. It’s about modifying the default SharePoint user experience, list forms customization, branding, skinning SharePoint portals, etc. When I looked around the “SharePoint Landscape”, I noticed the lack of documented experiences in the SharePoint customization area and thus this multipart series of articles was born.

Prerequisites
First you need to have prerequisite skills in .NET Development and in particular ASP.NET Development, you should also have basic understanding of JavaScript, SharePoint and how to use it from the User Interface and of course you should have some experience in using the SharePoint customization tool (SharePoint Designer).

Trick #1 : Hiding List View Toolbar Menu Items!

I’ve gone through SharePoint projects on different scales; a common requirement among most of these projects is hiding some menu items that are implemented by default within the framework of SharePoint. The obvious choice from the SDK is HideCustomAction ! After digging through theweb, I found out the following:

• The “HideCustomAction” feature can merely hide the items which have been rendered through the “CustomAction” feature framework such as Site Actions and Site setting…. etc.
• ECB (Context Menu) items are rendered by JavaScript from Core.js file so we can’t hide them via “HideCustomAction” feature. However, you can add a new menu item in the ECB menu through “CustomAction” feature and hide it again through The “HideCustomAction” feature. In other words,” HideCustomAction” feature can be used to hide the ECB menu items that you created via CustomAction but can’t be used to hide the out of the box menu items.
• The ListViewWebPart menu items ( New menu, Upload menu, Actions menu,… etc ) are rendered through a class library as a web control from the Microsoft.SharePoint.dll so they can’t be hidden through The “HideCustomAction” feature.

Hmm, I thought of delving back into the world of JavaScript and I came up with some generic functions that can be used to hide any menu item in SharePoint and I decided to share them with the community.

You can download hideListViewToolbarItems fumction from :

https://www.codeproject.com/KB/sharepoint/sharepoint-customization.aspx

You can use this function to hide any menu items rendered in the ListViewWebPart toolbar which is used in the list view pages, just call the function and pass the menu item names ( comma separated ) as they appear in the toolbar ignoring the case. Only one exception to that when you need to hide “Create View” which appears twice one in “List Settings” and the other one in the view selector, in order to resolve this conflict just call the function as follows : hideListViewToolbarItems(“settings:create view”) or hideListViewToolbarItems(“view:create view”).