Dear Microsoft: Please Listen to Us About the New Document Library “Experience”

One of the latest hubbubs in the Office 365 world is around the new Document Library “experience”. (I refuse to use the word “experience” in this sort of context without a little sarcasm and some air quotes.)

There’s a new “experience” coming to Office 365 that makes Document Libraries look a lot like the OneDrive browser UI that some of you must use. (I prefer to use a synced folder on my devices to interact with OneDrive – when syncing actually works.)

In case you haven’t see the new “experience” yet, here’s how it goes. Here’s a very simple Document Library in our Sympraxis tenant.

2016-06-16_10-12-36

When you go to a Document Library for the first time after the functionality hits your tenant, you can choose to walk through a Motherhood and apple pie set of intro screens that show why the new experience is swell.

New Document Library "Experience" Prompt

2016-06-16_10-08-59

2016-06-16_10-09-15

2016-06-16_10-09-30

2016-06-16_10-09-43

And after clicking on “Let’s get started”, you see the new “experience”…

2016-06-16_10-11-58

 

Note the small link at the bottom left that lets you switch back to the “classic” view – for now.

The issue isn’t so much the new “experience”. I do think since people hate change, it’ll cause a lot of discomfort in many organizations, especially since it’s roaring into all tenants. In fact, the new capabilities are indeed swell. The issues are around existing customizations to the branding of functionality of Document Library views.

If you’d like to see what’s got people upset about it, you can check out the UserVoice item Allow Javascript customization and CSS branding/theming in the new Document Library Experience. There’s also a very long thread at the Office 365 Network in Yammer about it.

I do think the “Working on it” message in the UserVoice entry should give some hope. Microsoft knows there are issues. If they can’t address them and others like them, the flow to Office 365 will reverse back to on premises. What I think sows a lot of Fear, Uncertainty, and Doubt about this is it feels – yet again – like it could be a slippery slope.

Document Library default views are often built into what amounts to applications, or at least launch pads into application. It can be anything from simply adding some explanatory text in a CEWP at the top of the page (which is, after all, a Web Part Page) to full fledged functionality provided by additions of JavaScript using jsLink, DVWPs, JavaScript, CSS, etc. In many cases, the view page ends up looking little like what it started out as.

There simply has to be a way to keep these view pages in the mix, as considerable investment of time and money have gone into them. One would hope “telemetry” will show many people *choosing* to stick with “classic” (in this case meaning “functional” and “useful”) mode pages, even if all the “Working on it” stuff happens.

What I’m asking for in this post (Are these Dear Microsoft posts of mine merely rhetorical? I hope not.) is for a sincere attempt to hear what the concerns are. There are many times where people are feeling like a change to something new risks removing some of the exact reasons why the SharePoint platform has been successful in the past. Running Office 365 as a service can indeed be at odds to the successful methods used in Document Libraries, but understanding how to continue the exact patterns of enhancement that were encouraged in the past – by Microsoft- is critical.  Change can be good, but not if it undoes past investment and successful implementation.

I like the image that Brent Ellis (@Brentless) posted in the Yammer thread:

Do No Harm

Software development isn’t medicine, but still…

News Flash: Wandering Office 365 Waffle, Or “Who Moved My Waffle?”

Call it the waffle or the App Launcher or whatever you want (internally it has the CSS class ms-Icon–waffle2, so I think Randy Drisgill [@drisgill] is right, as usual), but if you use Office 365 or the soon to be available SharePoint 2016, you probably click on it dozens of times a day.

Recent changes to the Suite Bar (CSS classes start with suiteBar) have made it more responsive for different sized screens. This is a good thing, as the Suite Bar can now scale from a wide-screen desktop monitors down to a phone screen. How modern.

The implementation may confuse, though, so be prepared for some quizzical looks from your users.

Desktop Mode

Desktop Mode

Tablet Mode

Tablet Mode

Phone Mode

Phone Mode

As you can see, the waffle is where you’d expect it in desktop mode, and I get to see my Sympraxis Consulting logo as well.

The phone mode also seems to make sense. The logo is gone – there’s not really any room for it – and the icons are all hidden, albeit behind the dread ellipses rather than the hamburger most people are used to.

It’s the tablet mode that will probably throw your users. “Where my waffle?”, you might ask? Well, it hops over to the right, jumping over the Suite Bar title (“Sites”, “Outlook”, etc.) to hang out by the notifications icon (at least for now – the Suite Bar changes frequently).

