Category Archives: Utilities

Translate SharePoint form field label and description by a dropdown select

Change log
August 08. 2013
Moved the code for the file “TranslateFormFields.js” to spjsfiles.com due to errors in the preview.

I got this request from Mary Larson for a solution to translating a SharePoint 2010 form in 20+ languages by the selection of a desired language in a dropdown select.

I guess installing all these languages as language packs and using the MUI interface to translate the form is not an option.

I created this solution for translating the form label and description (description not supported in DispForm) – with cookie support for remembering the selected language.
IMG

Get the code for the file TranslateFormFields.js here.

You can either include this code in the HTML Form Web part or you can put it in a folder as a separate file and refer it using a script tag.

When the above code is referred, call the translation script like this from a HTML form Web part placed below the form web part:

<script type="text/javascript" src="/Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/Scripts/TranslateFormFields.js"></script>
<script type="text/javascript">

/*
	The translation setup:
	dropdownLabel: "text" is the displayed text, "style" is the CSS style you want to apply to the label.
	dropdownDefaultVal: This is the initial value you want to display in the dropdown.
	lcArr: This is the array of languages as they should appear in the dropdown select.
	translations: This is an object literal in this format:	
		FieldInternalName_of_field : [
						{
							"label":"Tittel",
							"description":"This is the norwegian title"
						},
						{
							"label":"Titel",
							"description":"This is the swedish title"
						}
					]
*/

spjs.translateForm.init(
	{
		"dropdownLabel":
			{
				"text":"Translate",
				"style":"font-weight:bold"
			},
		"dropdownDefaultVal":
			"English",
		"lcArr":
			[
				"Norwegian",
				"Swedish"
			],	
		"translations":
			{
				"Title":
					[
						{ // Norwegian
							"label":"Tittel",
							"description":"This is the norwegian title"
						},
						{ // Swedish
							"label":"Titel",
							"description":"This is the swedish title"
						}
					],
				"Status":
					[
						{ // Norwegian
							"label":"Prosjektstatus",
							"description":"This is the norwegian status"
						},
						{ // Swedish
							"label":"Projektstatus",
							"description":"This is the swedish status"
						}
					]
			}
	}
);
</script>

This code is tested in a out of the box SharePoint 2010 only, but it most likely will work in out of the box forms in SP 2007 and 2013 as well.

Please let me know if you have trouble getting it to work, or you have any success stories.

If you like the solution, please click the beer mug in the top right margin of this page to buy me some beer!

Alexander

Dynamic Forms for SharePoint: Now with field tooltip

Change log
June 03. 2013
Changes in v2.981

  • Added Danish date format (LCID 1030).
  • Added option to arrange multilookup columns vertically.
  • Changed the identifier for the headings to prevent them from getting a new ID when they are moved or another heading is deleted.
  • Fixed a bug setting a multichoice column as mandatory using the fill-in option.

Multichoice columns vertical:
IMG

May 20. 2013
Changes in v2.98

  • Added support for arranging checkboxes (choice columns – allow multiple selections) in multiple columns. You find it under the Misc tab.

This update requires you to update the *.js and the *.css.

May 16. 2013
Changes in v2.971

  • Fixed required field check for multichoice columns.

This update requires you to update the *.js.

May 13. 2013
Changes in v2.97

  • Fixed missing trigger for Currency field.
  • Added option to initially hide a list of fields. This option is found under the Misc tab.

This update requires you to update the *.js.

May 13. 2013
Changes in v2.961

  • Fixed a bug in bringing fields visible when NOT using Tabs.
  • Cosmetics: Hidden the “Edit button” behind an image. Update the CSS file to have it initially hidden.

This update requires you to update both the *.js file and the *.css file.

May 10. 2013
Changes in v2.96

  • Disabled the solution when the page is in edit mode to prevent errors.
  • Fixed a glitch in “reversing” rules when using multichoice checkboxes.
  • Attempted to fix a chrome issue with disappearing scrollbars.
  • Added an option to include an overlay with “Loading, please wait…” to prevent flashing the unformatted form when loading – see details below.

In this release only the *.js file has changed, but if you want to use the overlay, follow the instructions below.

Overlay
IMG

If you have some errors in your setup, or you do not have the latest version of the DFFS solution (2.96+), you will see this message after 5 seconds:
IMG

To use the overlay, place a HTML Form Web part ABOVE the form, and insert this code:

