SharePoint Lists-Smarter with JavaScript

SharePoint lists are great for tracking data-easy to create, export to Excel, develop against using JSOM.  Problem is when you have a list sometimes you have documents that are associated with the list item.  There are attachments to the list but better to use a document library right?  Maybe create a folder in the document library for each new list item created and tag the folder for the specific folder associating the item to the folder.

Here is where some simple JavaScript and the SharePoint JSOM come in to save the day…

Step 1: Create your SharePoint list, add your fields, etc.

Step 2: Create a new item, when the newform.aspx opens simply select Edit Page from settings.  Settings-Edit page.  Now you can place a content editor web part referencing your script file.

Screenshot (Standard NewForm.aspx un-customized)

SPLISTFORM

Also, add a document library web part to display the folders we are going to create from the script and filter for your specific list item using the web part connection from the list item web part to the document library web part.

Add any other web parts to the page, calendar, tasks lists etc.  This provides a simple all up view for related content tagged to the list item.

Add a content editor web-part or script editor web part referencing your script file (I typically organize conveniently in the site collections style library)

Example script:
//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js

//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js

var matterName;
var matterNum;
var folderName;
var collListItem;
var folderUrl ;
var folderpath;

//Execute when the user saves the item create a folder in our document library and tag the folder with relevant data from our list item in order to associate the two
function PreSaveItem()
{

//grab some fields off the newform.aspx to use for tagging the folder we create
matterNum = $(‘input[title=”MatterNum”]’).val();
matterName = $(‘input[title=”Name”]’).val();

//Create the folder

folderName = matterName;
folderUrl = “[SiteUrl]” + “/” + folderName;

createFolder(folderUrl, folderName, matterNum);

return true;
}
function createFolder(folderUrl, fname, matterNumber) {

var clientContext;
var oWebsite;
var oList;
var itemCreateInfo;

clientContext = new SP.ClientContext.get_current();
oWebsite = clientContext.get_web();
oList = oWebsite.get_lists().getByTitle(“Documents”);

itemCreateInfo = new SP.ListItemCreationInformation();
itemCreateInfo.set_underlyingObjectType(SP.FileSystemObjectType.folder);
itemCreateInfo.set_leafName(folderName);
//I am using a specific content type inherited from the folder type
this.oListItem = oList.addItem(itemCreateInfo);
this.oListItem.set_item(“ContentTypeId”, “0x0120003C4F41AA23709B458E3DA2EEFAA5DCAA”);
this.oListItem.set_item(“Title”, fname);
this.oListItem.set_item(“MatterNum”, matterNumber);
this.oListItem.update();
clientContext.load(this.oListItem);
clientContext.executeQueryAsync(
Function.createDelegate(this, successHandler),
Function.createDelegate(this, errorHandler)
);
}
function successHandler() {

//Yeah have a new folder

}

function errorHandler(sender, args) {
alert(‘Record Create failed. ‘ + args.get_message() + ‘\n’ + args.get_stackTrace());
}

//TO DO-This part for next time-build out a complete folder structure based on a pre-built document libary structure
function retrieveFolderStructure() {
var _clientContext1;
_clientContext1 = SP.ClientContext.get_current();
var oList = _clientContext1.get_web().get_lists().getByTitle(‘Matter Documents’);

var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml(“500”);

this.collListItem = oList.getItems(camlQuery);

_clientContext1.load(collListItem);

_clientContext1.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded2), Function.createDelegate(this, this.onQueryFailed2));

}

 

Summary:

Make your SharePoint lists a little smarter.  Why not?  Of course all this works on SharePoint 2013 and Office 365.  Also can use on editform.aspx, the script to access the form fields slightly different but doable np.

Bonus material:

Add a calculated column to your SharePoint list that links users to the specific folder:

=”<a class=’docs’ title=’Documents’ href=”&”‘”&”/[Site]/Shared Documents/Forms/AllItems.aspx?RootFolder=/[Site]/Shared Documents/”&Name&”‘”&”>Documents</a>”

*Set your column format to “number” so displays HTML

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s