SPS Philly 2015

Come see my 2 sessions at SPS Philly 2015! (Agenda)
March 7, 2015, 8:30 – 5:00
Microsoft Building, Malvern, PA

10am-11:15am (Berwyn) Visual Studio for ALM and SharePoint
2pm-3:15pm (Wynnewood) JavaScript Libraries for SharePoint Developers

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

CapArea .NET SharePoint SIG & SUG DC 2015

JavaScript Libraries for SharePoint Developers

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 jQuerySPServices,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.

PowerPoint Presentations below:

SPS Virginia Beach 2015

Click for PowerPoint slides

Click for PowerPoint slides

The Evolution of SharePoint Event Receivers from On-Prem to the Cloud
Saturday 1/10 @ 3:30pm in room H162
SPSVB 2015 Site
Here’s the PowerPoint presentation
Here’s the code on GitHub

Event Receivers are a fundamental part of SharePoint. Knowing how to use them and what features are available for which version of SharePoint is crucial for all SharePoint developers. Drawing on my extensive experience over the past six years, this session will give every developer a solid foundation for using Event Receivers in SharePoint 2007, 2010, and 2013 built on best practices and real world usage.

This session will provide an overview of Event Receivers in SharePoint with specific focus on List Item Event Receivers. You will learn from real world examples, tips, tricks, and hear about how event receivers have been utilized at different clients. I then discuss pros and cons of using Event Receivers as well as compare them to SharePoint Workflows. Secondly I will key on the differences between the versions of SharePoint related to Event Receiver functionality. Finally I will show a demo of how to quickly get up and running using Visual Studio and some common use examples.

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 web parts were removed from use in SharePoint Online.

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 not #3: There are a bunch of features that get disabled as well.

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

NOVA Code Camp 2014

Click for PowerPoint

Visual Studio 2013 for ALM and .NET Development
Saturday 10/11 @ 2:25pm

Visual Studio 2013 is a monumental leap forward for Microsoft development. There are so many useful enhancements and features that each could be their own session. This session will give an overview of the new features, then focus on those related to Application Lifecycle Management, Mobile, Team Foundation Server 2013, and .Net Development. From project planning, to mobile testing, to inline enhancements via CodeLens and Peek, this session will show developers and team leads why Visual Studio 2013 is worth upgrading to immediately!

http://lanyrd.com/2014/nvcc14/sdftbb/