<style type="text/css">
.dffsOverlay{
	font-size:16px;
	padding-top:100px;
	text-align:center;	
	width:100%;
	height:100%;
	background-color:#F5F5F5;
	position:absolute;
	top:0;
	left:0;
	z-index:9999;
	cursor:default;
}
</style>
<div id='dffs_loadingOverlay' class='dffsOverlay'>Loading, please wait...</div>
<script type="text/javascript">
	setTimeout(function(){
		var oDiv = document.getElementById("dffs_loadingOverlay");
		if(oDiv !== null){
			oDiv.innerHTML = "<span style='font-size:20px'>This took forever!<span style='font-size:12px'><br><br>Ensure Dynamic Forms for SharePoint v2.96+ is referred correctly.<br><br>Click to close this overlay.</span></span>";
			oDiv.onclick = function(){
	   			this.parentNode.removeChild(this);
			};
		}
	},5000);
</script>
The article

I have updated the Dynamic Forms for SharePoint solution and incorporated the Form Field Tooltip for SharePoint 2007 and SharePoint 2010 solution.

The DFFS solution still supports SharePoint 2007, 2010 and 2013.

New in this release
Added tooltip:
Config
IMG
Form
IMG

Keep focus on tab through DispForm to EditForm
I have rigged it so that you will keep focus on the same tab when you edit a list item from DispForm.

How to update
You must update both the *.js and the *.css file. Get the latest version of the files from here

If this is the first time you implement this solution, please start with the first article linked above for setup instructions.

Update spjs-utility.js
You should update spjs-utility.js to v1.15 as I have fixed a bug in “getFieldValue” when using “Allow ‘Fill-in’ choices”.

Please comment below if you find a bug – or you like this solution.

Alexander

SharePoint form: present fields side-by-side: Updated version

I have previously posted a solution for presenting form fields side-by-side.

This is an updated version derived from the DFFS project.

I have made this updated version by request from Steve Eberl because the older version proved incompatible with IE10. Hopefully this new version will be more compatible, but honestly: I have not tested it in IE10, as I have not installed it yet!

I have done some quick tests in SharePoint 2007 and SharePoint 2010. I guess it will work for SharePoint 2013 also, but this has not been confirmed. Please let me know if someone has tested it.

<script type="text/javascript" src="/test/English/Javascript/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="/test/English/Lists/SideBySide/spjs-utility.js"></script>
<script type="text/javascript">

spjs_sideBySide = {
	"data":{"css":false},
	"apply":function(fObj,arr){
		var h, b;
		if(!spjs_sideBySide.data.css){
			var cssArr = [];
			cssArr.push("<style type='text/css'>");
			cssArr.push(".sbs_FieldTable td.ms-formbody{border-top:none;width:auto;}");
			cssArr.push(".sbs_FieldTable td.ms-formlabel{border-top-color:#d8d8d8;width:auto;}");
			cssArr.push(".sbs_FieldTable input.ms-long{width:auto;}");
			cssArr.push("</style>");
			$("body").append(cssArr.join(""));
			spjs_sideBySide.data.css = true;
		}
		$.each(arr,function(i,o){
			if($("#sbs_OuterTR_"+o.index).length===0){
				$(fObj[o.fin]).before("<tr class='sbs_OuterTR' id='sbs_OuterTR_"+o.index+"'><td valign='top' colspan='2'><table class='sbs_OuterTable' style='width:100%' cellpadding='0' cellspacing='0'><tr class='sbs_InnerTR' id='sbs_InnerTR_"+o.index+"'></tr></table></td></tr>");
			}
			h = $(fObj[o.fin]).css("display") === "none";
			b = [];
			b.push("<td FieldDispName='"+$(fObj[o.fin]).attr('FieldDispName')+"' FieldType='"+$(fObj[o.fin]).attr('FieldType')+"' class='sbs_Field' fin='"+o.fin+"' id='sbs_Field_"+o.fin+"' valign='top' style='white-space:nowrap;");			
			if(h){
				b.push("display:none;");				
			}
			b.push("'>");
			b.push("<table class='sbs_FieldTable' style='width:100%' id='sbs_FieldTable_"+o.fin+"' cellpadding='0' cellspacing='0'></table>");
			b.push("</td>");
			$("#sbs_InnerTR_"+o.index).append(b.join(""));
			if(o.labelHidden){
				$(fObj[o.fin]).find("td.ms-formlabel").hide();
				if(o.padHiddenLabel){
					$("#sbs_FieldTable_"+o.fin).append("<tr class='sbs_FieldLabel' id='sbs_FieldLabel_"+o.fin+"'><td class='ms-formlabel'> </td></tr>");
				}
			}else{
				$("#sbs_FieldTable_"+o.fin).append("<tr class='sbs_FieldLabel' id='sbs_FieldLabel_"+o.fin+"'></tr>");
				$(fObj[o.fin]).find("td.ms-formlabel").appendTo($("#sbs_FieldLabel_"+o.fin));
			}
			$(fObj[o.fin]).appendTo($("#sbs_FieldTable_"+o.fin));
			fObj[o.fin] = $("#sbs_Field_"+o.fin)[0];
			if(h){
				$(fObj[o.fin]).find("td.ms-formbody").parent().show();
			}				
		});
	},
	"resize":function(){
		if(GetUrlKeyValue('IsDlg')!=='1'){
			return;
		}
		if(_spPageContextInfo.webUIVersion === 15){
			ExecuteOrDelayUntilScriptLoaded(function(){
				SP.UI.ModalDialog.get_childDialog().autoSize();
			}, "sp.js");
		}else{
			// http://blog.collabware.com/2012/10/30/tips-tricks-sharepoint-2010-modal-dialogs/
			var dlg = SP.UI.ModalDialog.get_childDialog();
			if(dlg != null) {				
				if(!dlg.$S_0 && dlg.get_$Z_0()){
					dlg.autoSize();
					var xPos, yPos, win = SP.UI.Dialog.get_$1(), xScroll = SP.UI.Dialog.$24(win), yScroll = SP.UI.Dialog.$26(win);
					xPos = ((SP.UI.Dialog.$1d(win) - dlg.$2_0.offsetWidth) / 2) + xScroll; 
					if (xPos < xScroll + 10) {
						xPos = xScroll + 10;
					}
					yPos = ((SP.UI.Dialog.$1c(win) - dlg.$2_0.offsetHeight) / 2) + yScroll;
					if (yPos < yScroll + 10) {
						yPos = yScroll + 10;
					}
					dlg.$T_0 = xPos;
					dlg.$U_0 = yPos;
					dlg.$m_0(dlg.$T_0, dlg.$U_0);
					dlg.$H_0.style.width = Math.max(dlg.$6_0.offsetWidth - 64, 0) + 'px';
					dlg.$2B_0();
				}
			}
		}
	}
}

