Category Archives: Javascript

Form modification, Javascript, SharePoint, SharePoint 2007, SharePoint 2010, Tabs, Utilities

Dynamic Forms for SharePoint – Now with Tabs

August 13, 2012 Alexander Bautz 307 Comments

Change log

May 06. 2013
I have released v2.95 – you find it here
February 20, 2013 Updated to v2.70 with these changes:

Fixed bug where the tab setup link is missing in initial setup.
Added “show field description when readonly” switch under “Misc” section.
Added support for SP 2013.
Small change to the file default.css to remove form background color in SP 2013 (goes better with the SP 2013 look).
Added error handling when using invalid characters in the custom css setup in the heading configuration and including.
Added support for rules comparing date columns against other date columns in the form, or validation of empty / not empty date columns.

vLookup for SharePoint 2010

July 21, 2012 Alexander Bautz 195 Comments

16.02.2013 Updated to v1.3 with these changes:

Added more options to process the values pulled back from the query. In addition to the previous substring, you can now have prefix and suffix and additional date formatting options. Hover over the help icon to learn more. Please note that you must reconfigure any existing “substring setup” after upgrading to v1.3.
Added support for hyperlink columns.
Added count to the “Action menu”.
Fixed bug with “hide field” when using a text string enclosed in curly braces in the “In URL” configuration.

25.01.2013 Updated to v1.26 Added option to split the string by a specified separator, returning a selected array index.

30.11.2012 I have updated to v1.23 to fix a compatibility issue with Office 365 for SP2013.

18.11.2012 Updated to v1.22 and added some video tutorials:

Please note that this requires v1.22 of vLookup_sp2010.js

08.11.2012 v1.2 fixes some bugs and adds some new features.
Bugs fixed:

Removed an extra “/NewForm.aspx” from the url generated in the “addChild” function.
When creating a child in a subsite or a parent site, the setting of values from the “parent item” failed due to a wrong baseUrl parameter in the URL.

Features added:

As suggested by “advacomp”, added an option to use a text string to set a field in the child list. See instructions on the help icon in the “In URL” section of the setup.
Added an option in the GUI to hide the form label in DispForm and EditForm.

16.10.2012 v1.1 fixes a bug with wrong list ID appearing when you edit the configuration from DispForm or EditForm.

I have previously posted a solution for SharePoint 2007, and by request I have rewritten the solution for SharePoint 2010. Please note that this solution will NOT work for any SharePoint version prior to SharePoint 2010.

This solution, as the previous one, supports these “methods”:

Show all records: Returns a list view of all the records.
Sum: Sums the values for all the records.
Average: Sums the values for all the records, and devides the sum on the number of non-empty records.

In the 2007 version, the configuration was setup in a calculated column trough the list settings > edit field.

This new solution is much easier to set up as it has a GUI:

In this solution, the configuration is stored in a dedicated list – shared by all vLookup columns in the site. This eliminates the fiddly work of hand editing the configuration.

When you first setup this solution in a site, the configuration list is created automatically. This list is not to be hand edited, and you might optionally hide it from browsers trough SharePoint Designer. You must however ensure all users have read access to this list.

You can use this solution in plain list views, grouped views and in DispForm / EditForm (see note bout field type below).

When this solution is setup in a list view, it looks like this:

DispForm and EditForm:

Adding new “Tasks” in EditForm does not refresh the form, only the “vLookup items” – thus you does not lose unsaved data in your EditForm.

How to set up the solution

Download the code for the file “vLookup_sp2010.js” from here.
Download the file “spjs-utility.js” from here. Ensure you get the latest version (by date of the folder).
If you prefer a local copy of jQuery, get it here.
Upload this files to a library in your SharePoint site collection, or to a folder in the root site – created using SharePoint Designer.
Add a column to your list / library where the FieldInternalName starts with “vLookup”. This is what triggers the solution. Note that it’s the FieldInternalName and not the Display name that must match.
Read here on how to manually find the FieldInternalName of a field, or use this code to list all FieldInternalNames for a list.

You can use both a calculated column or a single line of text column as “placeholder” for the “vLookup items”. If you use a calculated column, use a formula like this:
```
=""
```
The contents of the field will be overwritten anyway.

