Monthly Archive for January, 2012

Dynamic Forms for SharePoint

Published on January 19, 2012 in Form modification, Javascript, SharePoint, SharePoint 2007, SharePoint 2010 and Utilities. 101 Comments

29.05.2012 I have published a production release here

You can no longer leave comments in this article. Please post any comments or questions in the one linked above.

29.01.2012 I have done some work during this weekend, and i see that i have underestimated the complexity dealing with other than “is equal to” in this solution. I will see what i can do about that, and will post a new version as soon as i can manage. In the meantime, stick with “is equal to”.

Please note that this solution is under development – and is still BETA. I’m almost certain I’ll have to change the configuration options – and this will break the existing “filters”. Please bear this in mind when testing this solution.

Alexander

22.01.2012
I have redone the script due to some bugs in the initial release. It should still be considered as a “beta”, but i hope as many as possible can test it and let me know the result.

I have not added any functionality over the initial release as i want to ensure the parts already in it works as expected before doing so. I have however noted these requests:

  1. DispForm support
  2. Set field value / clear field value

Alexander

I posted a teaser for my latest project in December. Now I thought it was time to post a working solution!

This solution will let you add dependent logic to your forms.
For example you could have a Yes/No check box determines whether some fields as required or not, or the status selector in a Tasks list can toggle which fields are visible or read only when you change from “In progress” to “Completed”.

Please note that the initial release is set to v0.9. I expect you to find some bugs! Please test it and comment below if you find something wrong, or you have a feature request.

All screenshots are from SharePoint 2010, but this solution is designed for both SharePoint 2007 and SharePoint 2010. I have tested it in IE7, IE9, FireFox 9.0.1 and Google Chrome 16.0.912.75.

How to set it up

Download the file “DynamicFormsForSharePoint.js” and “spjs-utility.js” from here. Please note that you will need the version dated 18.01.2012 or newer of “spjs-utility.js”. You find the files in folders with corresponding names. You also need jQuery – download i here. You may use the latest version, but i prefer v1.6.4 as it is faster in some areas. Please note that not all of my other solutions will work with jQuery v1.7x.

Put these files in a document library or a folder created with SharePoint Designer. Ensure all users have read access to this location.

This solution is set up by referring a script from NewForm and EditForm of the lists where you want the solution activated.

Add a CEWP to NewForm and EditForm like this

SharePoint 2007
Go to NewForm and EditForm and edit the URL by adding toolpaneview=2 behind the URL in this format:
…/NewForm.aspx?toolpaneview=2
…/EditForm.aspx?ID=12&toolpaneview=2

Press Enter and you should be able to add a CEWP to the page. Put the CEWP below the form web part.

SharePoint 2010
In the list view, click “List” on the List Tools menu. Then select “Form Web Parts” and pick NewForm and Editform from there and add a CEWP to the page. Put the CEWP below the form web part.

I recommend using the Content link option in the CEWP to refer the code like the example below. The CEWP code should be put in a text file (txt) or an aspx file like in the example below. This file should be put in the same location as you put the file “DynamicFormsForSharePoint.js”. You could also put the code directly in a HTML Form web part as this web part is handled in a slightly different manner in SharePoint 2010, and therefore does not mess with the script generated HTML.

CEWP setup in SharePoint 2010
IMG

The code the file CEWP.js.aspx

<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/DynRequired/spjs-utility.js"></script>
<script type="text/javascript" src="/test/Scripts/DynRequired/DynamicFormsForSharePoint.js"></script>

You must change the script src to all files so that they refer your local files.

These three scripts are all that goes in the CEWP – all configuration is done in a graphical user interface.

Behind the scenes

When this solution is first setup in a site, the configuration list is created automatically. This list is not to be hand edited, and it can be hidden using SharePoint Designer if you like.

When you configure the solution for a specific NewForm or EditForm, the configuration is stored using the site-relative URL of the form as an identifier. When a user loads the form in a browser, this configuration is read from this location and the rules are applied “on the fly”.

How to configure the solution

Note:
When manipulating required fields, you must NOT set the fields as required under list settings in SharePoint. Let this script handle it.

When the solution is set up, the only thing giving it away is the little version number in the bottom left corner of the form:
IMG
You click this version number to enter the configuration. Note that this version number is visible only if the solution has not yet been set up, or the logged in user is the one that configured the solution for this particular form in the first place.

