All posts by Alexander Bautz

DFFS, DFFS Plugin

DFFS, vLookup and SPJS-utility BETA 2

I have finally finished BETA 2 of the latest update of Dynamic Forms For SharePoint, vLookup for SharePoint and SPJS-utility.js.

DFFS

This update of DFFS started out as a relatively small update to support the new “add children from NewForm” in vLookup, but one thing lead to another. I have now redesigned the entire trigger handling in DFFS, and added a few new features. Here is a few lines describing the changes.

  • Rules can now be ordered as you like – rules related to one trigger does not have to be grouped together anymore.
  • Changed how rule reversing are handled to how it was before v4.301. In v4.301 I changed this to loop trough all rules that should be reversed, and to apply a “summary” of all these reversed rules after all reversals had been looped trough. This was done to try to fix a performance issue in IE8. I have now gone back to handling all rules one by one as part of a major redesign of the trigger handling. Please report any performance issues related to large lists with a lot or rules.
  • Added new trigger on people pickers in SP2013. If I get feedback that this works, I could add support for SP2010 and possibly SP2007 also.
  • Added new option to “Stop and skip to another rule”. This feature adds a kind of branching to the rule handling.
  • Added option to use “not true” in the “And these rules or functions = true / false” option in the trigger.
  • Added option in the Misc tab to “Launch EditForm in dialog” to be able to return to the DispForm after EditForm is submitted.
  • Fixed potential license validation error when using JSLink version with Google Chrome.
  • Added support for checking
  • Changed the order of Tabs and Rules tab in DFFS backend.
  • Changed layout and color scheme in DFFS backend.
  • Various small refinements of the code.
Download files

Please note that the DFFS, vLookup and other plugins are the same for the “CEWP” version and the “JSLink” version. I have however added the files in both “formats” to the download and install page.

vLookup
  • Changed handling of lookup columns when adding children to remove some internal functions in vLookup, and instead use the corresponding spjs-utility function. Please note that you must update to the latest spjs-utility version. This update is also done in vLookup receiver for NewForm.
  • Various small bugfixes and enhancements to both frontend and backend.
SPJS-utility.js
  • Various small changes related to setting lookup columns and other small fixes related to the changes introduced in BETA 1.
Feedback

Please report all issues in the forums. Let me know if you find any bugs – or if you like what you see.

Alexander

Uncategorized

SPJS-utility.js updated to v1.250 BETA 1

This version splits up “getFieldValue” and “setFieldValue” in separate functions for each of the field types. You still use them as before, but for advanced users you can now override the function for each individual field type.

In this new function layout you can for example override the function “getFieldValue_SPFieldText” to change how “getFieldValue” returns the value for a field of type “Single line of text”:

spjs.utility.getFieldValue_SPFieldText = function(a){
	return spjs.$(spjs.utility.data.fields[a.fin]).find('input').val();
}

This new layout will also let you add support for new file types in “getFieldValue” and “setFieldValue” by adding a function like this for “set”:

spjs.utility.setFieldValue_SPField[*****] = function(a){
	// change [*****] with the field type of your field, and add your custom getFieldValue logic here.
}

and like this for “get”:

spjs.utility.setFieldValue_SPField[*****] = function(a){
	// change [*****] with the field type of your field, and add your custom getFieldValue logic here.
}

Post any questions in the forum.

Keep in mind that this version id BETA and should not be used in a production environment.
Uncategorized

vLookup connection from NewForm

With the latest version of vLookup for SharePoint (for SP2010 and 2013) you can add vLookup connections from NewForm.

This requires a few extra columns added to the parent and child list, and the setup is described in the user manual.

When adding children from NewForm, you must remember to save the parent form. If not, the newly created child items will be orphaned.

Read about the setup in the user manual, and add questions or comments in the forum.

Please note that the latest version or DFFS and vLookup is currently in BETA, and should not be used in a production environment.

Alexander

CAML Query, DFFS, DFFS Plugin, SharePoint 2007, SharePoint 2010, SharePoint 2013, Utilities

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, SharePoint 2013

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

DFFS, DFFS Plugin

DFFS: JSLink version for SP2013

2 Comments

Finally, I have been able to put together a JSLink version of DFFS and all the plugins. This means you no longer need to manually edit any script files, just upload the filed to a document library, add a web part and use the GUI to set up all the DFFS resources.

Change log
July 31, 2015
Added a new button in the Site column setup section to handle some cases where the DFFS_Loader columns became orphaned and lost the connection to the site column. This new button does not reattach them to the site column, but iterates over the columns found in the site collection, and updates all columns with the new configuration.
This solution is still 100% client side, and you don’t need to involve your server administrator to set it up.
How to install

IMG
Refer the installation manual for the details, but basically, this is the steps:

  1. Create a document library
  2. Upload the files
  3. Add a web part
  4. Configure the solution in the GUI
  5. Done!
Under the hood

This solution works by adding a field to the list where you want to use DFFS. This field can either be added as a site column in the site collection root, or directly to a list where you want to use the solution. The field is automatically created in the setup page.

If you set it up as a site column, the GUI configuration in done once, and all you need is to add the site column to each of the lists where you want to activate DFFS in.

Installation files and manual

You find the installation files and the manual for the JSLink version here.

Important information when upgrading

Please note that if you upgrade from an older version, you need to manually remove all the CEWP used to refer the previous version of DFFS from the forms before you add the new “DFFS_loader” field to the list.

Calendars

Currently calendars does not support JSLink so you need to follow a slightly different method involving adding a CEWP or a script editor web part. This is described in the user manual.

Licensing

This version uses a different method to validate the license for site collection scoped licenses. This is based on a challenge-response, and is explained in the manual. This will prevent the use of a site collection scoped license in multiple site collections.

Company, Corporate or OEM licenses does not require this challenge-response actions.

Users with an existing site collection scoped DFFS v4 license, must send me the name of the original license holder, and the challenge code generated in the setup page to receive a new license code.

Important information on the DFFS-JSLink package

For easier installation, I have packaged all the plugins used with DFFS in the zipped file. This package is updated with the newest plugins each time I update DFFS, but each of the plugins may be updated on its own. If you experience issues, or want to look for updated plugins, you find the latest version for each one here:

Not using SharePoint 2013?

This new method for installing DFFS is only supported in SP2013, but you can use the files from the package in older versions as well. Set up the solution like described in the file How to set up DFFS v4 – v1.3.6.pdf. This means some of the files in the package is not used, and some are not included in the package. Refer the latest “frontend” and “backend” folders for the missing files for setup in SP2007 or SP2010.

Comments and feedback

Use the forum for all questions and comments. If you don’t have a user account, look at the sticky post in the top of the forum for details.

Alexander

Comment Box

Comment box with blog: Show comment count

I have updated the solution to be able to count the number of comments on a blog post. This modification is tested in SP2013 only. Parts of it may work for SP2010 as well, but this can not be guaranteed.

Follow the instructions in this post for the basic setup, and then follow these instructions to add the comment count.

Make the SPJS-CommentBox list visible

You must make the list “SPJS-CommentBox” visible to be able to add a lookup column from “Posts” to this list. Either use SharePoint designer (right click the list, select “Properties”, and uncheck “Hide from browser”), or use this tool: https://spjsblog.com/2014/03/26/edit-sharepoint-field-properties-in-sp2010-and-sp2013/

Add lookup field in the SPJS-CommentBox list

Add a lookup column named “ParentPostTitle” from “SPJS-CommentBox” to “Posts” like this:
IMG

Add lookup field in the Posts list

Add a lookup back to “SPJS-CommentBox” called “cBoxCount” like this – note the field “ParentPostTitle (Count Related):
IMG

Update the file “spjs-cBox_min.js” to v2.2.2 or later

Download the latest version here

Then update your function call like this:

var argObj = {
	"placeholderID":"cBox_A",
	"threadID":threadID,
	"blogMode":true, 
	"storeCommentsOnRootSite":false,
	...
	...
	...

Note the setting “blogMode”:true”.

In the “Post” page you add the cBox code like this

IMG

In the Posts list you will see the count of comments like this

IMG

Please post any questions or comments in the forum: https://spjsblog.com/forums/forum/comment-box-for-sharepoint/

DFFS

DFFS: Contribute your best DFFS forms

I get a lot of questions related to DFFS examples and tips about how create a good DFFS form. Unfortunately I have yet to find time to make these examples myself – not to mention posting YouTube videos on setup and configuration of DFFS.

What I’m asking for here, is that you take a few screenshots of your “best” DFFS form, and write two sentences about how you use it, and post it to the forum here: https://spjsblog.com/forums/topic/dffs-form-examples/

I’ll make this a sticky post in the forum.

PS: If you do not have a forum user, please request one by following these instructions.

Thanks in advance,
Alexander