To be able to have the solution work in EditForm, you must use a single line of text column as “vLookup field”. Note that you cannot use this field to store anything as the contents will be overwritten by the vLookup solution.

Add a HTML Form Web Part to the bottom of your list view, DispForm or EditForm, and add this code trough the “Source editor”:

<script type="text/javascript" src="/test/vLookupv2/Script/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/test/vLookupv2/Script/spjs-utility.js"></script>
<script type="text/javascript" src="/test/vLookupv2/Script/vLookup/vLookup_sp2010.js"></script>

You use the exact same code for list views and for list forms.

Creating the configuration list

The first time you set up the solution, you will get this prompt:

Hit “OK” to create the list:

You will now get this prompt (provided your field is in the view):

You will now be presented with the configuration GUI:

This GUI is automatically presented while the configuration has not been created, or it contains errors that are detected by this solution. To reenter the configuration at a later time, add “vLookupSetup=1” to the URL like this:

// List view
.../Lists/MyList/AllItems.aspx?vLookupSetup=1
// DispForm
.../Lists/MyList/DispForm.aspx?ID=12&vLookupSetup=1

All the configuration option are explained by hovering over the question mark.

Creating new items in the “child list”

When you add items to the child list, and want to prefill values in your NewForm, you use the In URL section of the configuration to set the “from” and “to” fields.

You must add the same code to a HTML form web part below the form web part in NewForm as you have used in DispForm and list views. This code will pull in the values from the “parent list” and fill in the “child list”.

If you are “connecting” the two lists by a lookup column, ensure you prefill the lookup column like in the example in the top of this article.

MUI support

This solution supports MUI and you can set labels and column headers in multiple languages. Use “default” as “LCID” to have a default value and/or set up the correct LCID (matching your installed language packs) as alternate values.

Do you use this solution?

I spend a lot of time developing these free solutions. If you use it, please hit the PayPal button to send me a few bucks as motivation for releasing new solutions.

Buy me a beer!

Charts, Javascript, SharePoint, SharePoint 2007, SharePoint 2010, Utilities

Embed Google Map iframe from Superfish List

June 14, 2012 Alexander Bautz 1 Comment

Brett Anderson have made a modification to the Superfish drop-down menu – built from a SharePoint list

This solution lets you display a Google Map embedded in the page based on links stored in the Superfish menu structure:

You can read about it in his blog: SharePoint 2020

Javascript, SharePoint 2007, SharePoint 2010, Utilities

Send email to distribution group stored in a SharePoint list using local email client

June 12, 2012 Alexander Bautz 26 Comments

Change log

16.07.2014 Added support for selecting multiple groups. Please note that there may be limitations in the browser restricting the length of the mailto link.

12.11.2013 Fixed a typo in OrderBy part of the CAML.
29.06.2012 Fixed a missing “&” in line 48 – thanks to Jim.

I got a request some time ago from Brett Anderson, asking for a solution for sending a group email to users stored in a SharePoint list.

This solution can be used to harvest email addresses from a SharePoint list, and sending an email using the users local email client. It requires the email addresses to be stored in plain text.

When setup it will look like this:

Step 1

Create a list (or reuse an existing) with two fields: One for storing the email (in this example the Title field), and one for storing the distribution group name:

Add this code to a CEWP using the content link option linking to a file containing the code, or in a HTML Form web part in the sourcecode editor, somewhere in your portal:

<table cellpadding="2">
	<tr>
		<td valign="top" title="Ctrl + click to select multiple groups" style="cursor:help;">Select groups</td>
		<td valign="top" title="Use BCC to hide the addresses from the receiver" style="cursor:help;">Address option</td>
		<td valign="top"></td>
	</tr>	
	<tr>
		<td valign="top" id="groupSelectTd">
			<select id="distributionGroupSelector" multiple="multiple" size="3"></select>
		</td>
		<td valign="top">
			<input type="radio" name="cc_bcc" id="radio_to" value="to"><label for="radio_to">To</label><br>
			<input type="radio" name="cc_bcc" id="radio_cc" value="cc"><label for="radio_cc">CC</label><br>
			<input type="radio" name="cc_bcc" id="radio_bcc" value="Bcc" checked="checked"><label for="radio_bcc">BCC</label>
		</td>
		<td valign="top">
			<input type="button" onclick="doSendGroupEmail()" value="Open email client">
		</td>
	</tr>