It looks like the media query kicks in at 1024px, which may be the width of some of your users’ regular desktop screens, even in this day and age. Even if they have higher resolution monitors, they may not use their browser in full screen mode. (I’m a full screen guy myself.)

All in all, it’s no harm – but some of your users may cry foul. Be prepared for it. I’m seeing it in my own First Release tenant as well as in several non-First Release tenants as well.

Thanks for Stefan Bauer (@StfBauer) for the heads up on why this is happening.

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='Collapse' 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();

  }

});

Requesting Your SharePoint “UI Hacks”

I am putting together a presentation talking about UI hacks that we all need to do in order to accomplish everyday UI customizations that our customers – internal  or external – require. For this one I want to limit it to SharePoint 2013 and/or SharePoint Online (Office365). Another way to think of it is how and why we brand SharePoint today on premises and in the cloud; not just things that people want cosmetically, necessarily, but stuff that is hard to do and must be done.

I’d like to collect ideas from all of you out there, which I will collate into some slides (with credit given, of course!). I posted a quick tweet about this and already got a few replies, so I figured a blog post would be a good way to gather information as well.

In thinking about this, I’ve come up with some broad buckets:

  • Inconsistencies
  • Documentation Gaps
  • Document Object Model (DOM) Changes
  • Missing Functionality (Oft Requested)

I’ve already got a few items of my own in each of those categories, but I’d like the presentation to be representative of what we all have to deal with, not just me. If you think I’m missing a bucket, let me know your ideas on that, too.

Let’s use this post’s comments to capture as much as possible. If you’d rather email me directly, you can use the Contact form. When I have a decent amount of content collected, I’ll come up with a way to share it on some level. (The actual purpose of this is classified.)

Thanks for your help on this.

SPServices Stories #20 – Modify User Profile Properties on SharePoint Online 2013 using SPServices

This entry is part 20 of 21 in the series SPServices Stories

Introduction

Sometimes people ask me why I’m still bothering with the crufty old SOAP Web Services in SPServices. After all, there are REST and CSOM to play with and Microsoft has decided to deprecate the SOAP Web Services.

Well in some cases, the Shiny New Toys don’t let you get the job done. In cases where you’re implementing on Office365 and simply can’t deploy server side code, SPServices can sometimes be just the right tool. It’s easy to use and it gets stuff done that you need. What more can I say?

I found this nice story from Gary Arora about updating User Profile data a few weeks back. In it, Gary shows us how to easily make those updates on Office365 using SPServices. Gary calls himself “your friendly neighborhood SharePointMan” and he is happy to be have his story be one of my stories.

The Use Case

SharePoint 2013 users need to modify (specific) user-profile-properties client-side without having to navigate away to their ‘MySite’ site and swift through rows of user properties.
(Following is an mock-up showing a simple interface to update a user profile property via CEWP)

Modify_User_Profile_Properties_SharePoint

Simple interface to update Fax number from a CEWP. (Basic demo)

The Usual Solution

In the SharePoint 2013 universe there are 2 ways to read/write data client-side. CSOM and REST. Unfortunately CSOM and REST are not fully there yet when it comes to matching the server side functionality.

In this specific case, one could use CSOM or REST to retrieve (read) User Profile Properties but there is no way to modify (update) these properties from client-side. Here’s Microsoft’s official position.

Not all functionality that you find in the Microsoft.Office.Server.UserProfiles assembly is available from client APIs. For example, you have to use the server object model to create or change user profiles because they’re read-only from client APIs (except the user profile picture)

Hence The Dirty Workaround

So our workaround is SOAP, the forgotten granddaddy of Web services. The User Profile Service web service, from the SharePoint 2007 days, has a method called ModifyUserPropertyByAccountName which functions exactly as it sounds. But since SOAP can be a bit intimidating & ugly to write, we’ll use SPServices, “a jQuery library which abstracts SharePoint’s Web Services and makes them easier to use”

So here’s how we’ll use SPServices to modify User Profile Properties. The method is applicable to SharePoint 2013 & 2010 (online & on-prem) versions.

1. Reference SPServices library

You have two options here. You can either download the SPService library and reference it locally or reference it from its CDN:

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2013.01/jquery.SPServices-2013.01.min.js"></script>

2. Create updateUserProfile() Function

The following function simulates the ModifyUserPropertyByAccountName method on the User Profile Service web service.