var fields = init_fields_v2();
/*
	index: Use the same index for all fields in the same row.
	fin: FieldInternalName of the field.
	labelHidden: Hide form label.
	padHiddenLabel: If labelHidden = true, set this to true to fill the empty space left from the hidden formlabel.
*/

var arr = [
	{"index":"1","fin":"FirstName","labelHidden":false,"padHiddenLabel":true},
	{"index":"1","fin":"MiddleName","labelHidden":false,"padHiddenLabel":true},
	{"index":"1","fin":"LastName","labelHidden":false,"padHiddenLabel":true},
	{"index":"2","fin":"DropDownChoice","labelHidden":false,"padHiddenLabel":true},
	{"index":"2","fin":"RadioButtonsChoice","labelHidden":false,"padHiddenLabel":true},
	{"index":"2","fin":"CheckboxesChoice","labelHidden":false,"padHiddenLabel":true}
];

spjs_sideBySide.apply(fields,arr)
// For SP 2010
spjs_sideBySide.resize();
</script>

Please let me know whether it is functioning as expected.

Alexander

Dynamic Forms for SharePoint: Now with side-by-side

Change log
May 06. 2013
I have released v2.95 – you find it here
April 28. 2013
Bugfixes in v2.94:

  • Fixed a bug regarding comparing date and time columns where the trigger column is empty.

April 14. 2013
Bugfixes in v2.93:

  • Fixed bug in validating required rich text field when using non English letters.
  • Fixed bug where fields appearing in the “orphan fields tab” when using Side by Side.
  • Prevented the ID column from appearing in the “orphan fields tab”.
  • Fixed bug where people pickers lost their value in EditForm in Chrome (and possibly other non-IE browsers).

There are changes in both “DynamicFormsForSharePoint_v2.js” and “default.css” – ensure you update both.

March 29. 2013
Bugfixes in v2.91:

  • Fixed bug in side-by-side functionality regarding the “fields” not getting the correct fieldtype and fielddispname attributes.
  • Fixed bug where the field label was repeated multiple times when combining side-by-side with readonly, and then switching tab.

I have released version 2.90 of Dynamic Forms for SharePoint with these changes:

  • Added content type choice as possible trigger field.
  • Added side-by-sice capabilities.
  • Fixed a bug where the link to add tabs were missing for the first setup.
  • Changed the function that dynamically resizes the dialog. This new function is created by Sing Chan, and can be found here
  • Added a fix for some occurrences where the variable L_Menu_LCID was missing in a SP2013 setup.
  • Fixed a bug in SP.UI.RTE.js that occurs when hiding rich text columns in SP2010. The workaround is provided by John Chapman.