</table>
	

<script type="text/javascript" src="/Scripts/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/Scripts/spjs-utility/spjs-utility.js"></script>
<script type="text/javascript">

var emailgroupArgObj = {"listGuid":"SendMail",
						"listBaseUrl":L_Menu_BaseUrl,
						"groupNameField":"GroupName",
						"emailField":'Title',
						"subject":"My email subject",
						"body":"My email body"};
						
/*************************************************/						
/*********** No changes below this line **********/
/*************************************************/	
var emailObj = {};

function getEmailGroups(argObj){
	var res, qb, hb;
	qb = [];
	qb.push("<Where>");
	qb.push("<IsNotNull>");
	qb.push("<FieldRef Name='"+argObj.emailField+"' />");
	qb.push("</IsNotNull>");
	qb.push("</Where>");
	qb.push("<OrderBy><FieldRef Name='"+argObj.groupNameField+"' /></OrderBy>");
	res = spjs_QueryItems({listName:argObj.listGuid,listBaseUrl:argObj.listBaseUrl,query:qb.join(''),viewFields:['ID',argObj.emailField,argObj.groupNameField]});
	hb = [];
	$.each(res.items,function(i,item){
		if(emailObj[item[argObj.groupNameField]]===undefined){
			emailObj[item[argObj.groupNameField]] = [];
			hb.push("<option value='"+item[argObj.groupNameField]+"'>"+item[argObj.groupNameField]+"</option>");
		}
		emailObj[item[argObj.groupNameField]].push(item[argObj.emailField]);
	});
	$("#distributionGroupSelector").html(hb.join(''));
}

function doSendGroupEmail(){
	var groupIdArr = $("#distributionGroupSelector").val(), emailArr = [], link = "";
	if(groupIdArr === null){
		$("#groupSelectTd").css("background-color","#ffcccc");
		return;
	}else{
		$("#groupSelectTd").css("background-color","#ffffff");
	}
	$.each(groupIdArr,function(i,groupId){
		emailArr = $.merge(emailArr,emailObj[groupId]);
	});
	if($("#radio_to").prop('checked')){
		link += "mailto:"+emailArr.join('; ')+"&";
	}else if($("#radio_cc").prop('checked')){
		link += "mailto:?cc="+emailArr.join('; ')+"&";
	}else{
		link += "mailto:?bcc="+emailArr.join('; ')+"&";
	}
	location.href = link+"subject="+emailgroupArgObj.subject+"&body="+emailgroupArgObj.body;
}

getEmailGroups(emailgroupArgObj);
</script>

Step 2

Change the properties in the variable “emailgroupArgObj” to match your setup

listGuid: The list GUID or the display name of the list containing the email addresses.
listBaseUrl: The base url of the list containing the email addresses. If the code is in the same site, no need to change the variable L_Menu_BaseUrl.
groupNameField: The FieldInternalName of the field containing the group name.
emailField: The FieldInternalName of the field containing the email address.
subject: Enter a value here to have the subject field prefilled in the email client.
body: Enter a value here to have the body field prefilled in the email client.

Read here on how to find the list GUID and the FieldInternalNames

The script src in the code above should be changed to point to local copies of both jQuery and spjs-utility.js.
You find jQuery here, and spjs-utility.js here – ensure you use the latest version.

Ask if anything is unclear.

Alexander

Form modification, Javascript, SharePoint 2007, SharePoint 2010, Utilities

Dynamic Forms for SharePoint: Production

May 29, 2012 Alexander Bautz 105 Comments

Change log:

13.08.2012 You find an updated version here.

04.06.2012 After a few bugfixes, the current release is now v1.2.3.

02.06.2012 V1.2.1 fixes another set of bugs – here are the detail from the change log:

Fixed a bug that occurred when an identical rule was applied for multiple options in a single choice field (select or radio). This made the rules cancel eachother out.

Small update to the function “hideFields” to prevent hiding an empty required field (where the required flag was set in the list settings).

Another small update to the function “doReadOnly” to prevent the width of the “formlabel” to vary when toggling readonly for a field.

31.05.2012 V1.1 fixes a possible bug occurring when the Title-field is not present in the form.

Overview

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

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 12.0 and Google Chrome 19.0.1084.52, but not extensively, so please let me know if you experience problems.

I have previously posted a BETA version of this solution, but I have finally updated the Dynamic Forms for SharePoint solution to a “production release”.

Changes from the previous BETA version:

You can use the solution in DispForm
You can clone a rule, or clone the setup from NewForm to EditForm / DispForm
You can use a date column as trigger – though only [today] will work in this version.
Rich text column validation now works.
You can use multiple trigger values (options within same column) for one rule
You can check for group membership and execute rules if a user is NOT member in the group.
No more problems using “is not equal to”.

This article will walk trough the features and the setup of the updated version. I have added this as a separate article to keep it tidy.

Download files

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 it here. You may use the latest version, but i prefer v1.6.4 as it is faster in some areas. You can not use jQuery versions below 1.6. 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.

How to set up the solution

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

Add a CEWP to NewForm, EditForm and DispForm 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
…/DispForm.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 the form to 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 the file “DynamicFormsForSharePoint.js”.

CEWP setup in SharePoint 2010:

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.

The CEWP code

&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/DynRequired/spjs-utility.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;/test/Scripts/DynRequired/DynamicFormsForSharePoint.js&quot;&gt;&lt;/script&gt;

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, EditForm or DispForm, 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 on required fields
If you set a field as required in the list settings, and then hides it due to a rule when it’s still empty, the user will not be able to save the form.

When the solution is set up correctly, the only thing giving it away is the text “Dynamic Forms for SharePoint” in the bottom left corner of the form:

You click this text to enter the configuration. Note that this text number is visible only if the solution has not yet been configured for that form, 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?dfsetup=1
EditForm.aspx?ID=10&dfsetup=1
DispForm.aspx?ID=10&dfsetup=1

If you set up a password protection for the configuration, you are prompted for the password when entering the edit mode:

This dialog is bypassed if a password has not been set.

You then enter the configuration:

Note that in DispForm, the only configurable setting is “These fields are hidden”. Hover the mouse over this image in the GUI to get some hints on how to set up the rules for each field type.

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

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

Not all operators can be used for all field types.

In addition to the fields, you can use *NOT member* in SharePoint group as trigger

Configuration options

Cloning rules from another form

When you have configured one form – like NewForm – you can clone the setup to another form in the same list. If you enter setup for EditForm, and you have already configured NewForm, you get this prompt:

If you press OK, you are presented with a list of already configured forms in the current list:

Multiple values in “This Value” field

You can have multiple values triggering the same rule. Add the values separated with the pipe character like this:

Yes/No fields

To configure a rule for a field of type “SPFieldBoolean” (Yes/No checkbox), you must enter a different value in NewForn / EditForm than in DispForm.
In NewForm and EditForm use true for checked and false for unchecked.
In DispForm use whatever text value representing “Yes” and “No”.

Apply rule by *NOT group membership*

You can apply a rule based on the user NOT being member in a specific group or groups (separate multiple ID’s with the pipe character):

Note that the operator dropdown is disabled.

To find the group ID, go to Site Actions > Site Settings > People and groups and click on the group name.

Look at the URL to find the group ID:
http://www.contoso.com/_layouts/people.aspx?MembershipGroupId=145

Updating from a previous version?

If you are updating from v0.9.1 or v0.9.2 I’m fairly sure all you have to do is to enter the configuration for your form, and save it again. I might be wrong, so post any bugs below.

Post any bugs or feature requests below.
Alexander

Form modification, Javascript, SharePoint 2007, SharePoint 2010, User information, Utilities

Showing or hiding form fields based on membership in a SharePoint group

May 7, 2012 Alexander Bautz 33 Comments

This solution will let you control the visibility of individual fields in NewForm, DispForm and EditForm based on membership in a specific SharePoint group.

This is an updated version of this post.

I have updated it to support newer versions of jQuery, and to use spjs-utility.js.

Note:
If you plan to hide empty fields in NewForm or EditForm, these fields cannot be required to contains information as the user would not be able to save the form – and as the field is invisible, the user will not see the empty field validation message.

How to set up this solution:

Download the latest version of spjs-utility.js, and save it locally. You can put it in a folder created using SharePoint designer, or in a shared document library where all users have read permission.
If you prefer to use a local version of jQuery, get it here and save it alongside the file above.
Add the below code to a CEWP or a HTML form web part, and update the script src to reflect your local copy of spjs-utility.js and jQuery.

&lt;script type=&quot;text/javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://files.spjsworks.com/files/spjs-utility/07.03.2012/spjs-utility.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;

var fields = init_fields_v2();
// The group ID
var groupId = 146; // This number must be changed to match your local group ID
// Show this array for members in the above group
var arrToShowForMembersInTheGroup = ['Title','ForOwnersOnly'];
// And this array for everybody else
var arrToShowForEverybodyElse = ['Title'];

var isInGroup = isCurrentUserInGroup(groupId,false);
if(isInGroup){
	hideAllButThese(arrToShowForMembersInTheGroup);
}else{
	hideAllButThese(arrToShowForEverybodyElse);
}

/************************************
     Do not edit below this line
************************************/
function isCurrentUserInGroup(groupId,returnGroupName){
	var ui, userLoginName, ug, result;
	ui = getUserInfo_v2(_spUserId); 
	userLoginName = ui['Name'];
	ug = getGroupCollectionFromUser(userLoginName);
	result = false;	
	$.each(ug,function(i,obj){
		if(obj.groupId===groupId){
			if(returnGroupName){
				result = obj.groupName;
			}else{
				result = true;
			}
			return false;			
		}
	});
	return result;
}

function getGroupCollectionFromUser(userLoginName,userListBaseUrl){
	if(userListBaseUrl===undefined){
		userListBaseUrl = L_Menu_BaseUrl;
	}
	var result = [];
	spjs_wrapSoapRequest(userListBaseUrl + '/_vti_bin/usergroup.asmx', 
		'http://schemas.microsoft.com/sharepoint/soap/directory/GetGroupCollectionFromUser',
		'&lt;GetGroupCollectionFromUser xmlns=&quot;http://schemas.microsoft.com/sharepoint/soap/directory/&quot;&gt;&lt;userLoginName&gt;' + userLoginName + '&lt;/userLoginName&gt;&lt;/GetGroupCollectionFromUser&gt;',
		function(data){		
			$('Group', data).each(function(idx, itemData){
				result.push({&quot;groupId&quot;:parseInt($(itemData).attr('ID'),10),&quot;groupName&quot;:$(itemData).attr('Name')});
			});
		});
	return result;
}

function hideAllButThese(arrToShow){
	$.each(fields,function(fin){
		if($.inArray(fin,arrToShow)===-1){
			$(fields[fin]).hide();
		}else{
			$(fields[fin]).show();
		}
	});	
}
&lt;/script&gt;

How to configure the solution

Find the group ID of the group you want to use by going to Site Settings > People and Groups, select your group and look at the URL:
http://www.contoso.com/_layouts/people.aspx?MembershipGroupId=6

Change the FieldInternalNames in the array “arrToShowForMembersInTheGroup” and “arrToShowForEverybodyElse” to match your setup.

Look here to learn how to manually retrieve FieldInternalNames, or here to find a solution that shows you all in one go.

If you have trouble, post a comment below.

Alexander

Form modification, Javascript, SharePoint, SharePoint 2007, SharePoint 2010

SPJS Resource Management – No more double booking

February 25, 2012 Alexander Bautz 110 Comments

I got this request from Cory

Alexander,

I was curious if you’d be interested in brain-storming a javascript idea for SharePoint calendars?
I’d be more than happy to buy you a couple beers to support it… 🙂

Here is what I was looking at doing.

1. Using Javascript, validate a new (or edited) calendar entry prior to save.
2. The save will check for overlapping dates and/or times.
3. The save could (if possible) validate pre-blocked times for either allowing entries or disallowing entries.

Real-world example.

We have an appointment calendar. I envision having within the same calendar (or for the sake of organization) in a seperate calendar,entries of what days and times are allowed to be “booked” and/or entries of days and times that are block from being “booked”

When a user attempts to create a new entry, the “booking” layer is evaluated to see if this new entry violates any of the currently exisiting rules. If it does, a notice is displayed.
Next, the new entry will be evaluated if it violates any currently exisiting entries. If it does, a notice will be displayed.

