Posts tagged javascript

If you need to brand Sharepoint to the point of hiding the ribbon, you might want to still have some functions available via custom buttons in your interface. For example, if you have a document library/list and want to create a new folder or upload a document, you would need to have a custom button in your interface to do so.

The problem is how to actually launch the Sharepoint modal dialog to use these functions from Javascript. Fortunalty, Microsoft provides the Sharepoint Object Model for Javascript which exposes most of Sharepoint functions to the client side (as long as the logged in user has access obviously).

Important: In the code below, the ctx.listUrlDir variable is used to determine the relative path to the NewForm.aspx file. The variable is actually declared automatically as long as you have the list/document library webpart displayed on the page. Otherwise, you need to replace that variable with the relative path to the NewForm.aspx file.

List – Create New Item

SP.UI.ModalDialog.showModalDialog({
	url: ctx.listUrlDir + "/NewForm.aspx?IsDlg=1",
	title: "Create New Item"
	dialogReturnValueCallback: function() {
		window.location = window.location.href;
	}	        
});

Document Library – Upload New Document

var exppath = getQSParameterByName('RootFolder');
SP.UI.ModalDialog.showModalDialog({
	url: ctx.listUrlDir + "/Forms/Upload.aspx?IsDlg=1" + ((exppath != null && exppath.length > 2) ? '&RootFolder=' + exppath : ''),
	title: "Upload a document",
	dialogReturnValueCallback: function() {
		window.location = window.location.href;				
	}	        
});

The getQSParameterByName function code is provided at the end of this post.

Document Library – Create New Item of Custom Type

var exppath = getQSParameterByName('RootFolder');
SP.UI.ModalDialog.showModalDialog({
	url: ctx.listUrlDir + "/Forms/Upload.aspx?ContentTypeId=0x012000bd2db3db2b004dda815269e70974b696&IsDlg=1" + ((exppath != null && exppath.length > 2) ? '&RootFolder=' + exppath : ''),
	title: "Create New Custom Type Document",
	dialogReturnValueCallback: function() {
		window.location = window.location.href;				
	}	        
 });

You must replace the value of the ContentTypeId parameter with your own!

The getQSParameterByName function code is provided at the end of this post.

Open in Windows Explorer (IE only)

CoreInvoke('NavigateHttpFolder', exppath, '_blank');

In most cases where a Sharepoint modal is involved, you can replicate any built-in function of the ribbon by looking at the URL called (via Firebug) and adapting the scripts above.

The getQSParameterByName function:

function getQSParameterByName(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}