Category Archives: Requests

Hide menu items in list view toolbar and views in view selector

This is a short one on how to remove menu items from the “New”, “Actions”, “Settings”, and “List view’s” menu in a list or document library.

This method requires a CEWP added below the list view web part with the code, and is a “per view code” which must be added to every view where the menu items shall be removed.

I will first give a list of the “names” of the “standard” elements found in the list view toolbar menu and list view menu, then i will give an example of how to remove selected items from the menu’s.

The menu items in the “Actions”, and the “Settings” menu has these “names” (the part of the ID used to locate them):

  • _EditInGridButton
  • _ExportToSpreadsheet
  • _ExportToDatabase
  • _ViewRSS
  • _SubscribeButton
  • _AddColumn
  • _AddView
  • _ListSettings

The “New” menu (the one containing all the “New-button” for all your content types) uses “_New0” for the first “_New1” for the next and so on.

The “view’s” menu uses these names for the “standard” menu items:

  • _DefaultView
  • _ModifyView
  • _CreateView

The custom made views uses the “DisplayName” of the view to identify it.

Code for hiding elements in “New”, “Actions”, “Settings” and “View’s” menu:

<script type="text/javascript" src="/test/English/Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
/* Hide menu items in list view toolbar and views in view selector
 * ---------------------------------------------
 * Created by Alexander Bautz
 * alexander.bautz@gmail.com
 * https://spjsblog.com
 * v1.0
 * LastMod: 26.11.2009
 * ---------------------------------------------
 * Include reference to:
 *  jquery - http://jquery.com
 * ---------------------------------------------
*/

// Remove menu items - in this example all items in the "Settings" menu are removed (and therefore the menu is removed)
// This is the array of menu items to hide
var arrOfMenuItemsToHide = ['_EditInGridButton','_AddView','_AddColumn','_ListSettings'];
$.each(arrOfMenuItemsToHide,function(idx,item){	
	$("*[id$='" + item + "']").next().andSelf().remove();
});

// Views - hides "Modify", "Create" and the custom made "My Test View"
// This is the array of view's or to hide
var arrOfViewsToHide = ['_ModifyView','_CreateView','My Test View'];
$.each(arrOfViewsToHide,function(idx,item){	
	$.each($("*[id$='_ViewSelectorMenu']").children(),function(){
		if($(this).attr('id').match(item) || $(this).attr('text')==item){
			$(this).next().andSelf().remove();
		}
	});
});

// Remove the menu if all menu items are removed
$(".ms-menutoolbar").find('menu').each(function(){
	if($(this).children().length==0){
		$(this).parents('td.ms-toolbar:first').prev().andSelf().remove();
	}
});
</script>

The jQuery-library is found here. The sourcecode refers to jquery-1.3.2.min. If you download another version, be sure to update the script reference in the sourcecode.

This code can be adapted to hide elements based on group membership of the logged in user. I have written about a method to get the group collection for a user and to verify group membership here Showing or hiding list fields based on membership in a SharePoint group.

Ask if something is unclear.

Regards
Alexander

Preview metadata in list view on mouseover

12.09.2011 A new version is posted here.

30.07.2010 A major update of the script to tidy up the code and to support previewing in a image library. Please read trough the article to get the changes to the CEWP code. The solution is tested in IE 8, Firefox v3.6.8 and in Google Chrome v5.0.375.125.

22.06.2010 Small update in line 118 and 125 to prevent “star” to be appended to lookup columns.

23.03.2010 Updated the code for “Preview_DispForm_metadata.js”. This update fixed compatibility with folders (thanks to Deano for finding the bug). Added support for a mix of lists and document libraries in the same webpart page.

19.02.2010 Fixed a bug if two different document libraries were present in the same webpartpage. The file “Preview_DispForm_metadata.js” is updated. Thanks to Ben for finding the bug.

09.01.2010: Fixed a major performance issue when viewing only selected fields from the metadata. Replace the code for the file “Preview_DispForm_metadata.js” to get the latest fixes.

10.12.2009: Fixed a hard coded “hoverImg” in the code – thanks to Amy.


By request from some of my readers i have, with basis in a solution created by Paul Grenier and published on EndUserSharepoint, made a solution that preview’s metadata from a list item or a document on mouse over.

The script i used as basis previewed metadata from DispForm in a CEWP beside a calendar view.

This modification adapts it to present a “floating” pop-up on mouse over when hovering over a table row, a calendar item, or on a small image added before a selected field.