Do you think this might be possible via Javascript and/or SP Services?

Thanks!

The solution

I have made a solution that lets you set the time period of each week day that a resource (like a meeting room) can be booked. This is done by specifying a choice field (Meeting room) in the setup of this solution, and to add records in the settings list for each selection in the choice field (like Meeting room 1 or Meeting room 2).

This solution will ensure the room can be booked in the available time period only, and will also prevent users from double booking the resource by checking for overlapping time periods before saving the new or edited record.

The user will be presented with informative messages regarding time period or dates out of range, and/or double bookings so they can correct their input before attempting another save.

This solution is designed for both SharePoint 2007 and SharePoint 2010.

Here is a few screenshots before we walk trough the setup

In this example, Team 1 has booked room 1 for their morning meeting:

Then Team 2 tries to book the same room for a sales meeting:

The setup

Download the latest version of “spjs_utility.js” from here
Download the file “SPJS-ResourceManagement.js” and the CEWP code from here
Upload “spjs_utility.js”, “SPJS-ResourceManagement.js”, jQuery and jQueryUI (if you prefer a local copy), to a shared document library, or a folder created in SharePoint Designer. Ensure all user have read access to the location where you put the files.
Change the variables in the top of the CEWP code, and the script src to jQuery, jqueryUI, the jQueryUI css file, “spjs-utility.js” and “SPJS-ResourceManagement.js” to reflect your local copies.
Upload the CEWP code as a txt file to the same location as the other files.
Add a CEWP below the form web part in NewForm.aspx / EditForm.aspx and use the “content link option” to link to the CEWP code you uploaded in the previous step. You may also use the HTML form web part and put the CEWP code in the “source editor” directly.
You may supply a password in the GUI to prevent user from editing the settings.

When you first enter the edit mode, you are prompted to create the configuration list:

Click “OK” to create it:

You will never have to hand edit the configuration list, but you find it under “All Site Content” of the site you specify as “SPJSRM_settingsListBaseUrl” in the CEWP code.

This is PARTS of the CEWP code
There are also a chunk of HTML code that must be included. You find the complete code in the download referred above.

<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/sunny/jquery-ui.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="/test/Scripts/spjs_utility - blog/spjs-utility.js"></script>
<script type="text/javascript" src="/test/Scripts/SPJSResourceManagement/SPJS-ResourceManagement.js"></script>
<script type="text/javascript">
var SPJSRM_listName = "SPJSRM"; // Preferably use the List GUID
var SPJSRM_settingsListBaseUrl = L_Menu_BaseUrl; // The base url of the settings list
var SPJSRM_resourceFieldInternalName = "MeetingRoom"; // the FieldInternalName of the choice field that holds the name of the resources
var timeFormat = 24; // 12 for 12 Hour format or 24 for 24 Hour
// Validation messages
var alreadyBookedMsg = "This resource can be booked between {0} and {1}";
var overlapMsg = "The selected time period is not available. It has been booked by {0} between {1} and {2}.";
var endBeforeStartMsg = "End time cannot be less than or equal to start time.";
var startDateOutOfRange = "{0} is out of range.nnStarting date cannot be prior to {1}.";
var endDateOutOfRange = "{0} is out of range.nEnd date cannot be after {1}.";
</script>

These are the primary variables that needs attention

SPJSRM_listName: This is the list GUID or the DisplayName of the list you want this feature to apply to. In SharePoint 2010 you can use the variable “_spPageContextInfo.pageListId”, but for SharePoint 2007 you must find the GUID as described here
SPJSRM_settingsListBaseUrl: This is the base url of the settings list. Use “L_Menu_BaseUrl” to refer the current site, or supply another baseUrl to place the configuration list in another site – use “” to refer the root site.
SPJSRM_resourceFieldInternalName This is the FieldInternalName of the choice field that holds the name of the resources. Go here to learn how to find the FieldInternalName for a field
timeFormat: Use 12 for 12 Hour format or 24 for 24 Hour. Only cosmetics regarding the time as displayed in validation messages.

If you like the solution – buy me a beer!

Form modification, Javascript, SharePoint, SharePoint 2007, SharePoint 2010, Utilities

