SPTechCon Developer Days Follow Up

SPTechCon Dev DaysI got lucky on the scheduling for SPTechCon Developer Days and did both of my sessions on the first day. So today I get to attend sessions and just learn, learn, learn!

As is true of every conference the BZMedia folks put on, this one is well run and packed with excellent sessions. If you’d like to stay on top of what’s happening in the SharePoint world, sign up for their weekly SPTechReport newsletter.

Since this is a conference focused on developers, both my sessions were developer-focused. If you attended either session and have questions or feedback, feel free to get in touch.

Simple Expand/Collapse for the Quick Launch in SharePoint 2013 or SharePoint Online

Yesterday I helped my pal Marcel Meth (@marcelmeth) with a pretty simple little task, but everything’s simple if you know how to do it! We needed to add simple accordion-like expand/collapse functionality to the Quick Launch on the pages in a Site Collection. Because there were going to be a lot of links in the Quick Launch (mostly links to different views of lists), it was getting pretty cumbersome to wade through. By adding this expand/collapse capability, we could improve the user experience (UX). It’s little stuff like this that makes SharePoint usable. Never underestimate the power of a small tweak like this.

This code works on a Team Site on SharePoint Online in Office365 with its Quick Launch exposed in the normal way. Any other customization you have in place may interfere with this working. (Yadda, yadda, disclaimer, YMMV, etc.) I’m sure it will work for you – possibly with some tweaks – in any SharePoint 2013 or SharePoint Online site. You can add this script to a single page or to the master page if you’d like it to work on all pages in the Site Collection.

// Find all the top level links in the Quick Launch that have children
var topLevelLinks = $("div[id$='QuickLaunchMenu'] > ul > li:has('ul') > a");

// Prepend the little "twiddle" icon to each top level link
topLevelLinks.prepend("<span class='ms-commentexpand-iconouter ql-icon'><img alt='expand' src='/Comm/Comms2/_themes/1/spcommon-B35BB0A9.themedpng?ctag=2' class='ms-commentexpand-icon'></span>");

// We're starting with all of the sections collapsed. If you want them expanded, comment this out.
topLevelLinks.closest("li").find("> ul").hide();

// Set up for the click even of on the top level links
topLevelLinks.click(function(e) {

  // We're going to stop the default behavior
  e.preventDefault();

  // Find the elements we need to work with
  var childUl = $(this).closest("li").find("> ul");
  var isVisible = childUl.is(":visible")

  // If the section is visible, hide it, and vice versa
  if(isVisible) {  

    // Replace the icon with its antitheses
    $(this).find(".ql-icon").replaceWith("<span class='ms-commentexpand-iconouter ql-icon'><img alt='expand' src='/Comm/Comms2/_themes/1/spcommon-B35BB0A9.themedpng?ctag=2' class='ms-commentexpand-icon'></span>");
    // Hide the child links by sliding up. Note: You could change the effect here.
    childUl.slideUp();

  } else {

    // Replace the icon with its antitheses
    $(this).find(".ql-icon").replaceWith("<span class='ms-commentcollapse-iconouter ql-icon'><img alt='expand' src='/Comm/Comms2/_themes/1/spcommon-B35BB0A9.themedpng?ctag=2' class='ms-commentcollapse-icon'></span>");
    // Show the child links by sliding down. Note: You could change the effect here.
    childUl.slideDown();

  }

});

The Medium Has the Message and My Blog Is Trying to Catch Up

I’ve really been digging the content I’ve been finding through Medium for the last few months or so. The Web is ever-evolving and to me Medium represents a new paradigm for Web publishing and content consumption. It’s sort of blogging combined with content crowd-sourcing combined with highlighting like I have on my Kindle combined with… Well, it’s unique, so it’s not really just the sum of those parts.

To me, one of the best parts of Medium is the Staff Picks and Top Stories. These two categories give me solid content to read that is either vetted by the platform owners or popular with the platform readers. One of the cool things about this is that it cuts across all topic areas. I’m as likely to want to read one of Eric Elliott’s (@_ericelliott) excellent posts about JavaScript and its communities like this or this or something like When the heck did learning to code become cool? And why it sucks to be a beginner today… which are squarely in my own wheelhouse to interesting takes on Web design like Optical Adjustment – Logic vs. Designers.

