Archive for the 'Javascript' Category

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