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

FEDSPUG and NOVA Code Camp 2015

04/16 FEDSPUG: JavaScript Libraries for SharePoint Developers (slides)
04/18 NOVA Code Camp: JavaScript Libraries for Office 365 Developers (slides)

Whether you are developing for Office 365 or SharePoint on-premises, 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 there are a number of fantastic JavaScript libraries I have learned to use and integrate with great success. They work with Apps, content editor web parts, .NET solutions, and anywhere else you can utilize JavaScript (Even CSS!). Some of my favorites covered in this session are jQuery, SPServices, jqPlot, and DataTables.

In this session I will show how to get up and running developing with JavaScript for SharePoint in multiple ways. Then I will demo each of my “go-to” libraries as well as a few others. I will discuss real world application of these libraries based on previous clients where I have used them. I will wrap up with a nice combined demo that works great in both Office 365 and SharePoint on-premises.

Office 365 List Column Name Issue Breaks JavaScript

BLUF: I have found an issue in the Office 365 (SharePoint Online) list column name naming convention that produces unexpected results, especially in JavaScript and is incompatible with SPServices!

Update 1! During a quick Twitter chat with @sympmarc (who is amazing), he said this occurs when you create a column from the list’s main page by clicking “edit this list”, which uses Quick Edit mode, rather than creating the column from the list settings page. See below:

If you use Quick Edit mode to add columns it will just assign them a random string of characters as the Field name.

Update 2! Use this simple code to get the internal column name via SPServices. Thanks @sympmarc.

I was putting together a demo using Office 365, jQuery, jqPlot, and SPServices when I encountered an issue that actually broke my SPServices code. After some investigation I found this issue was with Office 365 and can cause any number of issues with not just SPServices but many other scripts or Apps or code. When you create a list in Office 365 and you then create a new column for that list you expect it to look like the following example:

The first time I created this demo, one of my list names wasn’t the same when I tried to access it. The column name is “Total” but showed as “fe6y”. It looked like this:

I thought this was odd but since the demo worked, I let it go and continued on. I mentioned this at the demo and no one seemed to know why. Then I needed to transfer this demo to my developer Office 365 tenant. When recreating it, I ran into this exact same issue on the exact same column and exact same list (weird). Worse though it was a name that broke my SPService’s JavaScript. So I created a second column and it worked perfectly. Check out the two columns below:

Click to enlarge

I will update after I ask around Twitter and log a bug with Office 365 support. Have you ever seen this? Do you know why it is happening?

If you use Quick Edit mode to add columns it will just assign them a random string of characters as the Field name. Always create columns from the List Settings page!

Tim Ferro

Missing Web Parts & Disabling Scripting in SharePoint Online (Office 365)

BLUF: An update to SharePoint Online (Office 365) was rolled out that disabled all scripting capabilities by default. As a part of this, a number of settings, web parts, and other features (see below) were removed from use in SharePoint Online.

Update Sept 16, 2015: Microsoft has updated the Support Article and now more features are no longer available since this blog was posted.

Office 365 Forum Post: [SOLVED] Content Editor Webpart Removed from SharePoint Online

Office 365 Support Article: Turn scripting capabilities on and off

Around the beginning of December 2014 I set up 2 identical demos using my developer O365 tenant and my company’s O365 tenant. Then a week later I log back in and the corporate one works fine but my personal developer site is missing the option to add a Content Editor Web Part (CEWP) to any page. Furthermore the existing page I created with a CEWP on it already, no longer works (meaning the JavaScript isn’t working). I then verified the web part was in the gallery but I could not add it back anywhere. The image above shows the options for web parts in both tenants. I immediately posted to the Office 365 Forums: [SOLVED] Content Editor Webpart Removed from SharePoint Online. After some back and forth it was determined that scripting had been disabled in my O365 tenant and that I needed to re-enable it if I wanted those web parts back.

Important thing to note #1: This was rolled out and DISABLED BY DEFAULT without any notification.

The default scripting capabilities are:

  • For personal sites, custom scripting is disabled by default.
  • For self-service created sites, custom scripting is disabled by default.

This explained not only why my JavaScript wasn’t working but also where my missing web parts went!

Important thing to note #2: There are a bunch of web parts that get removed when you disable scripting, not just the 2 shown above.

Important thing to note #3: There are a bunch of settings and features that get disabled as well.

Update 1: According to the awesome Paul Tavares and Sebastien Levert, uploading custom ASPX files are disabled as well!

Update 2: These four features are also no longer available. The support article was update since this blog was originally posted.

Full article and list here: Turn scripting capabilities on and off (in Office 365).

Please comment with any other SharePoint Online roll outs that have affected you.

Tim Ferro

Options for Branding SharePoint Online (Office 365)

*Updated on December 10, 2014 with info directly from Microsoft!

“Right now we are working with a bunch of SharePoint MVP’s who are providing all of the common branding scenarios they have. The intention is that we will provided supported hooks to achieve these. And not just across SharePoint but suite wide. We have a list of 30 the engineering team are researching right now based on code they’ve been provided by MVP’s. […] There are no promises right now on when engineering will have the hooks. But it’s a step in the right direction.” – Jeremy Thake

 

BrandingO365

There’s been some interesting chatter going on lately about what the options are for branding Office 365. Recently Microsoft has updated their guidance against using custom master pages, custom site templates or sandboxed solutions! (Newly updated guidance as of December 9, 2014 here.) It seems as if is confirmed that something new will be coming in the future but for now we are stuck in limbo. Companies aren’t going to sit around and wait for the next option to be revealed, they are in need of solutions and guidance immediately. I have done a good amount of research over the past couple weeks and I have found the following options to be available right now:

  1. Don’t custom brand – This is not what you want to hear but for now it is the best option. Wait for future enhancements or use all out of the box options (master pages, themes, etc.).
  2. Use the theming engine – “Designers can use the theming engine to create custom themes, which are called composed looks in SharePoint 2013 and SharePoint Online. At a minimum, themes define colors. A complete theme defines colors, fonts, a background image, and the associated master page, and a .preview file that defines how the .master page is previewed. Developers can write remote provisioning code to apply themes using the remote provisioning pattern.”Source
  3. Brand like you always have before – Design manager, custom master pages, Apps for deployment, etc. HERE’S THE PROBLEM: Microsoft is continually rolling out updates, including to the 2 default master pages. This means if you change them or roll out your own, you will need to compare yours to theirs on a frequent (weekly?) basis. Then you will need to update your master page with changes made to the default ones so that your users can take advantage of all the new features.
  4. Just CSS and JavaScript – After a good amount of research, I have found a middle ground. What if you could have custom CSS and JavaScript running on every page without having to deploy a custom App or use a custom master page? Once you enable the Publishing Feature on your site, you can utilize an Alternate CSS file for all your sites (Site Settings > Look and Feel > Master Page > Expand the Alternate CSS URL section). That just leaves the custom JavaScript. This blog shows step by step how to get a custom JavaScript file running on all pages in SharePoint Online using only JavaScript/JSOM. You are still going to need to check the site for affected CSS/JS changes but it should be on a more “as needed” basis.

What do you think? Are there other options or variants I am missing? Please let me know so I can update immediately.

Tim Ferro

JavaScript on Every Page of SharePoint Online (Office 365)

Tim Ferro on GitHub (vball525)

BLUF: Here’s a single JavaScript (JSOM) file you can use to add a JavaScript file reference on every page in SharePoint Online (Office 365) without an App!

Scenario: You need to run some JavaScript on every page in your site collection in SharePoint Online (Office 365). You don’t want to use a custom master page (because Microsoft is now recommending you not do this anymore), AND you don’t want to have to write an App to do something this simple. I was in this exact situation last week and I wanted a quick but effective way to handle this situation. I kept thinking that there has to be an easy way to do this without an App or a custom master page. GOOD NEWS, THERE IS.

JSOM to the rescue! After a bit of searching around the Internet, I found a couple of great references: here and here. They were so close but I needed to do a little tweaking to get it just right. I just wanted ONE single file that does everything for me. When a simple, single file solution didn’t exist, I created one (mostly from the previous references) and posted it to my GitHub account here! *Note I could not find a way to get CSS with HTC references working (example here). Please let me know if you can and how.

Step 1: Download RegisterJavaScript.js and alert.js (this is the file you want registered on every page in Office 365) from GitHub. Important! Comment out the following lines, then save.

Step 2: Upload them both to your Office 365 tenant. Upload the alert.js file to the “Site Assets” document library. Upload the RegisterJavaScript.js file to any document library you wish.

Step 3: Create a new page. Call it anything you wish, as you will delete this after one use. I called mine “RegisterScript”.

Step 4: Add a Content Editor Web Part to the page and link it to the RegisterJavaScript.js file. Be sure you followed Step 1 and commented out the lines.

Step 5: Save the page, refresh the page, and make sure there are no errors.

Step 6: Uncomment the lines you commented out earlier and in a different tab reupload to the Site Assets library.

Step 7: Refresh the RegisterScript page again. You should see a success pop up!

Step 8: DO NOT REFRESH THE PAGE. Click ok. Close that tab. Do not save anything. From the other tab you have open, click the link for Site Contents. Navigate to the document library where your new page is and DELETE IT. If it is successful, you only need to run this one time.

Step 9: Verify via JavaScript tools. For this example I will show the F12 Developer Tools for Internet Explorer.

DONE! All-in-one file using JSOM you have registered your JavaScript file in SharePoint Online (Office 365) on every page. I have tested this in multiple Office 365 tenants.

I hope this is easy, simple, and helps. Please leave comments or feedback so that it can help others.

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

SharePoint 2010 Hide Left Navigation

If you Google search the title of this blog post you will find numerous sites that tell you how to easily accomplish this via a simple CSS style change. Use a hidden content editor web part, just like my last post (except you don’t need jQuery), and add the following code:

<style>
BODY #s4-leftpanel { DISPLAY: none }
.s4-ca {MARGIN-LEFT: 0px }
</style>

Done. Simple. However, what if you want the ability to show and hide that on demand? Then you will need this handy JavaScript script code. Just like before, add a content editor web part to the page but this time don’t hide it. Add the following code and you will be able to show and hide the left navigation on demand:

<script language=”javascript”>
function toggle() {
var ele = document.getElementById(“s4-leftpanel”);
var s4 = document.getElementById(“MSO_ContentTable”);
var text = document.getElementById(“displayText”);
if(ele.style.display == “block”) {
ele.style.display = “none”;
s4.style.marginLeft = “0px”;
text.innerHTML = “show”;
}
else {
ele.style.display = “block”;
s4.style.marginLeft = “155px”;
text.innerHTML = “hide”;
}
}
</script>
<a id=”displayText” href=”javascript:toggle();”>Show</a> <== Click Here

Now you have two easy options for temporarily or permanently hiding the left navigation in SharePoint 2010.

There are a number of enhancements to this code that can be made to make it even more useful. The first is the bug that requires 2 clicks to get it working and the second would be setting the user’s selected preference in a cookie so that it always remembers the state that it was in the last time the user logged in. I may work on these in the future but feel free to post that code in the comments section or contact me directly and I will post an update or link to your blog!

Tim Ferro

SharePoint 2010 Access Denied Web Part Error

After upgrading to SharePoint 2010 some web part pages are showing an Error Web Part Error: Access denied. You do not have permission to perform this action or access this resource.“.  For sites without anonymous access, this can be mitigated with audience targeting of the web part. However, if that does not work or you need to have the page be anonymously accessible, but also have web parts on that page that have limited permissions, then you will need a different solution. This is not the perfect solution you are looking for, I am still waiting on Microsoft for that as well, but this is a simple jQuery trick that will hide that awful error and make the page render as you would expect (MOSS 2007 functionality). Just follow the following steps:

  1. Download the latest version of jQuery from their site: http://jquery.com/ and upload it to your server.
  2. At the bottom of the page add a content editor web part and make it hidden.
  3. Add the following code:

<script src=”your-server/jquery-1.6.1.min.js”></script>
<script language=”javascript”>
$(“span:contains(‘Error’)”).hide();
$(“div:contains(‘Access denied’):not(:has(div))”).hide();
</script>

The first line is a reference to the latest version of jQuery on your server. Please remove “your-server” and replace with the correct folder (don’t use absolute references). Make sure this reference works. (It is also possible to link to a Google hosted version of this file however I always use a local copy.) The second line is the beginning tag for writing JavaScript. The 3rd line finds all the “span” elements on the page that contain the word “Error” and then hides them. This might work too well so you need to make sure nothing else on the page is hidden as well that you don’t want hidden. The fourth line finds all the “div” elements that contain “Access denied”, but do not contain any other “div” elements, and hides them. This is crucial as I was unable to hide a “span” and had to use a “div” find and hide. However, since “div” tags are nested throughout this page without the caveat that makes sure the “div” tag doesn’t contain any nested “div” tags, this would have hidden most of the items on the page. The fifth line closes the script tag.

Tim Ferro