Category Archives: SharePoint 2013

SPJS-Utility updated with support for querying large lists

By request I have added support for querying large lists (over 5000 items) using “spjs_QueryItems” or “spjs.utility.queryItems” in SPJS-Utility.js

If you use this for example with the DFFS Plugin “Autocomplete”, and have hit this error:

The attempted operation is prohibited because it exceeds the list view threshold enforced by the administrator

You can now update SPJS-Utility.js to fix this problem.

Please note that these functions are undocumented and mostly used internally from the different SPJS functions and solutions. If you are interested in using these functions in your own code, dig into the code to discover how it works, or ask a question in the forum.

Download

You find SPJS-utility.js here.

Alexander

JSLink: Add client side rendering to a field

Please note that JSLink / Client side rendering is only available in SharePoint 2013.
Change log
July 26, 2015
Updated the code for the JSLink tool to let you pick the field from the list so you don’t have to know the FieldInternalName. The tool is now in v1.1, but I have not updated the pictures below.

Use this code to set the JSLink property of a field in a list or library. This enables you to override the default rendering of the field in NewForm, DispForm, EditForm and list views. See below for links to example files you can apply to the field.

Get the code

Get the code here, and add it to a script editor web part in a page in the site where you want to use it.

How to add a web part page in SP2013

Go to “All site contents” and change the URL like this:

.../_layouts/15/spcf.aspx
Configure the JSLink on the field

IMG

Connect to a list to change the JSLink property:
IMG

JSLink examples
Please note that the JSLink override script files must be placed in a document library in the same site as you plan to use it. When you link to the field, use the “~site” prefix to refer the current site.
Translate choice column

This example let you translate a choice column in NewForm, DispForm, EditForm and list view. Modify the function “spjs_JSLinkLocalize” in the top of the file, and the column name “Status” in the bottom of the file to match your field name (FieldInternalName).

July 26, 2015:
Code example updated with a fix for NewForm and EditForm when used in a root site.
/*
	SPJS JSLink example: Translate choice column in NewForm, DispForm, EditForm and list view.
	--------------------------
	Author: Alexander Bautz / SPJSBlog.com
*/

/* Change the "spjsJSLinkTranslations" object to match your choices */
function spjs_JSLinkLocalize(){
	switch(_spPageContextInfo.currentLanguage){
		case 1044:
			spjsJSLinkTranslations = {
				"New":"Ny",
				"In progress":"Pågår",
				"Closed":"Lukket"
			};
		break;
		case 1031:
			spjsJSLinkTranslations = {
				"New":"Neu",
				"In progress":"In Bearbeitung",
				"Closed":"Geschlossen"
			};
		break;
	}
}

function spjs_JSLinkFieldOverride(t,ctx){
	var a = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx), b, c, h, s, img = (_spPageContextInfo.webServerRelativeUrl !== "/" ? _spPageContextInfo.webServerRelativeUrl : "")+"/_layouts/15/images/loadingcirclests16.gif";
	switch(t){
		case "preRender":
			if(typeof spjsJSLinkData === "undefined"){
				spjsJSLinkTranslations = {};
				spjsJSLinkData = {
					"ticker":0
				};
				if(typeof $ === "undefined"){
					spjs_jQueryLoading = true;
					h = document.getElementsByTagName('head')[0];
					s = document.createElement('script');
					s.src = "https://code.jquery.com/jquery-1.11.3.min.js";
					h.appendChild(s);
				}
				spjs_JSLinkLocalize();
			}
		break;
		case "postRender":
			// Nothing here at the moment
		break;
		case "newform":
		case "editform":
			if(a.fieldSchema.FieldType === "Choice"){
				c = a.fieldSchema.FormatType;
				b = "<span class='spjs_JSLinkHiddenField' style='display:none'>"+SPFieldChoice_Edit(ctx)+"</span><img src='"+img+"' onload='spjs_JSLinkTranslate(this,"+c+");' />";
			}else if(a.fieldSchema.FieldType === "MultiChoice"){
				c = 2;
				b = "<span class='spjs_JSLinkHiddenField' style='display:none'>"+SPFieldMultiChoice_Edit(ctx)+"</span><img src='"+img+"' onload='spjs_JSLinkTranslate(this,"+c+");' />";
			}
		break;
		case "dispform":
		case "view":
			if(spjsJSLinkTranslations[ctx.CurrentItem[ctx.CurrentFieldSchema.Name]] !== undefined){
				b = spjsJSLinkTranslations[ctx.CurrentItem[ctx.CurrentFieldSchema.Name]];
			}else{
				b = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
			}
		break;
	}
	return b;
}