The original script, made by Paul Grenier, previewed the full form from DispForm. I have adapted it so that one can display the full form, or specify an array of columns to display.

This script can be used in plain list view, grouped list views and calendar views.

New in this version is that the ID column must be in the view (not true for calendar view). The column can be hidden in the script.

As always we start like this:
Create a document library to hold your scripts (or a folder on the root created in SharePoint Designer). In this example i have made a document library with a relative URL of “/test/English/Javascript” (a sub site named “test” with a sub site named “English” with a document library named “Javascript”):
IMG

The jQuery-library is found here. The pictures and the sourcecode refers to jquery-1.4.2.min. If you download another version, be sure to update the script reference in the sourcecode.

The sourcecode for the file “Preview_DispForm_metadata.js” is found below.

Add a CEWP below the list view and add the code – examples shown below the screen-shots.

Here are some screenshots and the CEWP code:
Plain list view – all fields
IMG

<script type="text/javascript" src="/test/English/Javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/test/English/Javascript/Preview_DispForm_metadata.js"></script>

To hide the ID column, change the CEWP code like this:

<script type="text/javascript" src="/test/English/Javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/test/English/Javascript/Preview_DispForm_metadata.js"></script>
<script type="text/javascript">
    hideIdColumn = true;
</script>

Plain list view – selected fields
IMG

<script type="text/javascript" src="/test/English/Javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/test/English/Javascript/Preview_DispForm_metadata.js"></script>
<script type="text/javascript">
    hideIdColumn = true;
    arrOfFieldsToShow = ['MultilinePlainText','Responsible'];
</script>

“hoverImg” used
IMG

<script type="text/javascript" src="/test/English/Javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/test/English/Javascript/Preview_DispForm_metadata.js"></script>
<script type="text/javascript">
    hideIdColumn = true;
    arrOfFieldsToShow = ['MultilinePlainText','Responsible'];
    hoverImg = '/_layouts/images/OPENDB.GIF';
    hoverImgDescription = 'Hover mouse over this image to preview the metadata'; // If left blank, no description is displayed in the pagetitle area
    prependHoverImageTo = 'LinkTitle'
</script>

Parameters explained:

  • hideIdColumn: true to hide the ID column. Defaults to false
  • arrOfFieldsToShow: Array of fields to show. Defaults to all fields.
    To have only a selection of fields, add to the array like this: [‘Title’,’MultilinePlainText,’Responsible’].
    To have only the value and not the label showing, add to the array like this: [‘MultilinePlainText|0’]
  • hoverImg: If you want to hover over an image and not the whole row, add the “src” to the image here. You must also set the parameter “prependHoverImageTo”.
  • prependHoverImageTo: A FieldInternalName to prepend the “hoverImg” to.
  • hoverImgDescription: A description that will be added to the page title area.

All parameters are optional.

Sourcecode for “Preview_DispForm_metadata.js” is found here

Note:

When new versions are released, they will be placed in a folder with the version number as label. Be sure to download the latest version.

If you are using a browser other than IE, right click the file and select “Save link as” or “Save linked content as…”.

Ask if something is unclear.

Regards
Alexander

Collect input from custom input fields and store in multiline plain text field

16.11.2009 Fixed an error found by Marc Verner, resulting in values returning “undefined”. This error var introduced by my previous update because i didn’t test it thoroughly…

I have added some code to show how to use this code with multiple fields. This code is commented out, but is found in lines 6, 10 and 54-63. Uncomment these lines and you are good to go with another field with FieldInternalName “MultilinePlain2”. I have also added an attribute “labelPosition”, value “above” or “before” to determine label position.

14.11.2009 Small update on alignment of the input field – thanks to Larry. There are now two options on alignment. the default is to have the label above the input-field. Comment out line 17 and activate line 19 to have the label before the input-field (note that a long label will fall behind the input-field).

I got a request that i thought was worth doing a post on. Its from Marc Verner and sounded like this:

Hey Alexander,
I currently have a MS Word based form that contains a 2 column by 10 row table where users provide up to 10 keycodes and their corresponding descriptions. I am hesitant to make 20 sharepoint variables to capture this since it will make a mess of the form – and I don’t need to query or report on these fields. Instead I’m looking for a possible solution for pre-populating a rich text field with a table template including column names. This way when a user creates a new item, they will see the familiar table and simply fill it in as per usual.
Not sure if its possible but you have really amazed me so far so figured I’d ask =)
Many thanks,
Marc

I do not like SharePoint’s rich text fields as the clutter the HTML-code to the non recognizable when editing. This solution is therefore based on generating some custom input fields and storing the result in a multi line text field of type “plain text”.

As always we start like this:
Create a document library to hold your scripts (or a folder on the root created in SharePoint Designer). In this example i have made a document library with a relative URL of “/test/English/Javascript” (a sub site named “test” with a sub site named “English” with a document library named “Javascript”):
IMG

You start with a standard multiline text field like this:
IMG

Add the script, and you end up with this:
IMG

Add a CEWP below your NewForm list-form (and EditForm if you like) like this:
IMG

And add this code:
You must replace any occurrence of “MultilinePlain” with your FieldInternalName

<script type="text/javascript" src="/test/English/Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
fields = init_fields();
// Array to create the input fileds from
var arr = ['Label 1','Long Label 2','Even longer Label 3','Label 4','Label 5'];
//var arr2 = ['Label 6','Long Label 7','Even longer Label 8','Label 9','Label 10'];

// Call the script with the array, and the FieldInternalName of the multiline text field
generateInputAndStoreInMultilineText(arr,'MultilinePlain','above',300);
//generateInputAndStoreInMultilineText(arr2,'MultilinePlain2','before',300);

function generateInputAndStoreInMultilineText(arrOfLabels,FieldInternalName,labelPosition,widthOfInputField){
if(widthOfInputField==undefined)widthOfInputField=250;
// Hide the multiline text field
$(fields[FieldInternalName]).find(".ms-formbody :input:last").hide().next().hide();
	var customInputFields = '';
	// Loop trough all "Labels" and create the input field
	$.each(arrOfLabels,function(idx,item){
		// Label position
		if(labelPosition=='above'){
			customInputFields += "<div id='customInput_" + idx + "' value='" + item + "' style='padding:2px'>" + item + "<br><input type='Text' style='width:100%;margin:0 13 0 0;'></div>";
		}else if(labelPosition=='before'){
			customInputFields += "<div id='customInput_" + idx + "' value='" + item + "' style='padding:2px;'>" + item + "<div style='text-align:right;margin: -17px 13px 0 0;'><input type='Text' style='width:" + widthOfInputField + "px'></div></div>";
		}
	});
	// Insert the custom input fields
	$(fields[FieldInternalName]).find('.ms-formbody').prepend(customInputFields);
	// Handle page refresh due to form validation, and preserve the values in the custom inputs
	$(document).ready(function(){
	// Read the values from the hidden multiline textfield
		if($(fields[FieldInternalName]).find(".ms-formbody :input:last").val()!=''){
			// Split the values
			var raw = $(fields[FieldInternalName]).find(".ms-formbody :input:last").val();
			var split = raw.split('n');
			// Insert the values in the correct "custom input"
			$(fields[FieldInternalName]).find(".ms-formbody div[id^='customInput_']").each(function(idx){
			var splitAgain = split[idx].split(': ');
				$(this).val(splitAgain[0]);
				$(this).find('input').val(splitAgain[1]);
			});
		}
	});
}

function PreSaveAction(){
var valToSave = '';
// Build the content to write to the hidden multiline field
$(fields['MultilinePlain']).find(".ms-formbody div[id^='customInput_']").each(function(){
	valToSave += $(this).val() + ": " + $(this).find('input').val() + "n";
});
// Write to multiline field
$(fields['MultilinePlain']).find(".ms-formbody :input:last").val(valToSave);

/*
// Field nr 2
var valToSave = '';
// Build the content to write to the hidden multiline field
$(fields['MultilinePlain2']).find(".ms-formbody div[id^='customInput_']").each(function(){
	valToSave += $(this).val() + ": " + $(this).find('input').val() + "n";
});
// Write to multiline field
$(fields['MultilinePlain2']).find(".ms-formbody :input:last").val(valToSave);
*/
return true; // Must return true for item to be saved
}

function init_fields(){
  var res = {};
  $("td.ms-formbody").each(function(){
	  if($(this).html().indexOf('FieldInternalName="')<0) return;
	  var start = $(this).html().indexOf('FieldInternalName="')+19;
	  var stopp = $(this).html().indexOf('FieldType="')-7;
	  var nm = $(this).html().substring(start,stopp);
	  res[nm] = this.parentNode;
  });
  return res;
}
</script>

The jQuery-library is found here. The pictures and the sourcecode refers to jquery-1.3.2.min. If you download another version, be sure to update the script reference in the sourcecode.

The script handles page refresh due to form validation, and preserves the values in the custom input fields (it reads them back from the hidden text field). The code can be used for both NewForm and for EditForm due to the same logic.

The values are stored in a proper format to present in DispForm and in list view’s like this:
IMG
IMG

Read here how to find the FieldInternalName of your field

Don’t hesitate to ask if all is not clear

Regards
Alexander

Move site actions to the left

21.02.2010: Updated the post with the code for floating the site action menu to the right on the screen (as requested by Larry).

This one proved a bit tricky because the site action menu is part of the master page.

See codeblock below for updated code. Please let me know if you find any bugs.


After i posted the solution to Move view selector to the left, i got a request from Charlie Epes for the same solution regarding the “Site Actions-menu”.

This is the default placement of the Site Actions-menu:
IMG

Here the menu is inserted after the last toplink (dynamic):
IMG


Here is how it’s done
Add a CEWP below the list view, and add this code (alter the location of the jQuery-scipt as needed)

<script type="text/javascript" src="../../Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$("table.ms-bannerframe table:first td:last").after($("table.ms-bannerframe td:last"));
</script>

Code for floating the menu to the right (replace the code supplied above with this one):

<script type="text/javascript" src="../../Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
// Site action float right
$(document).ready(function(){
	setTimeout(function(){
		siteActionFloatRight();
	},500);
});

function siteActionFloatRight(){
	var menuWidth = $("table.ms-siteaction").width();
	var doc = $(document).width();
	var win = $(window).width();
	var scr = $(window).scrollLeft();

	left = doc-win-scr+menuWidth;
	if(left<120){
		left=100;
	}
	// Move the site action menu to the new position
	$("table.ms-siteaction").css({'position':'absolute','top':0,'left':-left});	
}

// Handle resize and scroll
$(window).resize(function() {
	siteActionFloatRight();
}).scroll(function() {
	siteActionFloatRight();
});

// Make it adapt to changing document width due to expanding groups
$("td[class^='ms-gb']").click(function(){
	setTimeout(function(){
		siteActionFloatRight();
	},250);
});
</script>

Regards
Alexander

Move view selector to the left

06.02.2010 Added another method for floating the view selector on the right side of the page.


I got a request from “tecrms” that sounded like this:

As you know on all list views and document views, the view selector is on the right hand side of the menu bar. This can make it quite cumbersome for users looking at lists with many columns to change the view. A better option would be for the view selector to be on the left hand side and right hand side of the menu bar. I know I can move the view selector via SPD but would rather use a JavaScript options if one was available. Would this be something you would be interested in creating?

It’s often harder to think out the question than to actually solve the issue…

This is the default placement of the view-selector:
IMG

Here the selector is inserted after the “Settings-menu”:
IMG


Here is how it’s done
Add a CEWP below the list view, and add this code (alter the location of the jQuery-scipt as needed)

<script type="text/javascript" src="../../Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$("td.ms-toolbar:last").insertBefore($("td.ms-toolbar[width='99%']"));
</script>

Use this code for a floating menu on the right side of the page:

<script type="text/javascript" src="../../Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	viewMenuFloatRight();
});

function viewMenuFloatRight(){
	var top = $("td.ms-toolbar:last").offset().top+2;
	var menuWidth = $("td.ms-toolbar:last table").width()+15;
	var left = $(window).width() - menuWidth + $(window).scrollLeft();	
	// Position the menu
	$("td.ms-toolbar:last table").css({'position':'absolute','top':top,'left':left});
	// Paging
	$("td.ms-toolbar td[id='topPagingCellWPQ1'] table").css({'position':'absolute','top':top,'left':left-50});
}

// Handle resize and scroll
$(window).resize(function() {
	viewMenuFloatRight();
}).scroll(function() {
	viewMenuFloatRight();
});
</script>

Regards
Alexander

Requests


Post requests and questions in this post, but be patient awaiting reply or solution examples. This is a “one man blog” and i have limited time to answer questions. There will be less activity during the summer months, but i will keep posting new solutions, only on a slightly smaller scale.


I’m open to requests!
I get many ideas on things to write about from my readers, feel free to make requests on things you would like to learn more about.

I will, from the best of my knowledge (and time), answer your questions.

Post requests as comments to this post.

Updated!

Use the rating on the request to vote them up, thus “forcing” me to answer them…

The comments are split into pages with 25 top level comments per page, and the last page displayed by default. Use the links at the bottom of the page to read older comments.