You can however enter the edit mode manually by appending to the URL like this:NewForm.aspx?setup=1 or EditForm.aspx?ID=10&setup=1

If you set up a password protection for the configuration, you are prompted for the password when entering the edit mode:
IMG
This dialog is bypassed if there are no password.

You then enter the configuration:
IMG

You can use these field types as “triggers”:
Yes/No, Drop-Down Menu, Radio Buttons, Checkboxes (allow multiple selections) and Single line of text.

You can use the following operators to match their value

  • is equal to
  • is not equal to
  • is greater than
  • is less than
  • is greater than or equal to
  • is less than or equal to
  • begins with
  • contains
Example

The Configuration
IMG

This configuration will result i these changes to the form
IMG

IMG

IMG

Let me know if you get this solution working. I’ll update the article with any missing parts tomorrow, so please let me know if you find any bugs in the solution, or missing steps in the article.

Alexander

Bring back the missing list tools menu in list view with multiple webparts

Published on January 12, 2012 in List view modification, SharePoint, SharePoint 2010 and Utilities. 7 Comments

In my latest project I added a web part to a list view and needed to have the list tools visible. I had to look for a fix to the disappearing list tools menu.

Yes you can bring it back by clicking the web part you want to focus on, but it will be hidden initially if there are more than one web part in the page.

I digged into the sp.ribbon.js and found the “WpClick” function. Knowing that this function is called upon click on a web part, it was only a matter of finding a way to call it by code when the page loaded.

The parameter passed to the function is a click-event and i found the missing parts regarding creating a dummy click event here: http://stackoverflow.com/questions/4848892/list-tools-tab-is-no-longer-available-after-adding-webpart-to-the-page

The code looks like this:

ExecuteOrDelayUntilScriptLoaded(init_defaultWP, "sp.ribbon.js");

function init_defaultWP(){
	setTimeout(function(){
		var defaultWP = document.getElementById("MSOZoneCell_WebPartWPQ1");
		WpClick({target:defaultWP,srcElement:defaultWP});
	},100);	
}

This code must be placed in the CEWP in the list view. Change the “WebPartWPQ1″ to whatever webpart you want to activate.

Add this code to a CEWP in the page.

You might also be interested in how to show the view selector that disappears as soon as you add another webpart to a list view

Alexander

Approve multiple documents or list items in one operation with client side code

Published on January 12, 2012 in Javascript, Requests, SharePoint, SharePoint 2010, SharePoint 2010 Client Object Model and Utilities. 23 Comments

I got this request from Larry:

Good day A, Have a question. Is there an easy way to add to the SP 2010 ribbon an approve all button. I hate having to select each item and manually approve each one. I have found some script but they are deployed on central admin. I would like to a void that.

thanks

It’s not like i didn’t have anything to do, but he bought me a beer…

Here we go

This one uses the Client Object Model in SharePoint 2010 and is therefore usable in SharePoint 2010 only.

The code adds a custom button to the “Ribbon.Document” or “Ribbon.ListItem” that calls a script on the items selected using the in line checkbox.

Get the file “ApproveSelected.js” from here
Get jQuery from here

Put the files in a document library or in a folder created with SharePoint Designer. Ensure all users have read access to the location.

Insert a CEWP in the list view where you want this feature to be activated. Use the “Content Link” option in the “Edit web part” panel of the CEWP to link to the CEWP-code that you have put in a text file in the same location as the “ApproveSelected.js”.

Use this code:

<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/ApproveSelected/ApproveSelected.js"></script>
<script type="text/javascript">

var tabBtn = {btnLabel:'Approve selected',groupLabel:'Approve'};
var approvingItemsNotification = 'Approving files...';
var approvingItemsDoneNotification = '{0} items approved';
</script>

Change the path to the file “ApproveSelected.js” to match your local copy. If you prefer to use a local copy of jQuery, change that path to.

You may also change the variables if you want another text in the button or the notification messages.

It should look like this in the list view

Inactive
IMG

Active
IMG

NOTE
The button will disappear if the screen width is to narrow. The built in ribbon buttons will “shrink” to fit a narrow screen – this one will not.

Extras

This code uses a new “hack” to overcome the missing “list toolbar” when adding another webpart to the page. I’ll do a separate little article on that one.

Enjoy!
Alexander

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

Published on January 8, 2012 in Javascript, SharePoint, SharePoint 2007, SharePoint 2010, User information and Utilities. 20 Comments

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

%d bloggers like this: