Autocomplete for text and people picker fields

Change log
April 6, 2014
v1.1: Added option to bypass the SP2013 check when applying the people picker autocomplete in SP2013. This must only be used when having SP2010 style people pickers with the “validate user” and “address book” icons.

To use this option, change the argument object like this:

spjs.ac.peoplePicker({
	"applyTo":"Responsible",
	"forceOn2013":true,
	...

I have previously posted a few solutions here and here, but those are old and does not work for new SharePoint versions.

I have redone the solution to bring it up to support SP2007, SP2010 and SP2013. This is a total remake that does not rely upon jQueryUI for the autocomplete part.

In this example, I have added autocomplete to the single line of text field “Project”, and to the single choice people picker “Responsible”.
IMG

Here I have started typing in the Project field:
IMG
You can use this solution with single line of text columns and single choice people picker columns. I have not built in support for multi choice people pickers.

Please note that this solution is made for unmodified SharePoint forms (NewForm and EditForm) and will not work for custom forms modified in SPD or InfoPath. It will however play nice with DFFS.

The people picker autocomplete is not available in SP 2013 as this version already have this built in.

How to set it up
  1. If you don’t have jQuery already, get it here
  2. Get the latest version of spjs-utility.js from here.
  3. Download the file “spjs-autocomplete.js” from here.
  4. Add the code below the form in NewForm and EditForm as described below.
Setup for a single line of text column

Add this code below the form web part in NewForm and EditForm using a HTML form Web Part, Script Editor or link to a file containing the code from a Content Editor Web Part using the content link option.

<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" src="/Scripts/Autocomplete/spjs-autocomplete.js"></script>
<script type="text/javascript">
var fields = init_fields_v2();

spjs.ac.textField({
	"applyTo":"Project",
	"helpText":"Project name or number...",
	"listGuid":"ProjectList",
	"listBaseUrl":"/test",
	"showField":"Title",
	"rowLimit":15,
	"listOptionsOnFocus":false,
	"setFields":[
		{
			"fromFIN":"ProjectNumber",
			"toFIN":"PNumber",
			"skipIfEmpty":false
		}
	]					
});					
	
</script>
Options explained:
  • applyTo: The FieldInternalName of the field to add autocomplete to.
  • helpText: The text in the autocomplete field when it is empty
  • listGuid: The list GUID or the display name of the list you are pulling the options from.
  • listBaseUrl: The base url of the list. For a subsite named “Test”, this is the correct base url: “/test”. For the root site, use an empty string like this: “”.
  • showField: This is the field to show in the autocomplete.
  • rowLimit: This is the max number of items to pull back. Use a low number to keep the query lightweight and fast.
  • listOptionsOnFocus: true or false determines whether or not to pull in the first batch when the field gets focus. Setting this to true will mimic a dropdown with an arrow to the right.
  • setFields: This in an array of objects containing additional fields to pull in and set based on the selection. It has these properties:
    • fromFIN: The FieldInternalName of the field in the list you are pulling from.
    • toFIN: The FieldInternalName of the field in the list you are writing to.
    • skipIfEmpty: true or false determines whether or not to skip this option if this field is empty.
Setup for a single choice people picker

Add this code below the form web part in NewForm and EditForm using a HTML form Web Part, Script Editor or link to a file containing the code from a Content Editor Web Part using the content link option.

<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" src="/Scripts/Autocomplete/spjs-autocomplete.js"></script>
<script type="text/javascript">
var fields = init_fields_v2();

spjs.ac.peoplePicker({
	"applyTo":"Responsible",
	"forceOn2013":false,
	"helpText":"Enter name or email address...",
	"showField":"Title",
	"chooseFromUserGroup":null,
	"showUsersOnly":true,
	"rowLimit":5,
	"listOptionsOnFocus":false,
	"setFields":[
		{
			"fromFIN":"EMail",
			"toFIN":"ResponsibleEmail",
			"skipIfEmpty":false
		}
	]
});
	
</script>
Options explained:

The shared options are explained in the previous section.

  • chooseFromUserGroup: If you want to limit the selection to a specific user group, add the name or the ID here. The ID must be added as an integer. Leave as null to search all users. Please note that you cannot let the autocomplete search among all users while the people picker itself (in the list settings) is restricted to a certain group.
  • showUsersOnly: true or false determines whether or not to show users and groups, or users only.
Override the labels and text

Add this to the CEWP code (above the function call to spjs.ac.peoplePicker or spjs.ac.textField) to override the standard texts. Translate as you like.

spjs.ac.text = {
	"imgTitle":"The list of valid choices is updated automatically when you type",
	"noItems":"No items match your search",
	"noValidItems":"No valid items match your search",
	"invalid":"Invalid value",
	"moreItemsLabel":"Showing the first {0} items",
	"moreItemsMouseover":"Continue typing to narrow your search",
	"searching":"Searching for: "
};
How to use this with DFFS

To use this with DFFS you must add the script reference to “spjs-autocomplete.js” in the CEWP code for DFFS, and wrap the function call like this:

function dffs_Ready(){
	spjs.ac.peoplePicker({
		"applyTo":"Responsible",
		"helpText":"Enter name or email address...",
		"showField":"Title",
		"chooseFromUserGroup":null,
		"showUsersOnly":true,
		"rowLimit":5,
		"listOptionsOnFocus":false,
		"setFields":[
			{
				"fromFIN":"EMail",
				"toFIN":"ResponsibleEmail",
				"skipIfEmpty":false
			}
		]
	});
}

You can also add the function call to the Custom JS section in the Misc tab. In this case you do not wrap it in dffs_Ready().

Post any bugs or feedback in the comments below.

Alexander

Edit SharePoint Field properties in SP2010 and SP2013

Change log
April 2. 2014
Updated to v3.1 with these changes:
Added option to control ReadOnly and AllowDeletion.

I have previously posted a similar solution here. I have therefore started this solution in v3.0.

This solution lets you change field properties that are not accessible from list settings. Use it with caution as you can break a list or library if you change the wrong property. You should test it in a test list before you do any changes to a production environment.

Please note that this solution is for SP2010 and SP2013. You find a link to a similar solution for SP2007 in the top of this article.

How to set it up

Download the file “spjs_editFieldProperties.js” from here and add a HTML Form Web Part to a web part page in the site where you want to use it.

The HTML Form Web Part source should look like this:

<script type="text/javascript" src="/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/Scripts/ChangeFieldProperties/spjs_editFieldProperties.js"></script>

If you need to download jQuery, you find it here.

This is what it will look like:

IMG

Select list to see all fields:

IMG
Hover over the options to reveal the toggle buttons.

The options

I will not go into details on each of the options as it should be self explaining by the header. I will however mention a few of them.

ShowInFileDlg

This controls whether or not the field is shown in the Document Information Panel in Microsoft Word.

SourceID

In a scenario where you are using “Quick parts” to show metadata in a Word file, and you are copying the file to another library, you must change the “SourceID” in the destination library to match the value in the source library. If you do not, the “Quick part” will be disabled – leaving the value as plain text.

Let me know in the comments below if you have questions – and send me a beer form the “beer button” in the right side of the screen if you like and use the solution.

Alexander

CommentBox for SharePoint 2010 and 2013

I have updated my CommentBox for SharePoint solution to use the Client Object Model found in SP 2010 and 2013 to make it faster and smoother. This update does unfortunately not support SP 2007.

Change log
April 4. 2014
Updated to v2.2:
Added option to store the comments in a list in the root site. The setting is controlled in the argument object like this:

var argObj = {
	"placeholderID":"cBox_A",
	"threadID":threadID,
	"storeCommentsOnRootSite":true,
	...
Please note that you must index the columns “Title” and “Parent” in the list “SPJS-CommentBox” to prevent errors when you reach 5000 comments in the list. This list is hidden from browsers, and you must add this index manually by entering list setup like this this URL: http://YourSiteURL.com/Lists/SPJSCommentBox

March 6. 2014
Updated to v2.1:
Added support for changing the TinyMCE language when using a local installed version of the TinyMCE solution. You must download the language package you want to use, and set the parameter “tinyMCE_Language” in the argument object. Refer the TinyMCE web page for details on downloading the language js file.

If you refer TinyMCE from //tinymce.cachefly.net all you have to do to change the language is to add a reference to the correct language.js file in the CEWP.

Updated to v2.01:
Fixed a bug where level 3 and deeper comments does not show when setting “threadInitiallyCollapsed” to true.

What is this solution used for?

You can add this solution to any page or form in a site to let users comment on the page or list item.

Here is an example thread

IMG

Hover over the comment to show the available options:

IMG
Here you see “Edit”, “Delete” and “Reply”. The available options will vary depending on the configuration.

Third party solutions:

This release utilizes Font Awesome Created by Dave Gandy and if you activate rich text input in the comments, TinyMCE from Moxiecode Systems AB

Some of the features
  • Multi level comments.
  • Option to use plain text or rich text input.
  • Moderators can be specified by group ID or user ID. Moderators (and site collection administrators) have full control and can edit or delete any comments.
  • Sorting ascending of descending.
  • Page size form 1-500 root comments. Load the next page by a click on a button.
  • Option to restrict write access to specified groups (by group ID)
  • You can have multiple parallel threads in one page.
  • And more…
Behind the scenes

The comments are stored in a list in the site where you set up the solution. This list is automatically created by the script, and is hidden from browsers. You can access it by navigating to “/Lists/SPJSCommentBox”. This list has a Title field for storing the page ID, a “Parent” field for the ID of the parent comment (if it is a reply), a “Comment” field to hold the actual comment, a “EMail” field and a “ProfileImg” field. There is no need to hand edit this list.

How to set it up
  1. Download “CEWP.txt”, “spjs-cBox.css” and “spjs-cBox_min.js” from here.
  2. If you like to use a local copy of Font Awesome, get it here, and follow the instructions found here.
  3. If you want to use a local copy of jQuery, get it here.
  4. If you want to use a local copy of TinyMCE, get it here, and follow the instructions found here.
  5. Upload “spjs-cBox.css” and “spjs-cBox_min.js” and any local versions of the above solutions to a document library or a folder created in the root of the site using SharePoint Designer. Ensure all users have read access to this library or folder.
  6. Edit the file “CEWP.txt” and change the links to target your local files. Update the configuration by looking at the CEWP code example below. Upload the file to the same location you created above.
    DO NOT add the code directly to the CEWP, but use the Content link option to link to the file. You can also add the code to the page using a HTML form web part or “Embed code”, but I prefer the Content link option as you can access the code without editing the page.
  7. Add the code to a page or form (like DispForm) using the preferred method and reload the page. You are prompted to create the list to hold all the comments, and after another page reload you are ready to add comments.
CEWP code
<div id="cBox_A"></div>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="/scripts/cBox/spjs-cBox.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/scripts/cBox/spjs-cBox_min.js"></script>
<script type="text/javascript" src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script type="text/javascript">

var spjs_cBox_license = "Put your license code here";

var threadID = location.pathname;
if(GetUrlKeyValue("ID") !== ""){
	threadID += "?ID="+GetUrlKeyValue("ID")
}

var argObj = {
	"placeholderID":"cBox_A",
	"threadID":threadID,
	"multiInstanceMode":true, // Must be set to false when upgrading from v1.x
	"text":{
		"createdByPrefix":"Posted by ",
		"createdPrefix":" on ",
		"modifiedPrefix":"Modified: ",
		"modifiedByPrefix":" by ",
		"expandCollapse":["expand","collapse"],
		"newCommentText":"Leave a reply",
		"notSignedInText":"You must sign in to comment",
		"replyText":"Reply",
		"editText":"Edit",
		"submitText":"Submit comment",
		"canceText":"Cancel",
		"deleteThreadText":"Delete comment",
		"confirmDeletePrompt":"Please confirm that you want to delete the selected item and all replies below it.",
		"showMoreCommentsText":"Show more comments"
	},	
	"textareaVisible":true,
	"containerWidth":"550px",
	"replyLevels":3,
	"pageSize":25,
	"threadInitiallyCollapsed":false,
	"threadedCommentsIndent":15,
	"textareaHeight":100,
	"showProfileImage":true,	
	"showUserEmail":true,	
	"richTextInputUsingTinyMCE":false,
	"tinyMCE_Language":"nb_NO", // New in v2.1
	"sendToRecycleBinWhenDeleting":true,				
	"sortAscending":false,
	"colorMyComments":false,
	"authorCanEdit":false,	
	"moderatorGroupIDorUserID":[],
	"restrictWriteAccessToGroups":[]
};

ExecuteOrDelayUntilScriptLoaded(function(){
	spjs.cBox.init(argObj);
},"sp.js");

</script>
Arguments details

Here is some details on a selection of argument properties.

  • placeholderID: This is the unique identifier for this instance. You must have a placeholder in the page with this ID – like the div in the top of the code example above. To use multiple instances, change the placeholderID and add placeholders in the page.
  • threadID: This is by default the relative URL of the page or list item. Change this if you like, but remember that you must use an unique identifier for each thread.
  • multiInstanceMode: Set this to true if you want to have multiple instances in one page. For users upgrading from a previous version this must be “false” for the comments to show up.
  • textareaVisible: This setting specifies whether the textarea should be visible initially, or to display a button to show it.
  • replyLevels: How deep can the replies go in one thread.
  • pageSize: How many root comments to show in each page. The more the comments, the longer the page takes to load.
  • richTextInputUsingTinyMCE: If set to true you must refer the TinyMCE solution.
  • tinyMCE_Language: For example “nb_NO”. Refer the TinyMCE web page for details on downloading the language js file.
  • sendToRecycleBinWhenDeleting: true to use recycle bin, false to permanently delete.
  • colorMyComments: Add a special css class “cBoxMyComments” to the comments created by the logged in user. You can edit this class in the file “spjs-cBox.css”
  • authorCanEdit: true to let the author edit their own comments. Delete is for moderator only.
  • moderatorGroupIDorUserID: Comma separated list of group ID (number) or user ID (number). To find the group ID go to “People and Groups” and click on the group you want the ID of. Look at the URL for this string: /_layouts/people.aspx?MembershipGroupId=5. To find the user id use the same approach by clicking on a user and looking for “ID=123” in the URL.
  • restrictWriteAccessToGroups: Comma separated list of group ID for the groups that is allowed to comment. Leave blank for no restrictions.
Are upgrading form version 1.x?

You must update all the files. Some of the files used in v1.x is no longer needed. You must also change the function call argument object as the configuration has changed. When all the files are in place, all you have to do is to rename the configuration list from “CommentBoxForSharePoint” to “SPJS-CommentBox”. When this is done all existing comments will reappear.

Obtain a license code

Go to the page Obtain license code.

Please let me know if you have trouble setting this up, or you have feature requests.

Alexander

Custom form for adding list item with attachments

Change log
April 5. 2014
Updated to v1.1:
Fixed a bug where “args.listBaseUrl” was missing in the function “submitFile”. This made it impossible to add items to another site than the one you triggered the code on. Thanks to Jean-Jacques for pointing out this bug.

I got this request from Rudolf:

Hi Alexander,

Do you have any idea to solve the following problem I have?

We would like to upload formatted text or binary data from a file as an attachment to with an on the fly create form to enter the comment.
I read your blog to spjs-upload-for-sharepoint-custom-upload-page- ….

We would like to send this the comment and the attachments via a WebService to a SharePoint list to create a list item with attachments loaded.

Best Regards

The solution

I have created this solution that lets you add a list item with one or more attachments from a custom form that you can place anywhere in your SharePoint site.
IMG

You may also be interested in this solution SPJS Upload for SharePoint: Custom upload page for uploading documents to various document libraries in a site collection.

Please note:
* This solution requires you to be logged in with a user with the necessary privileges to add a list item.
* This solution requires IE 10 or above. This may be a problem for users with SharePoint 2007 or 2010 as this versions forces IE 8 mode for newer versions of IE. Change the document mode or use Chrome or Firefox.
How to add this solution to a page
  1. Download jQuery from here. Please note that you should use v1.x as v2.x does NOT support IE versions below 9.
  2. Download spjs_utility.js from here
  3. Download the files “spjs_addItemWithAtt.css”, “spjs_addItemWithAtt.js” and “spjs_addItemWithAtt_CEWP.aspx” from here.
  4. Upload all the files but “spjs_addItemWithAtt_CEWP.aspx” to a document library in the site collection, or a folder created using SharePoint Designer on the root of the site collection.
  5. Update the file “spjs_addItemWithAtt_CEWP.aspx” with the path to the files you have uploaded, and fill in the argument object as described below. Then upload it to the same location and refer the file using the “Content link” option in the CEWP. You can also use the code directly in a HTML for Web Part in the page where you want the form to appear. DO NOT ADD THE CODE DIRECTLY IN THE CEWP AS HTML.
The arguments for the function

You call the function from the CEWP or the HTML Form Web Part using code like this:

spjs.addItemWithAttachment.init({
	"instanceID":"1",
	"listName":"{1a2bb561-c557-4a28-938f-0fb600b136d7}",
	"listBaseUrl":"",
	"header":"Add a comment",
	"text":{
		"saveBtn":"Save",
		"successMsg":"Saved successfully",
		"browserNotSupported":"Your browser is not supported."
	},
	"fields":
		[
			{
				"fin":"Title",
				"label":"Title",
				"type":"text",
				"required":true
			},
			{
				"fin":"Comment",
				"label":"Comment",
				"type":"note",
				"height":"100px",
				"required":true
			},
			{
				"fin":"Priority",
				"label":"Priority",
				"type":"choice",
				"required":true,
				"emptyLabel":"Set priority",
				"choices":[
					{"v":"0","f":"Priority = low"},
					{"v":"1","f":"Priority = med"},
					{"v":"2","f":"Priority = high"}
				]
			}
		],
	"attachements":true,
	"attLabel":"Attachments",
	"multiple":true
});
instanceID

An uniquer id for this instance. If you add more than one form the same page you must change this so that each instance is unique. In the CEWP code you find this div:

<div id="spjs_addItemWithAttachment_instanceID_1"></div>

This corresponds with the instanceID to form an unique placeholder where the custom form will be inserted.

listName

The list GUID or display name of the list to add the list item to.

listBaseUrl

The baseUrl of the site where the list is located. Use “” for the root site, or “/Sites/MySite” for a site named “MySite” on a managed path. This is NOT the URL of the list.

header

This is the text that goes above the form.

text

Various text used in the solution.

fields

Array of objects in this format:

{
"fin":"Title",
"label":"Title",
"type":"text",
"required":true
}

“fin”: The FieldIntenalName of the field in the list you are adding the items to.
“label”: The form label in the custom form you are creating.
“type”: Type of field. Supported types are “text”, “note” and “choice”.
“required”: true or false to control whether the field must be filled or not.

For type = note you have one extra setting

“height”: Sets the height of the textarea in pixels.

For type = choice you have two extra settings

“emptyLabel”: Sets the default value in the dropdown select.
“choices”: Object format like this:

"choices":[
{"v":"0","f":"Priority = low"},
{"v":"1","f":"Priority = med"},
{"v":"2","f":"Priority = high"}
]

“v” is the value to store in the list and “f” is the displayed value in the dropdown select. These two can be the same.

attachements

true or false to allow or disallow attachments.

attLabel

The form label for the attachments.

multiple

true or false to allow for selecting multiple files.

Multiple forms in the same page

To have multiple forms in the same page, repeat the call to “spjs.addItemWithAttachment.init” and change the “instanceID”.

Let me know if you find any bugs, or you have any comments.

Please note:
If you are a consultant and use this solution, I would appreciate it if you gave me a piece of the cake by using the “beer button” in the top right corner of this page.

Alexander

Collect feedback from pages or list items

Change log
February 14. 2014
Updated to v1.2:

  • Added option to store the site title in an additional field in the list. To activate this, add a field with FieldInternalName “SiteTitle” to the list.

January 28. 2014
Updated to v1.1:

  • Include site title in the Title field in the feedback if it is collected from a page and not a list item.
  • Changed from locationl.pathname to the full location.href in the URL for collected feedback.

I got this request:

Dear Alexander,
I’ve been cruising your blog for a week or so and I have to say – THANKS!
The solutions you posted are wonderful and very helpful!

I have a special request that might be useful for many users and I’ll defently buy you a nice cold beer for it !

I need a way to send a feedback from any list item and page in SharePoint. The way I see it is some clickable button in a CEWP inserted in a page and some custom button in the ribbon of a list item.

I’d been asked to allow the users to answer some questions (2-4 pre added) and the ability to add some text of their own.

If there’s a way to have your assistance in that matter I’ll adores you forever and send you a cold beer to chill.

Thanks in advance,
Eron F.

The solution

This solution is for SP 2010 or 2013 only and it will NOT work for SP 2007.

This solution will add a banner button or a regular button (details below) that lets your users add feedback to a custom list in the site collection. The solution will fill the “Title” column with the list item title if it is a list item (DispForm or EditForm) and the URL from where the feedback was added. You can add this code to any page in the site collection using a CEWP.

How to set it up

Start with adding a custom list to the site collection. This list must Include the standard “Title” field (already present), a single line of text column called “URL”, and another single line of text column named “SiteTitle”. These columns are used to log where the feedback was added from. You must add additional columns to this list to collect the actual feedback – like a multi line text field. Which columns you want to add is up to you. The relative URL to this list is used in the argument object described below. This custom list does not require any code added to it.

Not using English language?
You must change the display name for the localized Title field to the English “Title” in the list you want to store the feedback in. This because the script addresses the field by display name.

Download the latest version of SPJS-CollectFeedback from here, and put it in a document library where all users have READ ACCESS.

When this list is set up and the file “SPJS-CollectFeedback.js” is downloaded, you can add the code from the code block below to any page in the site collection using a HTML Form Web Part or CEWP. You might want to change the jQuery reference to a local copy, and you must change the reference to “SPJS-CollectFeedback.js” to point to your local copy.

Use this code to insert a ribbon button
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/Scripts/Feedback/SPJS-CollectFeedback.js"></script>
<script type="text/javascript">

$(document).ready(function(){
	spjs.collectFeedback.initRibbonBtn({
		"feedbackListNewFormURL":"/CommentBox/Lists/Feedback/NewForm.aspx",
		"feedbackAddedAlert":"Thank you for the feedback!",
		"feedbackNotAddedAlert":"",
		"ribbonBtnText":"Send<br>feedback",
		"ribbonBtnImg":"/_layouts/images/ltann.gif"		
	});
});
</script>
Or use this code to insert a regular button
<input type="button" value="Send feedback" onclick="triggerFeedback();" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/Scripts/Feedback/SPJS-CollectFeedback.js"></script>
<script type="text/javascript">

function triggerFeedback(){
	spjs.collectFeedback.init({
		"feedbackListNewFormURL":"/CommentBox/Lists/Feedback/NewForm.aspx",
		"feedbackAddedAlert":"Thank you for the feedback!",
		"feedbackNotAddedAlert":""
	});
}
</script>
The various arguments

feedbackListNewFormURL: The relative URL of the list to store the feedback in.
feedbackAddedAlert: If this is not an empty string you will get an alert after adding the feedback.
feedbackNotAddedAlert: If this is not an empty string you will get an alert if you cancel adding the feedback.
ribbonBtnText: The label of the ribbon button.
ribbonBtnImg: The image of the ribbon button (32×32 px).

Post a comment below if you like the solution or you have any questions.

Alexander

Make field read-only for other than the author

I got this request from @f_Techno:

@SPJavaScripts hello Alexander, I have task list in sps 2010. I want to dim DueDate after create the task. No one should change it except me.

This snippet must be places in the EditForm of the list or library where you want the field to be readonly. What this code does is to check if the logged in user is the author of the list item, and if not, make the field “StartDate” readonly. You can change the fieldnames in the example to target other fields.

<script type="text/javascript" src="/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/Scripts/spjs-utility/spjs-utility.js"></script>
<script type="text/javascript">
var thisItemDBdata = spjs_getItemByID({"listName":_spPageContextInfo.pageListId,"id":GetUrlKeyValue("ID"),"viewFields":["Author"]});
if(thisItemDBdata !== null){
	var authorID = thisItemDBdata.Author.split(";#")[0];
	if(_spPageContextInfo.userId.toString() !== authorID){
		var fields = init_fields_v2();
		$(fields["StartDate"]).find("td.ms-formbody").hide().after("<td id='readOnly_StartDate' class='ms-formbody'> </td>");
		$(document).ready(function(){
			// Build the fields object again for SP 2013
			fields = init_fields_v2();
			var sDate = getFieldValue("StartDate");
			$("#readOnly_StartDate").html(sDate);
		});
	}
}
</script>

You find spjs-utiliy.js here.

Please note that this code in for SP 2010 or SP 2013. If you want to use it for SP 2007 you must change “_spPageContextInfo.pageListId” for the list DisplayName or GUID.

For more advanced options, check out Dynamic Forms for SharePoint her.

Alexander

SPJS Upload for SharePoint: Custom upload page for uploading documents to various document libraries in a site collection

I got a request from Gilbert Okello regarding a custom upload solution for submitting documents to various document libraries in a site collection. This solution uses the “CopyIntoItems” method to let the user select a document from the local computer and upload it to a document library / folder within the site collection.
IMG

I must start off emphasizing that this solution requires Internet Explorer 10 or another modern browser to work. There is NO WAY you can make it work in any Internet Explorer version below 10. I have tested it in SP 2010 and SP 2013, but I guess it should work in SP 2007 as well.

The code provided at the bottom of this article builds the upload control by reading a set of predefined upload locations from a custom list. This is the code that builds the dropdown select containing the predefined options:

$(document).ready(function(){
	spjs.upload.getUploadDestinations({
		"listName":"UploadDestination",
		"listBaseUrl":"",
		"friendlyNameField":"Title",
		"relPathField":"RelPath",
		"orderByField":"Title"
	});
});

listName: The GUID or the display name of the list where the upload destinations are stored.
listBaseUrl: The base URL of the list. If it is in the root site, use “”. If it is in a subsite, use “/MySubsite” or “/Sites/MySubsite” depending on your setup. The list name should NOT be included in this variable.
friendlyNameField: The FieldInternalName of the field that holds the friendly name of the destination.
relPathField: The FieldInternalName of the field that holds the relative URL to the library or folder to upload the files.
orderByField: The FieldInternalName of the field to sort by.

How to set up this list

Create a custom list with one additional single line of text field “RelPath”. Enter the friendly name in the Title field, and the relative path to the library or folder in the field “RelPath”.
IMG

Using this list is optional. If you like, you can enter the destination directly in the code in the <select> control with id “fileUploadTo”. If you prefer to use the manual approach, ensure you comment out the function call to “getUploadDestinations” in the code example.

The script file “spjs-utility.js” is only used for the function “getUploadDestinations” an you can remove it if you enter the destinations manually.

The code

Get the file “spjs-utility.js” from here. You will also need jQuery. Put this code in a HTML Form Web part where you want the upload control to appear – change the path to the scripts in the top of the code to match you locale files:

<!-- 
/* SPJS Upload for SharePoint
 * ---------------------------------------------
 * Created by Alexander Bautz
 * alexander.bautz@gmail.com
 * http://spjsblog.com
 * Copyright (c) 2013 Alexander Bautz (Licensed under the MIT X11 License)
 * ---------------------------------------------
 * Include reference to:
 * jquery - http://jquery.com
 * spjs-utility.js - http://spjsfiles.com
 * ---------------------------------------------
*/
 -->
 
<script type="text/javascript" src="/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/Scripts/spjs-utility/spjs-utility.js"></script>
<script type="text/javascript">
/*
	Pull the upload destinations from this list
	If you prefer, you can add the destinations manuelly in the <select> with id "fileUploadTo".
	In that case, comment out this function call
*/
$(document).ready(function(){
	spjs.upload.getUploadDestinations({
		"listName":"UploadDestination",
		"listBaseUrl":"",
		"friendlyNameField":"Title",
		"relPathField":"RelPath",
		"orderByField":"Title"
	});
});
</script>
<style type="text/css">
td.spjs_fileUploadLabel{
	width:150px;
	height:25px;
	font-size:16px !important;
	font-weight:bold;
	font-family:Calibri;
	color:#ffffff;
	vertical-align:middle;
	background-color:#5B9BD5;
	border:1px #41719C solid;	
	padding:3px 3px 3px 6px;
	cursor:default;
}
td.spjs_fileUploadBody{	
	width:350px;
	font-size:16px !important;
	border:1px #41719C solid;	
	padding:3px;
	cursor:default;
}
input.spjs_fileUploadBtn{
	width:100%;
	height:33px;	
	font-size:16px !important;
	font-weight:bold;
	font-family:Calibri;
	color:#ffffff;
	border:1px #41719C solid;
	background-color:#5B9BD5;	
	cursor:pointer;
	margin:0px;
	padding:0px;
	display:none;
}
input.spjs_fileUploadBtn:hover{
	color:#5B9BD5;
	background-color:#ffffff;
}
.spjs_fileUploadSelect{
	width:100%;
	height:25px;
	background-color:#ffffff !important;
	border:none;	
	font-size:14px;
}
.spjs_empty{
	border:1px #FF0000 dashed !important;
}
</style>
<table cellpadding="0" cellspacing="5" style="border-collapse:separate;">
	<tr>
		<td class="spjs_fileUploadLabel">File</td>
		<td class="spjs_fileUploadBody">
			<input type="file" id="filePicker" style="width:100%;padding:0px;">
			<span style="display:none;color:red;font-size:12px;">Your browser is not supported!<br>Use Internet Explorer 10 or another modern browser.</span>
		</td>
	</tr>
	<tr>
		<td class="spjs_fileUploadLabel">Upload To</td>
		<td class="spjs_fileUploadBody">			
			<select id="fileUploadTo" class="spjs_fileUploadSelect">
				<!--
				<option value="">Select destination</option>
				<option value="/Upload/Folder1">Folder 1</option>
				<option value="/Upload/Folder2">Folder 2</option>
				-->	
			</select>
		</td>
	</tr>
	<tr>
		<td></td>
		<td class="spjs_fileUploadBtn">
			<input id="uploadFileBtn" type="button" class="spjs_fileUploadBtn" onclick="spjs.upload.submitFile();" value="Submit" />
			<span id="uploadError" style="display:none;color:red;"></span>
		</td>
	</tr>
</table>
<script type="text/javascript">

/******************************************************
	Do not change anything below this line
*******************************************************/
var spjs = spjs || {};

spjs.upload = {
	"version":"1.0",
	"versionDate":"December 8, 2013",
	"data":{"fileDataStr":""},
	"handleFileSelect":function(evt){
		// Modified from http://jsfiddle.net/eliseosoto/JHQnk/
		var files = evt.target.files, file = files[0], reader;
		if(files && file){
			reader = new FileReader();
			reader.onload = function(readerEvt) {
				var binaryString = readerEvt.target.result;
				spjs.upload.data.fileDataStr = binaryString.substring(binaryString.indexOf(",")+1);
				$("#uploadFileBtn").show();
			};
			reader.readAsDataURL(file);
		}
	},
	"submitFile":function() {
		if($("#fileUploadTo").val() === ""){
			$("#fileUploadTo").addClass("spjs_empty");
			return;
		}else{
			$("#fileUploadTo").removeClass("spjs_empty");
		}
		var filePath, fileName, destination, b;
		filePath = $("#filePicker").val();
		fileName = filePath.substring(filePath.lastIndexOf("\\")+1);
		destination = location.protocol+"//"+location.host+$("#fileUploadTo").val()+"/"+fileName;
		b = [];
		b.push("<soap:Envelope xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xmlns:xsd='http://www.w3.org/2001/XMLSchema' xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'>");
		b.push("<soap:Body>");
		b.push("<CopyIntoItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'>");
		b.push("<SourceUrl>" + fileName + "</SourceUrl>");
		b.push("<DestinationUrls>");
		b.push("<string>"+destination+"</string>");
		b.push("</DestinationUrls>");
		b.push("<Fields>");
		b.push("<FieldInformation Type='Text' DisplayName='Title' InternalName='Title' Value='"+fileName+"' />");
		b.push("</Fields>");
		b.push("<Stream>"+spjs.upload.data.fileDataStr+"</Stream>");
		b.push("</CopyIntoItems>");
		b.push("</soap:Body>");
		b.push("</soap:Envelope>");
		$.ajax({
			url: "/_vti_bin/copy.asmx",
			beforeSend: function (xhr) { xhr.setRequestHeader("SOAPAction", "http://schemas.microsoft.com/sharepoint/soap/CopyIntoItems"); },
			type: "POST",
			dataType: "xml",
			data: b.join(""),
			complete: spjs.upload.processResult,
			contentType: "text/xml; charset=\"utf-8\""
		});
	},
	"processResult":function(data, status) {
		var errorCode, errorMessage;
		errorCode = $(data.responseText).find("CopyResult").attr("ErrorCode");
		errorMessage = $(data.responseText).find("CopyResult").attr("ErrorMessage");
		if(errorCode !== "Success"){
			$("#uploadFileBtn").fadeOut(400,function(){
				$("#uploadError").html("Ensure the selected destination exists!<br><br>Error message: "+errorMessage).show();
				setTimeout(function(){
					$("#uploadError").fadeOut();
					$("#fileUploadTo").val("");
					$("#uploadFileBtn").fadeIn();
				},10000);
			});		
		}else{
			$("#uploadFileBtn").attr("disabled","disabled").val("File successfully uploaded");
			setTimeout(function(){
				$("#uploadFileBtn").fadeOut(400,function(){
					$(this).removeAttr("disabled").val("Submit");
				})
			},3000);
			$("#filePicker").val("");
		}
	},
	"getUploadDestinations":function(args){
		var res, q, b;
		b = ["<option value=''>Select destination</option>"];
		q = "<Where><IsNotNull><FieldRef Name='ID' /></IsNotNull></Where><OrderBy><FieldRef Name='"+args.orderByField+"' /></OrderBy>";
		res = spjs_QueryItems({"listName":args.listName,"listBaseUrl":args.listBaseUrl,"query":q,"viewFields":[args.friendlyNameField,args.relPathField]});
		$.each(res.items,function(i,item){
			b.push("<option value='"+item[args.relPathField]+"'>"+item[args.friendlyNameField]+"</option>")
		});
		$("#fileUploadTo").html(b.join(""));
	}
};

if(window.File && window.FileReader && window.FileList && window.Blob){
	document.getElementById('filePicker').addEventListener('change', spjs.upload.handleFileSelect, false);
}else{
	$("#filePicker").hide().next().show();
	$("#fileUploadTo").hide();	
}
</script>

Post questions and feedback in the comments section below, and if you use this solution, please consider sending me a few beers by clicking the “beer button” in the top right corner of this page.

Enjoy,
Alexander

%d bloggers like this: