Pro Tip: Always Create SharePoint Columns from the List Settings Page

Traditionally when creating SharePoint (or SharePoint Online) list columns, you would first navigate to the Settings page for the List you wanted to add a column. Then you would click “Create column” under the list of existing Columns. This will create the column and the internal name will be a double encoded (click link, scroll down) version of what you typed. You can check this by clicking on the column name after creation and viewing the URL. (See Image Below)

Checking Column Internal Name (Double Encoded)

In SharePoint Online and SharePoint 2013 on-prem, there is another option for adding columns to a list: Quick Edit. (See Image Below)

SharePoint Online Quick Edit

When you click the Edit link (Above), you can add columns directly from the List page. (See Image Below)

Quick Edit Adding Column

However, when you create columns this way, the column name is NOT the double encoded version of the text you entered. It is a random string of numbers, letters, and sometime non-alphanumeric characters! (See Image Below)

Random Character Column Name

This can not only cause issues when this behavior is not known, but it can wreak havoc with custom code like JavaScript.

There is currently no fix for this so please vote on this issue at User Voice for Office 365 here: https://office365.uservoice.com/forums/273492-sites-and-collaboration/suggestions/9756108-update-the-sharepoint-online-list-quick-edit-colum.

If you are writing JavaScript code that references column names, check out this post from the amazing Marc Anderson on how to get the InternalName of a SharePoint list column with SPServices. This should look familiar as it is the Double Encoding example I mentioned earlier.

This is a pretty big issue so please vote for this and share to get visibility with the product team. Also if there are other scenarios where this happens please leave a comment.

Tim Ferro

JavaScript Libraries for .NET & SharePoint Developers

JavaScript LogoWhether you are developing for Office 365, SharePoint 2013, ASP.NET, or another web option, these days you are going to need some “go-to” JavaScript libraries to enhance your solutions. No matter what project I am on, over the past few years these are the JavaScript libraries I have learned to use and integrate with great success: jQuery, SPServices, jqPlot, and DataTables. I highly recommend them all and suggest you check them out ASAP. Additionally, if you are a .NET SharePoint developer who wants to get up to speed with JavaScript and jQuery for SharePoint, this session from Rob Windsor is a must watch: http://blogs.msmvps.com/windsor/2014/07/28/session-recording-javascript-and-jquery-for-sharepoint-developers/.

#1 jQuery – This is the “must have” JavaScript library for web development. It does a ton of useful things, is cross browser tested, and a lot of good libraries (plugins) are dependent on it. It is worth it for the cross browser functionality alone.

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

#2 SPServices – This jQuery plugin is a must have for SharePoint developers. It works for SharePoint 2007, 2010, 2013, and Office 365. Data access is so much easier with this plugin! And now there is a Visual Studio Intellisense file for SPServices!

SPServices is a jQuery library which abstracts SharePoint’s Web Services and makes them easier to use. It also includes functions which use the various Web Service operations to provide more useful (and cool) capabilities. It works entirely client side and requires no server install.

#3 jqPlot – Whether you need to replace the missing Chart Web Part or you want an easy to use charting jQuery plugin, this is the library for you.

jqPlot

jqPlot is a plotting and charting plugin for the jQuery Javascript framework. jqPlot produces beautiful line, bar and pie charts with many features.

#4 DataTables – And finally, this jQuery plugin (notice a trend?) is awesome for showing data in a table with tons of great features. Really enhances the functionality of the .NET tables or stands alone as a beautiful addition.
DataTables

DataTables is a plug-in for the jQuery JavaScript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.

I know there are a ton more out there but these are my favorites. Leave a comment with your “go-to” JavaScript libraries.

Tim Ferro