Refer these articles for background information and setup instructions:
Dynamic Forms for SharePoint: Production
Dynamic Forms for SharePoint – Now with Tabs
Dynamic Forms for SharePoint: Now with support for SharePoint 2013

How to use the Content type as trigger

In NewForm and DispForm the content type is not visible other than in the URL. You must use the trigger “URL Query string parameter”, and “This value” like this:

ContentTypeId=YourContentTypeID

Please note that the default content type id not always shows up in the URL. If you click the “New Item” in the ribbon (in SP2010), it is included, but if you click the “Add new item” below the list view, it is not. You should therefore add rules for the “not default content type”.

How to find the ContentTypeId
Go to list settings, click the content type you want the id from, and then look at the URL. You will find it like this:

ctype=0x010300E461AB843CED5C47B6795DF8C440401A

In EditForm, you can select the content type select ine the trigger fields and address it by its display name.

Details on the side-by-side functionality

I have added an option to place fields side-by-side in the tabs like this:
IMG

The configuration is setup like this:
IMG

The yellow input fields is used to specify a common index number for the fields that are to be presented side-by-side. The fields will be lined up with the topmost field in the selection.

The checkbox is used to hide the form label for the fields like this:
IMG

Please consider the side-by-side functionality BETA, and report any bugs back to me by adding a comment below.

Alexander

vLookup now supports SharePoint 2013

Change log
June 19. 2013
Changes in v1.47

  • Added {currentSite} as option in “List base URL” to dynamically use the current sites base url. Use this if you plan to save the site as a template.

May 15. 2013
Changes in v1.45

  • Numbers are now aligned right.

May 14. 2013
Changes in v1.44

  • Added formatter for percentage in the viewfields: {“percentage”:true,”suffix”:”%”}
  • Applied “toLocaleString” to numbers that are not formatted as “percentage”.

May 13. 2013
Changes in v1.43

  • Fixed bug related to Dynamic Forms for SharePoint and reloading form when creating a child element.
  • Fixed a bug regarding prefix and suffix for currency and number columns. Suppresses the prefix / suffix if the field is empty.

Added event hooks:

To have something done before a child element is creates, add a function with this name: “vlookupAddChildPreCheck”
This function must return true to procede with the add child action.

To have something happen after a child had successfully been added, add a funcion with this name: “vlookupChildAddedCallback”
This function must return true to procede with the updating of the “vLookup child table” in the form.

To have somethng happen after the vLoolup solution has finished loading the “Add new item button”, add a function with this name: “vLookupIsLoadedCallback”

I have upgraded the vLookup solution to support SharePoint 2013. I have not dissected SP2013 fully, and therefore you might find some bugs regarding the SP2013 support. Please post any bugs or suggestions below, and I’ll address them as soon as I can manage.

Read this article for setup instructions and download instructions

Besides adding SP2013 support, his version also features some new features:

  • Added option to write your own CAML-query freehand
  • Added dateFormat option to specify the returnvalue for a date and tinme column using a string like this: yyyy-MM-dd HH:mm:ss

IMG

Post any comments below,
Alexander

Dynamic Forms for SharePoint: Now with support for SharePoint 2013

Change log

May 06. 2013
I have released v2.95 – you find it here

March 19. 2013
v2.81 fixes a bug occurring when you set a boolean column as required.

March 01. 2013
I have released v2.8 with some new features, and a few bugfixes.
New features:

  • Add the ability to insert custom CSS and JavaScript (in the Misc tab)
  • Added “URL Query string parameter” as trigger for a rule.

Bug fixes:

  • Validating an empty lookup column with the text (none) failed. This has been fixed by checking the val() property which will be 0.
  • “showFieldDescriptionWhenReadonly” had a bug preventing it from functioning.
  • If you selected the same field twice in a tab, it misbehaved. I now strip away any duplicates by removing the last occurrence.

IMG
Refer these articles for background information and setup instructions:
Dynamic Forms for SharePoint: Production
Dynamic Forms for SharePoint – Now with Tabs

The Dynamic Forms for SharePoint solution now supports SharePoint 2013. Please note that I have just started looking at SharePoint 2013, and have tested the solution in a “Microsoft Office 365 Developer Preview” only.

There might be issues with a “non office 365” install, but you will have to tell me about it in the comments section below.

The code is shared between SharePoint 2007, SharePoint 2010 and SharePoint 2013.

Changes from v2.65

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

Setup
The setup for SP 2013 is similar to that for SP 2010. Please note that you need to update spjs-utility.js to use Dynamic Forms for SharePoint v2.7 – not only for SP 2013: get spjs-utility.js here.

See change log where you download spjs-utility.js. For setup instruction, see the first article linked in the top of this article.

Please post any findings below this article.

Please support my work by buying me a beer

PayPal