function spjs_JSLinkTranslate(elm,type){
	if(typeof $ === "undefined"){
		if(spjsJSLinkData.ticker > 50){
			alert("Failed to load jQuery");
		}else{
			setTimeout(function(){
				spjs_JSLinkTranslate(elm,type);
			},100);
		}
	}else{
		switch(type){
			case 0:
				$(elm).parent().find("option").each(function(i,o){
					if(spjsJSLinkTranslations[$(o).text()] !== undefined){
						$(o).text(spjsJSLinkTranslations[$(o).text()]);
					}
				});
			break;
			case 1:
				$(elm).parent().find("input:radio").each(function(i,o){
					if(spjsJSLinkTranslations[$(o).next().text()] !== undefined){
						$(o).next().text(spjsJSLinkTranslations[$(o).next().text()]);
					}
				});
			break;
			case 2:
				$(elm).parent().find("input:checkbox").each(function(i,o){
					if(spjsJSLinkTranslations[$(o).next().text()] !== undefined){
						$(o).next().text(spjsJSLinkTranslations[$(o).next().text()]);
					}
				});
			break;		
		}		
		$(elm).fadeOut(200,function(){
			$(elm).parent().find(".spjs_JSLinkHiddenField").fadeIn(200);
		});
	}
}

var spjsJSLink = {}; 
spjsJSLink.Templates = {}; 
spjsJSLink.Templates.OnPreRender = function(ctx){return spjs_JSLinkFieldOverride("preRender",ctx);};
spjsJSLink.Templates.OnPostRender = function(ctx){return spjs_JSLinkFieldOverride("postRender",ctx);}; 
spjsJSLink.Templates.Fields = { 
	"Status": {
		"View":function(ctx){return spjs_JSLinkFieldOverride("view",ctx);},
		"NewForm":function(ctx){return spjs_JSLinkFieldOverride("newform",ctx);},
		"DisplayForm":function(ctx){return spjs_JSLinkFieldOverride("dispform",ctx);},
		"EditForm":function(ctx){return spjs_JSLinkFieldOverride("editform",ctx);}
	}
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(spjsJSLink);
Use the forum for discussions

JSLink Forum

Approve or reject list items

I have previously posted a JavaScript solution for approving multiple documents or list items. This is an updated version that adds two buttons in the ribbon: one for “Approve” and one for “Reject”. Refer the original solution for details, but please note that the variables for controlling the text values have changed.

Use this code to load the solution in a list view
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="/Scripts/ApproveOrRejectSelected.js"></script>
Change the default text values

If you are happy with the default, English text, you can skip this next step.

To override the default text, add this to the CEWP below the script reference to “ApproveOrRejectSelected.js”,and change the text as you like:

<script type="text/javascript">
spjs.contentApproval.text = {
	"approveBtn":"Approve selected",
	"rejectBtn":"Reject selected",
	"groupLabel":"Approve or Reject",
	"working":"Processing items...",
	"done":"{0} items processed"
};
</script>

You can wrap it like this to switch based on the logged in users language (in MUI environments):

switch(_spPageContextInfo.currentLanguage){
	case 1044:
		// Add Norwegian values
		spjs.contentApproval.text = {
			"approveBtn":"Approve selected",
			"rejectBtn":"Reject selected",
			"groupLabel":"Approve or Reject",
			"working":"Processing items...",
			"done":"{0} items processed"
		};
	break;
	case 1031:
		// Add German values
		spjs.contentApproval.text = {
			"approveBtn":"Approve selected",
			"rejectBtn":"Reject selected",
			"groupLabel":"Approve or Reject",
			"working":"Processing items...",
			"done":"{0} items processed"
		};
	break;
}
Download ApproveOrRejectSelected.js

Get the file here.

Alexander

Cascading dropdowns now supports multi choice

I have updated the cascading dropdown solution to support multi choice in all positions. Refer this article for setup instructions and background information.

To use multichoice on the select, you must use a multiline plain text field as “placeholder”, and address the field like the field “ThisListField2” in the “spjs.casc.init” function:

spjs.casc.init({
	lookupList:"NameOfYourList",
	lookupListBaseUrl:"BaseUrlOfYourList",
	lookupListFields:["LookupListField1","LookupListField2"],
	thisListFields:["ThisListField1","ThisListField2:multi"],
Edit form

IMG

Display form

IMG

List view

IMG

If you plan to use this with DFFS you must update to DFFS backend v4.259 to support the “:multi” suffix in the cascading dropdown configuration.

Post any questions in the forum

If you do not already have a forum user, look at the sticky post Register for a user account.

Alexander

SPJS Poll for SharePoint v2.0

I have brushed up the 5 year old solution Poll for SharePoint, to change the deprecated “Google Image Charts to use Google Charts (AKA Google Visualization). The Image Charts are officially deprecated, but will probably continue working for some time, but to ensure you have a working solution, you should upgrade to this new version.

Please note that there are some changes to the Content Editor Web Part code, so existing users must not only update the script file, but also look over the CEWP code and make some small changes.

This code lets you generate polls without the need for server side installed WebParts.
Change log
March 15, 2015
v2.0 released. This one has no new functionality, but the code has been brushed up, and now the charts are generated using “Google Charts” rather than “Image Charts”.
Poll

IMG

Result with column chart

IMG

How to set it up
Create a custom list with the following fields
  • Answer: Single line of text
  • Question: Single line of text

Name it anything you like, but keep the display name fairly simple (no special characters) as you will use the display name in the CEWP code.

CEWP code

The CEWP code below refers jQuery from Google. If you have a local copy of jQuery you can change the script src. You find the code for the file “SPJS-Poll.js” at the bottom of the page.

NOTE: You must change the script src for the file “SPJS-Poll.js” and “spjs-utility.js” to point your instance of the files – the CEWP code will not work unless you do this.
Place this code where you want the poll to appear:
<div id="SPJS_Poll"></div>
<link type="text/css" href="/Scripts/Poll/spjs_poll.css" rel="stylesheet">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/Scripts/spjs-utility/spjs-utility.js"></script>
<script type="text/javascript" src="/Scripts/Poll/SPJS-Poll.js"></script>
<script type="text/javascript">

// Preload the chart solution
google.load("visualization", "1", {"packages":["corechart","table"]});

// If you want to override these texts, uncomment the object and localize as you like.
/* 
	spjs.poll.text = {
		"submitLinkText":"Submit",
		"backLinkText":"Back",
		"showResultBtnText":"Show result",
		"pollNotActiveText":"The poll is not active prior to {0}",
		"pollEndedText":"The poll ended on {0}",
		"alreadyRespondedText":"You answered: ",
		"totalResponsesLabel":"Total responses: ",
		"chartLegendLabels":["Answer","Count"]

	};
*/

spjs.poll.init({pollAnswerListName:'Poll',
				listBaseUrl:L_Menu_BaseUrl,				
				id:"Poll_3", // Allowed characters id a-z, 0-9 - and _
				start:"01/02/2015", // format: mm/dd/yyyy
				end:"03/15/2015", // format: mm/dd/yyyy
				singleResponse:false,
				q:"What is your favorite junk food?",
				qStyle:"font-size:1.5em;color:#444;",
				aStyle:"font-size:xx-small",
				a:["Pizza","Hot dog","Hamburger","Neither of them"], // Leave empty for free input				
				color:["red","green","blue","orange"],
				forceLowerCaseAnswer:false, // Group result by lowercase				
				chart:"col", // table, bar, col or pie
				height:200,
				width:500});

</script>

Object attributes explained

  • pollAnswerListName: DisplayName or GUID of the list that stores the answers
  • listBaseUrl: The baseUrl of the site. This is like “/sites/hr” when the list is located in the site “hr” under “/sites”. Use L_Menu_BaseUrl (or omit the property) for current site.
  • id: The unique id of the poll. All poll answers are stored in a list and this id is used to separate each poll
  • start: Start date in the format mm/dd/yyyy
  • end: End date in the format mm/dd/yyyy
  • singleResponse: true for one reply per user, false for unlimited number of replies
  • q: Poll question. To have a linefeed in the question, use <br>
  • qStyle: CSS syntax style
  • aStyle: CSS syntax style
  • a: Answers in an array format. To use free input and not predefined answers, leave the array empty.
  • color: Colors for the chart in an array format. This must have the same length as the previous parameter – one color for each answer
  • forceLowerCaseAnswer: Primarily for use with free input to avoid getting two “series” when the only difference are uppercase characters.
  • chart: “bar” for bar chart, “col” for column chart, “pie” for pie chart or “table” for a plain table.
  • height: Height in pixels
  • width: Width in pixels
Regarding free input

If you leave the attribute “a” as an empty array, the user can supply free text as “answer”. When using free input, the result are automatically presented as a table.

Download code

The code for the file SPJS-Poll.js. You find spjs-utility.js here.

Questions or feedback

Post any questions in the forum

Alexander

DFFS v4.250 released

This release has multiple changes and additions from the previous production release (v4.200). You find the complete changelog her: http://spjsblog.com/dffs/dffs-change-log/

I will show you one enhancement in particular – the new options for side-by-side headings and labels:
IMG

This layout is achieved with this configuration
In the “Tabs” tab I have added this configuration:

IMG
Please note how the headers are moved to the side-by-side column using the “Header ID”.

In the Side-by-side tab I have added these labels:

IMG

In the Custom CSS section in the Misc tab I have added this code:
.dffs-vertical-text{
text-align:center;
transform: rotate(-90deg);
font-size:22px;
}
td.sbs_tdIndex_1, td.sbs_tdIndex_2, td.sbs_tdIndex_3, td.sbs_tdIndex_4{
	width:350px !important;
}
td.sbs_Field input.ms-long, td.sbs_Field div.sp-peoplepicker-topLevel{
	width:250px !important;
}
Comments and feedback

Please add any comments, questions or feedback in the forum: http://spjsblog.com/forums/forum/dynamic-forms-for-sharepoint/

Alexander

SPJS-Lookup: Convert a single line textfield to a dropdown select based on a query

Change log

You find the latest change log here: http://spjsblog.com/dffs/dffs-change-log/

v1.11 (August 17, 2015):
Fixed an error resulting in existing values not validating when loadign an item in EditForm.

v1.10 (February 28, 2015):
If you want to have the same list of choices in multiple fields, you can now populate an unlimited number of fields from one single query. All you have to do is to use an array of fields in the parameter “fieldToConvertToDropdown”. See code example below for details.

v1.05 (February 12, 2015):
Added option to specify a folder in the query. The custom CAML or query will search only in the specified folder. Please note that you must update spjs-utility.js to v1.205 or later.

v1.04:
Removed a border around an image that occurred in SP 2010.

v1.03:
Fix for “addToExternalList” when using the solution for multiple fields in a form, and more than one targetted the same lookup list. The callback would refresh the bottom SPJS-Lookup field as the “argument object” was not uniquely identified.

January 21, 2015
v1.02:
Fixed a bug where I had mistakenly used the display name and not the FieldInternalName as identifier for the fields.

This is a remake of a solution I posted in 2009. It does mostly the same as the old one, but the code is overhauled, and it is now compatible with DFFS.

What does it do?

This solution is used to convert a single line of text field into a dropdown select. The options for this select is the result of a query you build in the function call. You can use it to query any list within the same site collection. You have an option to add new values to the “lookup list” on the fly, or to enter a value free hand.

This solution is compatible with SP2007, SP 2010 and SP2013.

DFFS plugin

This is compatible with DFFS, but you will not find a dedicated “tab” in DFFS to set it up. You must therefore use the same code for both DFFS and standalone use. With DFFS you have the option to put the function call in the Custom JS section in the Misc tab.

The code

If you use it as a standalone solution, you must refer jQuery and SPJS-utility.js in addition to SPJS-lookup.js.

In a standalone setup it will look something like this
<script type="text/javascript" src="/code/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/code/spjs-utility.js"></script>
<script type="text/javascript" src="/code/spjs-lookup.js"></script>
<script type="text/javascript">
// Put the contents from the code block below here.
</script>

If you use it with DFFS, the only extra script you need is this (in the DFFS_frontend CEWP) – put it below the reference to spjs-utility.js:

<script type="text/javascript" src="/code/spjs-lookup.js"></script>
The function call
spjs.lookup.init({
	"fieldToConvertToDropdown":["MyTextField"],	
	"listName":"Tasks",
	"listBaseUrl":"/Sites/MySite",
	"optTextFieldInternalName":"Title",
	"sortFieldName":"Title",
	"filterObj":{
		"on":true,
		"folder":"", // Leave empty to search in all folders
		"CAML":null, // If used, the rest of the filterObj settings are disregarded
		"fin":"Completed",
		"isLookup":false,
		"operator":"Neq",
		"filterVal":"1"
	},
	"dropDownDefaultvalue":"...",
	"addYouOwnValue":{
		"on":true,
		"linkText":"Write your own value"
	},
	"addToExternalList":{
		"on":false,
		"customFunction":null, // Function name as a string. If a function name is supplied, this will be used in stead of the default function. The function will be passed the argument object as a parameter.
		"linkText":"Add new item",
		"saveNewItemText":"Save new item"
	},
	"debug":false
});
Parameter details
  • fieldToConvertToDropdown: This is an array or FieldInternalNames of the fields in the current list that you want to convert to a dropdown. Specify multiple fields like this: [“FirstField”,”SecondField”] to have all server the same options based on one single query.
  • listName: This is the display name or the list GUID of the list you read the options from.
  • listBaseUrl: This is the base URL of the list you read the options from. If the list is on the root site of your domain, the value will be an empty string like this “”. If it is on a managed path, it will be something like this: “/Sites/MySite”
  • optTextFieldInternalName: This is the FieldInternalName of the field that represents the options you want to show in the dropdown select.
  • sortFieldName: This is the FieldInternalName of the field you want to sort the options by. Most likely the same as “optTextFieldInternalName”.
  • filterObj
    • on: true or false to tell if the options should be filtered. If false, all options will be shown.
    • folder: Here you can provide a relative URL to a folder like this: /Sites/MySite/Lists/MyList/MyFolder/MySubFolder
    • CAML: Here you can provide the full CAML query to filter by. If this is left as null, the other options below will take effect.
    • fin: The FieldInternal name you want to filter on.
    • isLookup: true or false. If you filter by a text value, use false. If you filter by an ID in a lookup field, set it as true.
    • operator: Use anu valid CAML operator like “Eq”, “Neq”, “BeginsWith” or “Contains”.
    • filterVal: This is the value you want to filter by.
  • dropDownDefaultvalue: This is the default value in the dropdown when it has not been selected.
  • addYouOwnValue
    • on: true or false. This controls whether or not to show a link to “kill” the dropdown and show the underlaying text field.
    • linkText: This is text on the link.
  • addToExternalList
    • on: true or false. This controls whether or not to show a link to add an item to the list you are pulling the options from.
    • customFunction: If you want to override the built “addToExternalList” function, add your custom function name here like this: “myAddListItemFunc”. The function itself must be present in the page, and it will get the full “argObj” passed to it as a parameter.
    • linkText: The link text that initiates the “addToExternalList” function.
    • saveNewItemText: The text on the “save” link.
  • debug: true or false. If true, the underlaying text field will not be hidden, and you will see a yellow information panel in the top of the page.
Setting a value in a field with this solution activated

To set the value of a field when using this solution, use code like this:

spjs.lookup.setValue("FieldInternalName_of_your_field","The value you want to set");

This will also work with DFFS and will trigger any rule currently configured for the underlaying text field (by triggering the blur-event).

Questions or feedback

Please use the forum for all questions related to this solution.

Alexander

DFFS v4.210 BETA

BETA 2 of DFFS frontend released January 19, 2015
Please note that this version is BETA and is NOT intended for a production environment.

I have released a new BETA version (v4.210 BETA) of DFFS, but I need help testing it as I have made some fundamental changes to how “initial values” are retrieved, and to how read only fields are “styled” to maintain the correct width of the field. There are also a quite a few bugfixes and other changes that I would like your feedback on.

The full change log is as follows
Changes and new features
  • Changed how read only fields are “styled” when using side-by-side to try to maintain the width of the field. This change needs testing – let me know how it works in your setup.
  • Changed how initial value is retrieved when the form loads. Previously DFFS read the values from the fields using the function “getFieldValue”, but now it uses a web service call to get the current item metadata from the DB. This is done to try to overcome the problems some have been experiencing with people pickers not being ready when set to readonly when the form loads. This change needs testing – let me know how it works in your setup.
  • Changed how you reorder fields in tabs in the backend.
  • Boolean values will be displayed as checkboxes in DispForm.
  • New: Changed tab color on hover to a slightly lighter color (update CSS file for the frontend).
  • Added class “dffs-accordion-activePanel” to active accordion panel. You can use this class for your “custom code”.
  • New: Added support for comparing dates with hours and minutes. Please note that you cannot use hour and minute when comparing dates in DispForm.
  • New: Added “between” operator.
  • New: You can now add a new field to the list from the Misc tab (SP 2010 and 2013 only).
Bugfixes
  • When no configuration has been created for a form, the overlay would time out with “This took forever”.
  • When using side-by-side and hidden label you could got a linefeed after the star that indicates that the field is required.
  • Selected tab index trigger: added “change event” as this trigger only fired on load and not on change of tab.
  • Only the first rule using the trigger “Selected tab index” could be used in “and these rules are true”.
  • The rule debug output was missing “run these functions”.
  • Date pickers: In some cases, errors would appear in the developer console in SP2013 when operating date pickers.
  • Date pickers: The “blur” event was not triggered on the “master” datepicker when using “linked” datepickers and modifying the “slave”.
  • When a field was configured in DFFS, but it was not in the current content type, you could in some cases get an error like “unable to get the property “hidden” of undefined or null reference” in the developer console.
  • The Attachement field will no longer trigger the “orphans” tab.
  • In the frontend I have changed from referring jQuery as $ to use spjs.$ due to an error in SharePoint when using rich text fields and “Insert > Link > From SharePoint” as the file “assetpicker.js” will “kill” jQuery by overriding the global $ variable. This would result in a complete halt in all the functionality in DFFS (and other plugins using jQuery). Please note that other plugins must also be updated. Look at the change log for each one to see which one have been updated.
  • Scroll to first input will no longer make the form scroll down. If the first input is off the visisble sceen, it will not get focus.
  • BETA 2: Fixed bug occurring when you for some reason had duplicates of the configuration in the configuration list. Now only the first “match” will be used, and you will no longer see duplication of rules and tabs.
  • BETA 2: Fixed a bug where “rule messages” did not show for readonly fields.
  • BETA 2: Fixed a bug in setting field value for a date only field when this is read only. It will now show date only and not date and time. Please note: You must also update spjs-utility.js to v1.200 or later.
Get the BETA version here

Follow this link, and ensure you get the latest version. PS: The files are uncompressed, therefore the files are bigger than the production release.

Give feedback in the forum

Please post any findings or questions regarding the 4.210 BETA in this topic in the forums.

Unfortunately I have not been able to test this as thoroughly as I wanted, but I could not wait any longer to make it available. Post any findings to the forum, and I will fix the issues as soon as I can manage.

The more of you that gives feedback, the faster the production version will be released!

Best regards,
Alexander