function updateUserProfile(userId, propertyName, propertyValue) {

  var propertyData = "<PropertyData>" +
  "<IsPrivacyChanged>false</IsPrivacyChanged>" +
  "<IsValueChanged>true</IsValueChanged>" +
  "<Name>" + propertyName + "</Name>" +
  "<Privacy>NotSet</Privacy>" +
  "<Values><ValueData><Value xsi:type=\"xsd:string\">" + propertyValue + "</Value></ValueData></Values>" +
  "</PropertyData>";
  
  $().SPServices({
    operation: "ModifyUserPropertyByAccountName",
    async: false,
    webURL: "/",
    accountName: userId,
    newData: propertyData,
    completefunc: function (xData, Status) {
      var result = $(xData.responseXML);
    }
  });

}

3. Invoke updateUserProfile() Function

This function takes 3 parameters.

  • userId: Your userID. The format is “domain\userId” for on-prem and “i:0#.f|membership|<federated ID>” for SharePoint Online.
  • propertyName: The user profile property that needs to be changed
  • propertyValue: The new user profile property value

Example:

updateUserProfile(
  "i:0#.f|membership|garya@aroragary.onmicrosoft.com",
  "Fax", "555 555 5555");

Note: The above code works but notice that you are passing a hardcoded userId.

To pass the current userId dynamically, we can use CSOM’s get_currentUser(). But since that’s based on the successful execution of ClientContext query, we need to “defer” invoking “updateUserProfile()” until we have received current userId. Therefore we’ll create a Deferred object as follows:

function getUserLogin() {
  var userLogin = $.Deferred(function () {
    var clientContext = new SP.ClientContext.get_current();
    var user = clientContext.get_web().get_currentUser();
    clientContext.load(user);
    clientContext.executeQueryAsync(
      function () {
        userLogin.resolve(user.get_loginName());
      }
      ,
      function () {
        userLogin.reject(args.get_message());
      }
      );
  });
  return userLogin.promise();
}

Now when we invoke updateUserProfile(), it will execute getUserLogin() first, implying that the ClientContext query was successful :

getUserLogin().done(function (userId) {
  updateUserProfile(userId, "Fax", "555 555 5555");
});

4. Full working code

Steps to replicate the demo

  1. Copy the following code snippet and save it as a text file (.txt)
  2. Upload this text file anywhere on your SharePoint site (e.g. Site Assets). Remember its path.
  3. On the same SharePoint site, add/edit a page and insert a CEWP (Content Editor Web Part)
  4. On the web part properties of CEWP, add the path to the text file under “Content Link” section
  5. Click Ok, and save the page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2013.01/jquery.SPServices-2013.01.min.js"></script>
<script type="text/javascript">

//updateUserProfilePreFlight defers until getUserId() is "done"
//then it invokes updateUserProfile
function updateUserProfilePreFlight(){
  getUserId().done(function (userId) {
    var propertyName = "Fax"
    var propertyValue =  $("#Fax").val();
    updateUserProfile(userId, propertyName, propertyValue);
  });
}

//getUserLogin() uses CSOM to retrive current userId.
function getUserId() {
  var userLogin = $.Deferred(function () {
    var clientContext = new SP.ClientContext.get_current();
    var user = clientContext.get_web().get_currentUser();
    clientContext.load(user);
    clientContext.executeQueryAsync(
      function () {
        userLogin.resolve(user.get_loginName());
      }
      ,
      function () {
        userLogin.reject(args.get_message());
      }
      );
  });
  return userLogin.promise();
}

//updateUserProfile updates the userprofile property 
function updateUserProfile(userId, propertyName, propertyValue) {

  var propertyData = "<PropertyData>" +
  "<IsPrivacyChanged>false</IsPrivacyChanged>" +
  "<IsValueChanged>true</IsValueChanged>" +
  "<Name>" + propertyName + "</Name>" +
  "<Privacy>NotSet</Privacy>" +
  "<Values><ValueData><Value xsi:type=\"xsd:string\">" + propertyValue + "</Value></ValueData></Values>" +
  "</PropertyData>";

  $().SPServices({
    operation: "ModifyUserPropertyByAccountName",
    async: false,
    webURL: "/",
    accountName: userId,
    newData: propertyData,
    completefunc: function (xData, Status) {
      var result = $(xData.responseXML);
    }
  });

}


</script>

<input id="Fax" type="text" placeholder="Update Fax" />
<input onclick="updateUserProfilePreFlight()" type="button" value="Update" />

Note

  • You can only edit the user profile properties that are editable (unlocked) on your MySite. Certain fields like department are usually locked for editing as per company policy