All posts by Alexander Bautz

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

SPJS Charts for SharePoint: Export to Excel and SP2013 support

A few months ago I received this email from Aymeric:

Hi Alexander,

I’ve created a JS API to use with Sharepoint. You may want to have a look at it: http://aymkdn.github.com/SharepointPlus/
I think this library could be useful for some other people. It’s on GitHub so feel free to share any comments.

Thank you,
Aymeric

It took me “forever” to look at this API, but I finally had a go at it, and decided to use one of the methods: createFile in the SPJS Charts for SharePoint solution to be able to export the chart data to Excel as a CSV file.

New in v3.4 of SPJS Charts for SharePoint

You find the “Enable export to Excel as comma-separated values (CSV)” under the “Advanced options” section in the SPJS Charts for SharePoint GUI. When you enable this feature (done individually for each chart), you can hover over the chart to show a label in the bottom right corner of the chart. Hit this to create the file. When the file is successfully created, you are prompted to open it directly.

To achieve this I included the file “sharepointplus-3.0.3.js” in the CEWP code, and I created a function that exports the chart data as comma-separated values, which I then “inject” in a dedicated document library using Aymerics API method “createFile”. This document library is automatically created the first time you save a chart with the “Export feature” enabled.

You do NOT have to load the “sharepointplus-3.0.3.js” file if you do not intend to use the export to CSV feature. If you try to enable it, and “sharepointplus-3.0.3.js” is not loaded, you will get instruction on how to get hold of the file.

The exported files

The files are named from the path to the page where the chart is located, the chart id and the user ID of the user exporting the chart. This means that the library “SPJS_ExcelExports” will not get filled up as the file is overwritten for each time the user exports the same chart. If you want to keep the file, save it in another location, or at least save it with another name to prevent it from being overwritten.

Example of the CEWP code with “sharepointplus-3.0.3.js” loaded:

<style type="text/css">
div.chartLoadingOverlay{
	font-style:italic;
	color:gray;
	border:1px silver solid;
	background-color:#F5F5F5;
	line-height:250px;
	height:250px;
	width:500px;	
	text-align:center;	
	margin:2px;
}
</style>

<!-- The chart container is set up with an overlay to let the user know the chart is rendering -->
<div id="MyChart1">
	<div class='chartLoadingOverlay'>Loading chart please be patient...</div>
</div>

<script type="text/javascript">
/*****************************************************
		Address all containers
*****************************************************/
// All charts must be represented by a container with a unique id. 
// This container  must be present in the page
var arrOfChartContainers = ["MyChart1"];
var loadRC = false;
// Set this to true to allow for the use of variables in the "Filter setup textarea"
var allowEval = false;
// Set this to true to delay the loading of the chart.
var loadManually = true;
// You can override chart options set in the GUI
var chartOptionOverride = {"TheChartID":{"title":"This is the chart title!"}};
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="/test/English/Charts/Javascript/SPJS_ChartsForSharePoint_v3.4.js"></script>
<!-- Used to enable export of chart data as CSV -->
<script type="text/javascript" src="/test/English/Charts/Javascript/sharepointplus-3.0.3.js"></script>
<!-- Used to enable export of chart data as CSV -->
<script type="text/javascript">
// This function will load the charts
function manualLoad(){
	loadManually = false;
	spjs_GenerateChart();
}

// Delay the call to the function by 10ms to give the overlay time to render 
setTimeout(function(){
	manualLoad();
},10);
</script>
SharePoint 2013

In v3.4 I have made a “quick pass” trough the code to fix some compatibility issues for SharePoint 2013.

Because this solution is funded with an occasional beer donation, I cannot fully test it as if it was a commercial product. Therefore I must rely on you guys to find the rest of the bugs. Post them here, and I’ll fix them as soon as I can manage.

Alexander

The SharePoint JavaScripts blog has been moved to a new server

Hi all followers!

I have decided to move the blog from wordpress.com to a self-hosted WordPress server for better control.

To ensure your receive email notifications when I post new articles, please enter your email address in the form in the top right corner of my blog

I have added a redirect on my old URL, but if you accessed this site trough the old URL, you should update your bookmark for direct access. The new blog is found here:

You find my blog here: https://spjsblog.com/
You can also follow @SPJavaScripts on Twitter

Stay tuned,
Alexander