SharePoint Tips: 2011

Tuesday, April 26, 2011

Hide Sub Menus in Actions Tab – SharePoint: Part 1

Few months ago, I was asked, "Is it possible to restrict the users (even with sufficient privileges to add, edit, delete items) from Editing, adding, deleting the items using 'Edit in DataSheet' option" because the application had a Custom Form for Add and Edit and those forms had some validations. It is very obvious that with Edit in DataSheet Form all it prompts you for are very few validations such as Required Field, DataType etc, but does not support validation depending on two colums.

I felt this would make a very interesting post. Also, I believe this is a very common requirement many customers would like to have it. My first option as always (as most of them would expect as per my previous posts) was to have a javascript fucntion to implement this.

Add a Content Editor WebPart to the Lists "All Items.aspx" page, where you would have the option "Edit in DataSheet", Export to Spread Sheet" etc under Actions Tab.

In the Content Editor WebPart Click Edit --> Modify Shared WebPart --> Source Editor --- Paste the below Script.

<html>
<head>
<script type="text/javascript" language="javascript">
HideDataSheet();
function HideDataSheet()
{
var vMenu = document.getElementsByTagName('menu');
for(var k = 0; k < vMenu.length; k++)
{
var vMenuItem = vMenu[k].getElementsByTagName('ie:menuitem');
for(var i = 0; i < vMenuItem.length; i++)
{
if(vMenuItem[i].getAttribute("text") == "Edit in Datasheet" || vMenuItem[i].getAttribute("text") == "Export to Spreadsheet")
{
vMenuItem[i].setAttribute("hidden",true);
}
}
}
}
</script>
</head>
<body>
</body>
</html>

Save the Content and click OK.

Now When you click on Actions Tab you will observe that the two options "Export to Spread Sheet", "Edit in DataSheet" no longer appear.

This script is tested across different browsers: IE, Firefox, Chrome and it works as expected. However, Please note that you wouldn't be seeing the Option "Edit in DataSheet" in browsers other than IE even without the above script as there is a default script which checks if the browser is IE or not.

Similarly, this script can be used to hide any other Sub menus. Please make sure that you replace the Title you are looking for with the one marked in Red.

A few more queries and its resolution with respect to this feature in my next Post.

Thank you!

Wednesday, February 9, 2011

Hiding Form Controls on selection Change in a Custom List Form (Attach Javascript to Form Controls) – No Server Side Code

Here is a very Simple requirement which many users would like to have it. Say for instance when the New Item Form of a SharePoint List is loaded, the user would be displayed with all the controls (Form Controls), among these controls we have a Choice field of type radio button and Titled “Location”. The values in the Choice Field read as “USA” and “Other”.

So if he user selects “USA” we need to display another Choice Field of type “Dropdown” Titled “State” (which contains all states of USA) and display a Multiline Textbox to Key in Country, State when “others” is selected**. The data should be saved back to the List

To do this we first we need to create a Custom List Form (Creating a Custom List Form is out of scope of this post). Place the form in a Table (if you don’t have a Table already) and ID as ’tblDataTable‘. Now add ID’s to the rows which contains the controls to be hidden and shown. In this example I have it as ‘trLocation‘ and ‘trNote‘. Once we are done with it, we need to attach a Javascript fucntion to the Radio Button: The code marked in Brown color below is how we attach the javascript function to the click event:

<script type="text/javascript" language="javascript">
_spBodyOnLoadFunctionNames.push("hideLocations");
function hideLocations()
{
var vTblDataRow = document.getElementById('tblDataTable');
document.getElementById('trLocation').style.display = 'none';
document.getElementById('trNote').style.display = 'none';
if(typeof(vTblDataRow) != 'undefined')
{
var vControls = vTblDataRow.getElementsByTagName('input');
if(vControls.length > 0)
{
for(var i=0; i < vControls.length; i++)
{
if(vControls[i].type == 'radio')
{
vControls[i].onclick = function NewFunction()
{
var vlblRadioValue = this.nextSibling;
if(vlblRadioValue.innerText == 'USA')
{
document.getElementById('trLocation').style.display = 'block'; document.getElementById('trNote').style.display = 'none';
}
else if(vlblRadioValue.innerText == 'Others')
{
document.getElementById('trNote').style.display = 'block'; document.getElementById('trLocation').style.display = 'none';
}
else{//Add additional functionality if you wish}
}
}
}
}
}
}
</script>

Add this Code to the page which hosts the Custom List Form or alternatively you can add a content Editor WebPart which holds this code and you are all set to go.

Note: You may have to add few more additional lines of code to in those if else conditions to satisfy more requirements such as the Dropdown Containing State should not be updated after clicking “Ok” (Submit) Button when “Others” is selected. so in the Conditional braching we need to clear of the selection for State Dropdown.

Thanks for Visiting my blog!

**This is just an example and the actual requirement can be more realistic.

Pages

Tuesday, April 26, 2011

Hide Sub Menus in Actions Tab – SharePoint: Part 1

Wednesday, February 9, 2011

Hiding Form Controls on selection Change in a Custom List Form (Attach Javascript to Form Controls) – No Server Side Code