But what makes it even more fun is the stuff I run across that to many people would seem sort of random. None of us is so one-dimensional that we cannot enjoy reading something completely new to us. Medium ensures that when we go off on one of those mental tangents, that it’s a higher quality one.

When I spot one of these seemingly random posts, I can see about how long it might take me to read it, so it’s clear going in if how much time I’ll need to invest. (I’m a pretty fast reader, so for me the number is usually an upper bound – YMMV.) Those times must be built up magically based on how long people really spend and the posts and seem pretty accurate to me.

How many minutes?

The biggest thing I notice as I read posts on Medium is that I feel a need to up my own game, to write more pithy and valuable posts. Ever since I started blogging, I’ve had a little voice in my head that writes posts that come out of ordinary, every day experiences. These aren’t the “here’s a piece of code to fix a particular problem” posts, but often the softer stuff that makes the fact that the code exists have more purpose. It might have nothing to do with my professional life at all. (Maybe it’s hard to believe, but I do have a few other interests besides SharePoint.) I wish I actually spent the time to get more of those posts written.

I found an article that shows how to make your own blog a bit more “Medium-like” and I’ve added some new plugins to my blog here based on those suggestions. (See WordPressium: Creating a Medium-like Experience)

As of today, you can do a few new things on my blog…

Selection Sharer

Courtesy of Hans van Gent’s Selection Sharer plugin, you can now highlight any piece of text in one of my posts and send it as a Tweet, post it to LinkedIn, or send it in an email. (This assumes I ever say anything quotable, which I know is a huge assumption.) I would expect that he’ll add some more sharing options over time.

Reading Time

The Reading Time plugin adds some info on how long a post might take to read. You’ll see the estimate based on an average reading speed at the top of each post as you visit it. As you stay on the page, a little progress bar shows how much of that time has elapsed. Of course, reading a post full of code is different than just reading prose, so time will tell how useful this is. It can at least be a little game; can you beat the progress bar?

I hope that you find these two new capabilities useful. Let me know what you think!

SharePoint Evolution Conference 2015 Wrap Up

It’s been a busy few weeks in my life. First I was in London at the SharePoint Evolution Conference, then home for a week, then off to Microsoft Ignite in Chicago, then back home, and boom! I was heading out the back to put some burgers on the grill, I missed the second to the last step (of a grand total of 3!), fell, and was in excruciating pain with a broken ankle. After surgery, I’m the proud owner of some new hardware in my ankle and a 6-8 week “no weight bearing” edict.

I usually try to do a bigger write up after a great conference like SharePoint Evolution, but I’m going to flake out and just post my presentations. I do want to thank Steve Smith and Zoe Watson, along with their entire team, for an incredible experience.

New GitHub Repository for KnockoutJS Binding Handlers

KnockoutJSYesterday I created a new GitHub repo for KnockoutJS binding handlers for use with SharePoint. I’ve been using KnockoutJS for over a year now, and love working with it to build Single Page Application (SPAs) and other interactive functionality inside SharePoint.

I thought starting a repo that could store bindingHandlers for KnockoutJS that are generally useful for working with SharePoint would be useful for a lot of people.

sympmarc/KOBindings on GitHub

See the Creating custom bindings section of the KnockoutJS documentation for an overview on what binding handlers are all about.

I’ve collected some of these binding handlers and built others. Where possible, I give credit to the source in each file. Unfortunately, in my first year or so of using KnockoutJS, I collected a lot of these without maintaining the source location. If you see your work here, please let me know and I will give you credit!

  • /src contains one file per bindingHandler
  • /html contains example usage of the corresponding bindingHandler

If you’ve been working with KnockoutJS and SharePoint and would like to contribute, feel free to issue a pull request. I’m hoping this will become a repo that is useful for the SharePoint community as well as the KnockoutJS community at large.

I’m also very open to suggestions on how to structure the repo to make it optimally useful. To get things rolling, I’ve posted some of the simpler binding handlers I use, most of which help in working with jQueryUI capabilities.