Form Field Tooltip for SharePoint 2007 and SharePoint 2010

February 24, 2012 Alexander Bautz 89 Comments

27.01.2013 Updated to v1.5 and added MUI support.

30.04.2012 Updated the solution to Move the tooltip image to the formlabel field and ensured all fields are visible when entering “fftsetup=1”.

26.02.2012 Updated the solution to prevent cutting the top of large tooltip containers.

I have previously posted a solution for adding HTML tooltip for selected fields in a SharePoint form. Your find it here.

This is an updated version that is easier and cleaner – and it supports both SharePoint 2007 and SharePoint 2010.

Hover over the image to preview the tooltip

Add “fftsetup=1” to the URL to enter edit mode
For NewForm: /Lists/MyList/NewForm.aspx?fftsetup=1
For DispForm: /Lists/MyList/DispForm.aspx?ID=12&fftsetup=1
For EditForm: /Lists/MyList/EditForm.aspx?ID=12&fftsetup=1

You then enter edit mode

Wrap the tooltip text/HTML in a div with a width attribute like this:

<div style="width:200px">
   The tooltip text/HTML goes here
</div>

Or you can set a fixed width in the CEWP code under the style for “tooltipHolder” – see CEWP code example below.

How to set it up

Download the latest version of “spjs_utility.js” from here
Download the file “SPJS-FormFieldTooltip.js” and the CEWP code from here
Upload “spjs_utility.js”, “SPJS-FormFieldTooltip.js” and jQuery (if you prefer a local copy), to a shared document library, or a folder created in SharePoint Designer. Ensure all user have read access to the location where you put the files.
Change the three variables in the top of the CEWP code, and the script src to jQuery, “spjs-utility.js” and “SPJS-FormFieldTooltip.js” to reflect your local copies.
Upload the CEWP code as a txt file to the same location as the other files.
Add a CEWP below the form web part in NewForm.aspx / DispForm.aspx / EditForm.aspx and use the “content link option” to link to the CEWP code you uploaded in the previous step. You may also use the HTML form web part and put the CEWP code in the “source editor” directly.
Enter edit mode by appending “fftsetup=1” in the URL as described above.

This is the CEWP code

<script type="text/javascript">	
	var settingsListBaseUrl = L_Menu_BaseUrl;
	var thisListID = "mylist";
	var hoverImgPath = "/_layouts/images/hhelp.gif";
</script>
<style type="text/css">
img.customTooltip{
	float:right;
	cursor:pointer;
}
td.toolTipEditor{
	vertical-align:top;
	padding:5px;
	background-color:#DFFFA5;
}
textarea.tooltipTextarea{
	height:150px;
	width:300px;
}
#tooltipHolder{
	background-color:#feeebd;
	padding:5px;
	border:1px silver solid;
	display:none;
	/*width:200px;*/
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}
</style>
<div id="tooltipHolder"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/spjs-utility/24.02.2012/spjs-utility.js"></script>
<script type="text/javascript" src="/test/Scripts/TooltipV2/SPJS-FormFieldTooltip.js"></script>

You must change these variables:

settingsListBaseUrl: This is the baseUrl to the site where the configuration list should be created. Use the variable L_Menu_BaseUrl to refer the current page.
thisListID: This is the unique id of the list you want the tooltip to appear in. If you plan to use the solution for multiple lists in one site, this value must be unique for each list as it’s this value that identifies which tooltip is for which list.
hoverImgPath: This is the path to the image the user hovers over to preview the tooltip.

When you first enter setup, you are presented with this prompt

Hit “OK” to create the list. You will get this “receipt”

You will never have to hand edit the configuration list, therefore I have not said a whole lot about it…

If you like the solution – buy me a beer!

Alexander

SharePoint JavaScripts

Category Archives: Javascript

Dynamic Forms for SharePoint – Now with Tabs

Like this:

Embed Google Map iframe from Superfish List

Like this:

Send email to distribution group stored in a SharePoint list using local email client

Like this:

Dynamic Forms for SharePoint: Production

Like this:

Showing or hiding form fields based on membership in a SharePoint group

Like this:

SPJS Resource Management – No more double booking

Like this:

Form Field Tooltip for SharePoint 2007 and SharePoint 2010

Like this: