Category Archives: SharePoint 2010

Pull user list property from people picker and write to separate textfield

I have previously posted a solution for pulling the email address from a people picker. This is an updated version that lets you pull any user list property (this is the built in user list in SharePoint and NOT the SharePoint Server Shared Service Provider profile) from the people picker and write it to a separate text field.

Unlike the previous solution, this one is designed for multi select people pickers.

How does it work

This solution binds to the blur event on the picker input field, and on the click event on the Check Names and Browse button. It checks to see that the picker selections resolve, and then pulls the login name form the selections. It then uses the function “getUserInfo_v2” from the file “spjs-utility.js” to get the user list information for the current selection.

The function “getUserInfo_v2” may not return all fields from the user list. If you miss some fields, you can add them to the array “arrOfFields”. Go here to learn how to find the FieldInternalName of the fields

How to set it up

Go here and download the latest version of “spjs-utility.js”

Add a CEWP below the list form in NewForm or EditForm. Read here how to add a CEWP in SharePoint 2007. In SharePoint 2010 you can add the CEWP by selectiong “Form Web Parts” from the list ribbon menu.

Insert this code in it. In line 05: replace “from” and “to” with your FieldInternalNames, and the “propertyName” with the one you want to retrieve. The “multiValueSeparator” is the separator between multiple values (if the picker is a multi select).

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="/test/Scripts/spjs-utility.js"></script>
<script type="text/javascript">

pullEmailFromPickerOnChange({from:'MyPeoplePicker',to:'Title',propertyName:'Title',multiValueSeparator:'; '});

/******************************************************
		Do not change anything below this line
*******************************************************/
fields = init_fields_v2();
function pullEmailFromPickerOnChange(obj){
	var toFind, arr, data, val;
	$(document).ready(function(){
		toFind = "div.ms-inputuserfield";
		if(!browseris.ie5up && typeof(_fV4UI)==='undefined'){
			toFind = "textarea";
		}
		$(fields[obj.from]).find(toFind).bind('blur',function(){
			$(fields[obj.to]).find('input').val('');
			arr = pullUserInfoFromPicker(obj.from,obj.to,obj.propertyName);
			$.each(arr,function(i,data){
				if(data[obj.propertyName]!==undefined){
					val = $(fields[obj.to]).find('input').val();
					if(val!==''){
						val += obj.multiValueSeparator;
					}
					$(fields[obj.to]).find('input').val(val+data[obj.propertyName]);
				}
			});
		});
		$(fields[obj.from]).find('img').bind('click',function(){
			setTimeout(function(){
				$(fields[obj.to]).find('input').val('');
				arr = pullUserInfoFromPicker(obj.from,obj.to,obj.propertyName);
				$.each(arr,function(i,data){
					if(data[obj.propertyName]!==undefined){			
						val = $(fields[obj.to]).find('input').val();
						if(val!==''){
							val += obj.multiValueSeparator;
						}
						$(fields[obj.to]).find('input').val(val+data[obj.propertyName]);
					}
				});
			},500);
		});
	});
}

function pullUserInfoFromPicker(finFrom,finTo){
	var result,	isResolved;	
	result = [];
	$(fields[finFrom]).find('.ms-formbody').find("div[id='divEntityData']").each(function(){
		isResolved = ($(this).attr('isresolved').toLowerCase()=='true')?true:false;		
		if(isResolved){	
			result.push(getUserInfo_v2($(this).attr('description')));				
		}			
	});
	return result;
}
</script>

Change the script src to match your location of “spjs-utility.js”. If you prefer to use a local copy of jQuery, go here to download v1.6.4. I have not had the time to make it work with jQuery 1.7x so you must use v1.6.4 for now.

Alexander

Truncate text in list view and add mouseover preview

Change log
19.06.2015
v1.2 for SP2007: By request fixed a bug occurring when using this in a list view with multiple web parts from the same list (same fieldinternalname), and the column position of the field is not the same for all the web parts.

19.07.2014
v1.2 for SP2010 and 2013: Small update to address a bug in IE9 and add support for paging in SP2013. Please note that I have not gone all in here – it is updated only to try to fix these bugs so there might be bugs I have not addressed. Use this code as a starting point and adapt it as you like.

08.12.2011
I have updated to v1.1 to fix a bug preventing the use of FieldInternalName for addressing the fields. Thanks to Ed MacIntosh (@cosmo132) for finding the bug.

I have previously done this article Multi line text field in list view: Shorten text and add hovereffect to view full text.

This post is an updated version to support both SharePoint 2007 and SharePoint 2010.

Features

This solution will shorten any text column (single line or multi line) in a list view to a preset length, and append “…” to indicate that the text is truncated. If the text is shorter than the “trigger length”, the cell is skipped.

How to set up

Go get jQuery v1.6.4 from here.
Note that this is NOT the latest version. I have not had the time to find out why v1.7+ does not work.

Download the code for the file “TruncateTextInListView.js” from here Note the different versions for SharePoint 2007 and SharePoint 2010.

Upload both files to a shared document library – or a folder in the root of the site (created with SharePoint Designer). Ensure all users have read access to the location.

Put a CEWP below the list view web part, and insert this code:

<script type="text/javascript" src="/test/English/Javascript/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="/test/English/Javascript/TruncateTextInListView.js"></script>
<script type="text/javascript">
	
function init_TruncateText(){
	truncateText('MultilineText',50,'');
}

</script>

Note:
You must change the “src” attribute of the script tags to point to your local copies of jQuery and “TruncateTextInListView.js”.

Parameters for the function “truncateText”

  • fieldName: The FieldInternalName for single line text fields or display name for Multi line text fields.
  • initialLength: The number of character to display.
  • inPlaceHoverText: This argument is optional and can be a text to show in place of the original text – like “hover to read”.

Ask if something is unclear.

Alexander

Compare date with today: status indicator in list view

Change log
May 03. 2013
Changes in v1.3:
Changed how the dateformat is read from “settings.dateFormat” to handle formats with four digit yyyy.

10.11.2012 Updated to v1.2 to add mouseover displaying days, hours and minutes. This update also includes the time portion of the “DueDate” in the calculation. Please note that the calculated column code must be changed if you want the time taken into account.

The CEWP code has not changes since the last release, but if you want to override the English text used in the mouseover, include this in your CEWP code (or modify in the file “HighlightRowByDueDate.js”:

var prefix = ["Due in ", "Overdue by "];
var tDays = ['day','s'];
var tHours = ['hour','s'];
var tMinutes = ['minute','s'];

30.11.2011 I had a bug that made it work for grouped views only. This is fixed in v1.1.
Only the code for the file “HighlightRowByDueDate.js” needs updating. Sorry for the inconvenience.


The first solution i posted in this blog was the Compare DueDate with Today in list view.

I have redone the solution and added support for SharePoint 2010 grouped views.

I have NOT included the mouseover “overdue by” text. If there is a demand for it, i could add it back in.

IMG

How to use

You put a CEWP below the list view web part. The actual code has been put in a separate file for use in multiple lists. The “function call” itself is placed in a CEWP below the list view web part.

The code for the file “HighlightRowByDueDate.js” is found here

Download the code and put in a text-file and place it in a shares document library (all users must have read access), or in a folder created in SharePoint Designer.

You should also put the CEWP-code in a text file in the same location and use the “Content Link” field in the “Edit web part” panel of the CEWP. This is most important in SharePoint 2010.

CEWP code

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="/test/English/Javascript/HighlightRowByDueDate.js"></script>
<script type="text/javascript">
/* Hightlight row by due date
 * ---------------------------------------------
 * Created by Alexander Bautz
 * alexander.bautz@gmail.com
 * https://spjsblog.com
 * ---------------------------------------------
 * This script depends upon functionality provided by jQuery - http://jquery.com
 * ---------------------------------------------
 * v1.2 - 10.11.2012
*/

function init_highlightOverdue(){
	var settings = {greenDays:'', // Green color for everything not yellow or red
					greenColor:"<img src='/_layouts/images/imnon.png' border='0'> ", // green image
					yellowDays:1, // Yellow color one day after due date has passed
					yellowColor:"<img src='/_layouts/images/imnaway.png' border='0'> ", // yellow inage
					redDays:2, // Red color two days after due date has passed
					redColor:"<img src='/_layouts/images/imnbusy.png' border='0'> ", // red image				
					dateFormat:'mm/dd/yy',
					identifierText:'Due:',
					replace:true};
	highlightOverdue(settings);
}
</script>

NOTE

You must change the “src” in the script tag referring the script “HighlightRowByDueDate.js” to reflect your local copy.

Parameters explained

  • greenDays: either an empty string ” to indicate “green for everything not yellow or red” or an integer (positive or negative) to indicate the “offset” to highlight green.
  • greenColor: The image or text / HTML yo mark the items as “green”.
  • yellowDays: The number of days (positive or negative) to offset the yellow marker.
  • yellowColor: The image or text / HTML yo mark the items as “yellow”.
  • redDays: The number of days (positive or negative) to offset the red marker.
  • redColor: The image or text / HTML yo mark the items as “red”.
  • dateFormat: The date format used in your calculated column (see details below).
  • identifierText: The lead-in text in the calculated column. This value is used to identify the cells to “treat”.
  • replace: true or false – should the “image” replace the text in the cell, or prepend to the value.

The calculated column

The “trigger” for the script is the lead in text in the calculated column – this text must match in the calculated column AND in the attribute “identifierText” in the settings object in the CEWP.

Note the text “Due:” in the calculated column in this example:
IMG

Note: The calculated column must be in the view to make the solution work.


Let me know if something is unclear

Alexander

Parent-child-grandchild relationship in SharePoint 2010 lists with javascript only

09.12.2011 I have updated the solution to v1.1 to let the user chose the icon (or no icon) before the “child” title. The code for the file “ParentChildResources.js”, and the CEWP code for “Parent DispForm” and Child DispForm” has changed. The new “argObj-property” “iconBefore” should be the path to the image to prepend to the “child title”.


I got this request:

Hi Alex,

I am new to SharePoint and have been struggling with steep learning curve and would really appreciate your help…

I created a parent-child-grandchild relation where I inserted a related view in the parent’s dispform to show all children and also in the child’s dispform to show all grandchildren. I’ve also followed http://geekswithblogs.net/SoYouKnow/archive/2010/12/16/creating-a-sharepoint-parentchild-list-relationshipndash-sharepoint-2010-edition.aspx to set the parent’s ID on the child’s newform using javascript but I need to take it a step further. In the child’s newform I need to retrieve the parent list’s 2nd field and use that value to build a dynamic drop down field in the child’s newform. The field items in the drop down preferably to be pulled from another list for the ease of maintenance but hard coding is also acceptable. This is probably a no-brainer for you so I hope you wouldn’t mind spending some time on it and I will make sure some donation is made . Thank you so much!

This involves putting scripts in NewForm and/or DispForm in three lists. Please follow the steps carefully.

Please note that this code is for SharePoint 2010 only.
Step 1

Create the three custom lists used in this example:

  • Parent
    This list has the Title field only.
  • Child
    Add one field of type Lookup (single choice) with the name “Parent”. This lookup should target the title field of the "Parent" list.
  • Grandchild
    Add one field of type Lookup (single choice) with the name “Parent”. This lookup should target the title field of the "Child" list.
Step 2

Download the code from here
The code is presented in individual folders so it’s easy to get the right code in the right form.

Step 3

Important:
Edit the code that goes in the CEWPs to fix the script src attributes in all files, the “childListUrl” in the DispForm code and the various “argObj” variables if your lists or fields has different names. You will have to read trough the code for the CEWPs to find the bits to change.

The file “ParentChildResources.js” does not need any modification.

Upload the code to a shared document library and maintain the folder structure (or rename the files so that you know which file goes where).

Step 4

Add CEWPs to the list forms and insert the code corresponding with the folder and file name. It is important that you use the content link option to link to the code.

To add a CEWP, go to the list, activate it by clicking in the “list area” to bring up the list tools ribbon. Select the tab “List” and “Form Web Parts”.

You find the content link option like this:
Edit the page and activate the CEWP. In the ribbon toolbar, select “Web Part Tools” and then “Web Part Properties”.

To ensure you get the correct file path, go to the document library, right click the file and select “Copy shortcut”. Paste this URL in the content link field. You might want to edit the URL to make it relative.

Note Add the CEWP below the list form.

The result should look like this

Parent
IMG
Child
IMG
Grandchild
IMG

Final words

This solution uses the Client Object Model introduced in SharePoint 2010 and therefore it will not work on previous SharePoint versions.

To keep this solution clean and simple, the last bits from the request regarding the lookup column, is kept out of this post – it will be emailed to the person requesting this article.

If there is demand for it, i will post it as an appendix to this post later on.

Hope someone can make use of this code.
Alexander

Superfish drop-down menu – built from a SharePoint list

12.01.2012 Updated to v1.4 to support anonymous access as requested by Brett Anderson.


I got this request from Larry:

Hey A,
I have a good request for you. I would like to build a menu structure using a SP List. JQuery has a plugin called Superfish http://plugins.jquery.com/project/Superfish. looks like it can create a great menu structure with multiple levels. If the menu items could be maintained in a list that would make it easier for the enduser to maintain it.
Let me know what you think.

The solution

This solution creates a menu structure that can be used with the Superfish solution, created by Joel Birch.

The menu structure is created in a standard SharePoint list. This list can hold multiple separate menus as the individual menus are identified by a “token” in the “MenuID” field.

The list that holds the menu structure can be placed in the current site, or in the root site if you want to share it between multiple sites. This list is automatically created when you first run the script:
IMG
IMG
IMG

Sample menu structure

IMG

Sample menu

IMG
You can style the menu by changing the file “superfish.css”.

Get all the files

Go here and get the superfish files

Upload all the files to a document library, or put it in a folder on the root of your site with SharePoint Designer. I have referred only the file “superfish.js” in this CEWP code example, but read the instructions on the superfish site to learn how to use the “hoverIntent.js and the other files included in the package.

In addition to these files, you will need the latest jQuery release – you find it here.

Get the latest version of “spjs-utility.js” from here. Ensure you use the one published November 6, 2011 or later.

Get the latest version of “SuperfishForSharePoint.js” from here.

The CEWP

Add this code to a CEWP where you want the menu to appear:

&lt;style type=&quot;text/css&quot;&gt;
.sf-menu li {
	z-index:9999;
}
#menuPlaceholder a {
	text-decoration:none;
}
&lt;/style&gt;
&lt;div id=&quot;menuPlaceholder&quot;&gt;&lt;/div&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/test/Scripts/SuperfishForSharePoint/Superfish/css/superfish.css&quot; media=&quot;screen&quot;&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;/test/Scripts/spjs-utility/spjs-utility.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;/test/Scripts/SuperfishForSharePoint/Superfish/superfish.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;/test/Scripts/SuperfishForSharePoint/SuperfishForSharePoint.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;

var argObj = {menuID:'MyMenu',
			  listBaseUrl:L_Menu_BaseUrl,
			  orderBy:'SortOrder'};

getSuperfishMenuData(argObj);
&lt;/script&gt;

You must change all the file path’s to reflect your local copy of the files.

Parameters explained

  • menuID: The menu identifier – used to separate the links from each individual menu.
  • listBaseUrl: The relative URL of the site where the “SuperfishForSharePoint” list resides. Use an empty string “” if you plan to have the list in the root site. The variable L_Menu_BaseUrl is provided by SharePoint and reflects the current site.
  • orderBy: The column used to order the menu items. Use “Title” for alphabetical ordering, or “SortOrder” to use the field “SortOrder”.

Please ask if you have difficulties.

Alexander

SharePoint 2010 – The view selector is back!

In SharePoint 2010 you loose the list view selector in a list view if there are more than 1 web part in the page. This makes navigating the list views very cumbersome.

I have previously created a solution for adding a view selector in these list views, but that solution was a bit clunky.

I looked at this again today, and came up with a solution for re-enabling the missing list view selector that was clean and simple – and it doesn’t even require jQuery…

This is the first article where I’m using the “SharePoint 2010 Client Object Model”.

This solution is placed in a ContentEditorWebPart (CEWP) somewhere in the page you want the list view menu re-enable in. I recommend using the “Content Link” option in the CEWP as the code might be messed with by SharePoint if you paste it directly in the CEWP’s HTML-source.

To achieve this, put the code in a text-file and place it in a shares document library (all users must have read access), or in a folder created in SharePoint Designer. You then copy the file’s url and paste it into the “Content Link” field in the “Edit web part” panel like this:
IMG

You do not get any pictures of the menu itself as it is no different from the standard list view selector.

Here is the code:
Get the code here

List all attachments when clicking the paperclip in a list view – updated version

13.09.2014 v1.71 fixes a bug where the attachment have an apostrophe in the name.


05.06.2012 v1.7 adds support for jQuery v1.7.x.


I have previously posted a solution for listing all attachments when clicking on the paper clip in a list view, you find it here.

This is an updated version with a few new features – and SharePoint 2010 support. I post it in a new article to keep it tidy.

The new features are:

  • Option to display the attachments on hover.
  • Shows the icon and the file name.
How to use

Put the code in a ContentEditorWebPart (CEWP) below the list view.

There are two different scripts, one for SharePoint 2007 and one for SharePoint 2010, but the CEWP code is shared.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="/test/English/Javascript/PreviewAtt/ListAttachments.js" type="text/javascript"></script>
<script type="text/javascript">

var argObj = {hideIdColumn:true,
			  clickToOpen:false,
			  clickMouseover:"Click to open",
			  oneClickOpenIfSingle:true};
			  
customListAttachments(argObj);
</script>

I have referred jQuery from Google. If you prefer a local copy, you find the file here.

Parameters explained

The argument object is an object literal with these attributes:

  • hideIdColumn: true to hide the ID column, false to leave it visible.
  • clickToOpen: true to open the list by clicking, false to open it on hover.
  • clickMouseover: If the previous attribute is set to true, this is the text shown when the mouse hovers over the paper clip.
  • oneClickOpenIfSingle: true to open a single attachment directly, false to list it. This requires the attribute “clickToOpen” to be set to true.
Download

Ensure you pick the correct version – for SharePoint 2007 or SharePoint 2010. You find the file “ListAttachments.js” here

Please post any bugs below.
Alexander