SharePoint Framework Developer Preview Release – Where do I begin?

This is an exciting time! The much anticipated SharePoint Framework Preview was released yesterday. And guess what … they are essentially Add-ins /Apps. Right now just the web parts piece is released and the end result is an improvement over app parts. The most noteworthy part is that the web parts are now on the page as opposed to being inside of an iframe! They have a couple more improvements like being able to be fully responsive, having web part properties. They mention that new developments will be added frequently and they are targeting a release time frame of early 2017.

The biggest hurdle that I can see for traditional SharePoint developer is the tooling.  If you are not comfortable with using a command line, Node.js, NPM, Yeoman or Gulp then you should invest a large chunk of time to familiarize yourself with those technologies. I believe that having a base knowledge of the “What” is actually happening when you type “yo @microsoft/sharepoint” is important.  Most modern day front end web developers are already comfortable with these things. For the traditional SharePoint developer most of these things will be foreign and seemingly difficult to grasp at first (for some).

So you’ve visited the SharePoint Framework Developer Preview Release git-hub and you’re following the steps but you find yourself scratching your head. What did you miss? What is all this stuff?  Where do you begin to even get started?

First off don’t feel bad.. most people are seeing this for the first time just like you.

<rant> Just the other day I discussed the front end development build process of node/gulp/npm to other day to our Senior SharePoint developers and even they were confused. Some even got pissed off and mad at Microsoft. I can remember the comments clearly, “COMMAND LINE? What year is this?”. I’ve embraced the change and I can see the good things that can come out of it.  Getting back to point of this article. </rant>

I recommend that you take the time to learn about the new tools that they are asking us to adopt. There are ton’s of free online resource on YouTube alone… However if you have or can get your job to pay for a Pluralsight you will access to premium content with some of the top authors (this will be more important for the SharePoint work)

Online resources (free) to help you get familiar with for Node/Gulp/TypeScript/Yeoman

  • Node.js Fundamentals
  • NodeJS – NPM Package Manager – Tutorial 2
  • Gulp.js Build System #1 – Fundamentals
  • Gulp – The Basics
  • TypeScript/ES6 Module Syntax Intro
  • Yeoman – Read first paragraph
  • If you haven’t even started to develop apps or client side web parts using JavaScript then you need to take a look at resources geared towards connecting to SharePoint lists and libraries using the REST end points or the client side JavaScript object model. There are some course that I highly recommend. 

    Pluralsight Courses for SharePoint Client Object Model

  • David Mann
  • http://www.pluralsight.com/courses/developing-sharepoint-2013-javascript
  • http://www.pluralsight.com/courses/developing-sharepoint-2013-javascript-part2
  • http://www.pluralsight.com/courses/developing-sharepoint-2013-javascript-part3
  • Rob Windsor
  • http://www.pluralsight.com/courses/sharepoint-2013-client-object-model-rest
  • Rob Windsor, & Sahil Malik
  • http://www.pluralsight.com/courses/sp2010-client-object-model
  • Can I just use Visual Studio? PLEASE!@#!@ Do I need to learn all the front end tooling?

    The framework can be intimidating for the people not comfortable with the technologies listed. For the most part you really just need to learn a couple of things and you can get by. TypeScript is not one of those things. Good news for those most comfortable working in Visual Studio. They have documentation on how to get setup via Visual Studio 2015 (Update 3) here.  The bad news is that is still uses Node.js and the Gulp build tasks to compile and build the project. We will just have to wait and see if the process is improved with future releases.

    Ok I got all that…

    After you’ve covered all this then you should walk through the examples. The documentations is very good at explaining how to get everything installed and get up and running with your first Hello World web part. My only piece of advice is to read through everything 1 step at a time. It took me a few reads before I was able to get the first web part to load inside SharePoint.

    Final Thoughts:

    • Get an Office 365 Developer Account
    • Learn the fundamental technologies in play – Node.js, Gulp, Yeoman, Node Package Manager (npm)
    • Become a TypeScript master
    • Changes, Updates, Fixes will be coming frequently with a release time frame of 2017 (so they say)
    • Preview is missing a few things that a traditional deployment would have
      • Examples on how to deploy files to SharePoint / not CDN
      • Examples on how to deploy assets (List Definitions, Content Types, Site Columns) => Notes on Solutions Packaging
    Advertisements

    Change Default SharePoint Site Logo CSS Trick – Great for Office 365!

    I was just thinking about this issue one day and realized that I could just override the default image but if the user decides that they wanted to change it later via site settings they could.

    Why do I love this trick?

    1. You don’t have to set a Site Logo via Site Settings > Title, description, and logo
      1. For On-Prem solutions I would set this via code
      2. For Office 365 you would typically have to do this manually OR powershell to set it across
    2. It’s pure CSS trickery, no change to any markup!
      1. This will work across the board On-Prem/Office 365…. No code….
    3. Manually setting the Logo you can override this trick
      1. For those subsites that don’t want to inherit the logo they can manually set the logo via the Site Settings > Title, description, and logo
      2. Once the logo is set in the default it will override this trick

    Get to the trick already!!!!

    Add the following lines of CSS. Only a couple of notes to make this actually work.

    img[src*='siteIcon'] { 
    
    display: block; 
    
    -moz-box-sizing: border-box; 
    
    box-sizing: border-box; 
    
    background: url(‘/Style Library/mySiteLogo.png’) no-repeat; /* Path to the site logo */ 
    
    width: 180px; /* Width of new image */ 
    
    height: 236px; /* Height of new image */ 
    
    padding-left: 180px; /* Equal to width of new image */ 
    
    } 
    
    .ms-siteicon-img, .ms-siteicon-a { 
    
    max-height: none; 
    
    max-width: none; 
    
    } 
    

    Only 2 important detail for this trick to work.

    1. You must set the actual image size must equal the information above for this trick to work.
    2. DON’T use ‘siteIcon’ in the filename.

    How does this work?

    This trick works because it uses CSS to catch onto the <img/> field where the ‘src’ contains ‘siteIcon’. This case catches both the themed site icon on the publishing site and the site icon on the team site. The CSS that performs the replacement of the image comes from https://css-tricks.com/replace-the-image-in-an-img-with-css/ by Marcel Shields. You can read more about that there.

    • Publishing Site Logo

    clip_image002

    • Team Site Logo

    clip_image004

    Hide Newsfeed, OneDrive and/or Sites from the Suite Bar – Ribbon Area for SharePoint 2013

    It really is super simple and requires I line of CSS per item. If you want to hit them all or any future ones you could hide the whole element. I’m posting this b/c I was looking for a quick fix to do this and all the blogs make you change master pages or something else wacky. I didn’t have mine enabled and really was being lazy. So here it is.

    Hide OneDrive

    #suiteLinksBox .ms-core-suiteLink-a[id$=’ShellDocuments’] {

    display: none;

    }

    Hide Newsfeeds 

    #suiteLinksBox .ms-core-suiteLink-a[id$=’ShellNewsfeed’] {

    display: none;

    }

    Hide Sites

    #suiteLinksBox .ms-core-suiteLink-a[id$=’ShellSites’] {

    display: none;

    }

    Get rid of them all in one shot

    #suiteLinksBox .ms-core-suiteLink-a[id$=’ShellDocuments’],

    #suiteLinksBox .ms-core-suiteLink-a[id$=’ShellNewsfeed’],

    #suiteLinksBox .ms-core-suiteLink-a[id$=’ShellSites’] {

    display: none;

    }

    Get rid of the anything that could possible go in there 

    #suiteLinksBox {

    display: none;

    }

     

    There you have it folks – simple css to just pop those items right off the page.

    Hiding People from People Search

    Introduction

    This all started as a request from a client to hide only certain users from the people search. I’ve decided on this route because the management interface already exists to update user profiles and it would be very little work to add a user profile property, get it crawled and use that as the filter in the people search results webpart. Below I will explain how I was able to accomplish this in Office 365 but the same would work for a SharePoint 2013 on prem.

    How To

    In Office 365 -> SharePoint Administration -> User Profiles


    Click “Manage User Properties” under the People Group


    Click “New Property”


    Set the following properties (everything else leave be)

    Name: HideFromPeopleSearch

    Display Name: HideFromPeopleSearch

    Policy Setting: Optional

    Default Privacy Settings: Everyone

    Search Settings -> Alias [checked]

    -> Indexed [checked]





    Click “OK”

    Wait some amount of time for O365 to index the User Profiles and retrieve this new field.

    ** for on prem users – kick off a FULL search crawl of your people content source**

    You’ll know it’s ready when you can find the new Property in the Search Schema, Crawled Properties.

    From the Admin Center click “search” in the left hand menu


    Click “Manage Search Schema”


    Click “Crawled Properties”


    Enter “Hide” in the Crawled properties search box, then click the green arrow


    You will see the property appear in the search results when the property has been successfully crawled.


    Next you will need to create a “Managed Property”, Click On the “Managed Properties” link


    Click “New Managed Property”


    Enter the following information:

    Property Name: HideFromPeopleSearch

    Type: Text

    Queryable: Checked

    Retrieveable: Checked

    Add Property Mapping -> People:HideFromPeopleSearch





    Click Add A Mapping

    Enter “Hide” in the search box, click the Find button


    Select “People:HideFromPeopleSearch”, click the OK button


    Leave all the other properties as-is, click OK


    You will now have to wait until Office 365 runs a full crawl on your site for the property to become available in search. When this action takes place is unknown. (I’ve head 4 hours)

    ** for on prem users – kick off a FULL search crawl of your site content source**

    Next go to the people search page

    Edit the page and Edit the Web Part Properties of the People Search Core Results


    Click Change Query


    In the Property Filter drop down select –Show all managed properties–


    Select HideFromPeopleSearch


    Select “Not equals” then “Manual Value”

    Enter “True” for the Manual Value

    Next Click Add property filter


    Click OK


    Click OK in the People Search Core Results, Web Part Properties pane


    Save, Check-In & Publish your page – All Set!

    To manage users it’s as easy as using the User Profile Service Application, searching for a user’s profile and checking a box to save. Watch the video if you are note sure about that – http://screencast.com/t/5VGSLCt5N

    Remember it won’t be instantly removed – it will take a crawl of the people source for those changes to make it to the site!!!

    Bootstrap Responsive Navigation in SharePoint

    Introduction

    Many of my most recent branding projects have all been responsive. Clients are building sites that they want to work on desktops, tablets, & phones. If you’ve ever tried to deal with this request and SharePoint is your platform then you know what a handful this can be. For all my responsive branding projects I always go to Bootstrap. If you don’t know what that is then this article is not for you. We will not going into the details of implementing Bootstrap or the issues / fixes to do that.  If you’re looking for cookie cutter bootstrap in SharePoint then I recommend that you check out Responsive SharePoint.

    This article we will simply focus on the navigation. We will be replicating the standard out of the box (OOTB) SharePoint navigation and formatting it in a way that works with Bootstrap 3.0. I’ll provide you with the code snippet and an explanation of how to implement, and what is happening. It should leave you with the functionality of the Bootstrap’s collapsible navigation.

    Our main problems with the SharePoint navigation are:

      • SharePoint out of the box navigation is NOT responsive
      • SharePoint out of the box navigation doesn’t work well with touch enabled devices
        • It has hover actions on the navigation, and hover doesn’t work on touch devices

    b

    Prerequisites

    The following need to be reference in your site.

    • jQuery
    • Bootstrap 3.0
    • On-Prem SharePoint environment w/ access to the Masterpage
      • You can see the references these in my master page

    SORRY SharePoint Onliner’s and O365’s – this won’t work b/c you can’t use code blocks in the MasterPage

    ref

    The Navigation Code

    You can view the html markup that Bootstrap requires in order to work properly – http://getbootstrap.com/components/#navbar . The OOTB SharePoint navigation does its own thing so it would never work with Bootstrap. In this approach we’ll use the SharePoint top navigation provider but we’ll create our own navigation markup using asp repeaters. The following code will only work for 2 levels deep, it could be modified to work on X number of levels. You would just have to keep nesting repeaters. I am using ASP repeaters in the master page with no code behind in this approach. If you wanted to you could write a user control and simplify what goes into the master page but for me no C# code means less things that could break. There is one minor issue with this approach – see the Known Issues section.

    Download Snippet Here

    1 <nav class=”navbar navbar-default s4-notdlg noindex s4-noindex”> 2 <div class=”container”> 3 <!– Brand and toggle get grouped for better mobile display –> 4 <div class=”navbar-header”> 5 <button type=”button” class=”navbar-toggle collapsed” data-toggle=”collapse” data-target=”#bs-example-navbar-collapse-1″ aria-expanded=”false”> 6 <span class=”sr-only”>Toggle navigation</span> 7 <span class=”icon-bar”></span> 8 <span class=”icon-bar”></span> 9 <span class=”icon-bar”></span> 10 </button> 11 <SharePoint:SPLinkButton runat=”server” NavigateUrl=”~sitecollection/” ID=”onetidProjectPropertyTitleGraphic” CssClass=”navbar-brand”> 12 <SharePoint:SiteLogoImage name=”onetidHeadbnnr0″ ID=”onetidHeadbnnr2″ LogoImageUrl=”images/logo.png” runat=”server”></SharePoint:SiteLogoImage> 13 </SharePoint:SPLinkButton> 14 </div> 15 16 <div class=”collapse navbar-collapse” id=”bs-example-navbar-collapse-1″> 17 18 <asp:Repeater runat=”server” ID=”TopNavMenu” DataSourceID=”topSiteMap”> 19 <HeaderTemplate> 20 <ul class=”nav navbar-nav navbar-right”> 21 </HeaderTemplate> 22 <ItemTemplate> 23 <li runat=”server” class=”root-node”> 24 <a href=”<%# Eval(“Url”) %>“> 25 <%# Eval(Title) %> 26 </a> 27 </li> 28 <asp:Repeater runat=”server” ID=”FirstLevelNodes” DataSource=”<%# ((SiteMapNode)Container.DataItem).ChildNodes %>”> 29 <ItemTemplate> 30 <!– if has children –> 31 <li runat=”server” visible=”<%# ((SiteMapNode) Container.DataItem).ChildNodes.Count > 0 %>” data-node-count=”<%# ((SiteMapNode)((RepeaterItem)Container.Parent.Parent).DataItem).ChildNodes.Count %>” data-node-index=”<%# Container.ItemIndex %>” class='<%# Container.ItemIndex == ((SiteMapNode)((RepeaterItem)Container.Parent.Parent).DataItem).ChildNodes.Count-1 ? “dropdown last-node nav-node” : (Container.ItemIndex == 0 ? “dropdown first-node nav-node” : “dropdown nav-node”) %>‘> 32 <a href=”<%# Eval(“Url”) %>” class=”dropdown-toggle” data-toggle=”dropdown” role=”button” aria-expanded=”false”> 33 <%# Eval(Title) %> 34 <span class=”caret”></span> 35 </a> 36 <asp:Repeater runat=”server” ID=”ChildMenuRepeater” DataSource=”<%# ((SiteMapNode)Container.DataItem).ChildNodes %>”> 37 <HeaderTemplate> 38 <ul class=”dropdown-menu” role=”menu”> 39 </HeaderTemplate> 40 <ItemTemplate> 41 <li data-node-index=”<%# Container.ItemIndex %>” class=’nav-node’> 42 <a href=”<%# Eval(“Url”) %>“> 43 <%# Eval(Title) %> 44 </a> 45 </li> 46 </ItemTemplate> 47 <FooterTemplate></ul></FooterTemplate> 48 </asp:Repeater> 49 </li> 50 <!– if has zero children –> 51 <li runat=”server” visible=”<%# ((SiteMapNode) Container.DataItem).ChildNodes.Count <= 0 %>” data-node-count=”<%# ((SiteMapNode)((RepeaterItem)Container.Parent.Parent).DataItem).ChildNodes.Count %>” data-node-index=”<%# Container.ItemIndex %>” class='<%# Container.ItemIndex == ((SiteMapNode)((RepeaterItem)Container.Parent.Parent).DataItem).ChildNodes.Count-1 ? “last-node nav-node” : (Container.ItemIndex == 0 ? “first-node nav-node” : “nav-node”) %>‘ > 52 <a href=”<%# Eval(“Url”) %>“> 53 <%# Eval(Title) %> 54 </a> 55 </li> 56 </ItemTemplate> 57 </asp:Repeater> 58 </ItemTemplate> 59 <FooterTemplate> 60 </ul> 61 </FooterTemplate> 62 </asp:Repeater> 63 64 </div> 65 <!– /.navbar-collapse –> 66 67 </div> 68 <!– end container –> 69 </nav> 70 <!– end nav-bar –>

    Take a look at how this renders, much better.

    render

    And when the screen hits the break point. It collapses and you have the mobile friendly menu. The break point is set in the bootstrap CSS (I believe it is 768px). The menu below is also

    resp1

    And the drop down

    resp2

    The Code Explained

    You can skip this part if you don’t care what the code snippet actually does. I’ll break it down into parts to help you understand so you can make changes to it.

    1) It’s up to you to determine where you are going to put the navigation inside your masterpage

    In my particular case below I’ve created my own custom header where I put the navbar. I then turn the visibility off on the PlaceHolderTopNavBar (line 543)

    ex

    2) Looking at just the very high level bootstrap nav html

    boot1

    3) The Root Level Repeater

    The first level I consider the root level. It contains the root navigation node typically “Home”. Below is the best representation of how the data comes back from the topSiteMap navigation provider. Each color is a level. The children of “Home” are the main level. This is similar to the OOTB, you might have seen the first node that isn’t in the navigation provider but just shows up anyway.

    nav123 nav1234

    Now for the root level. In this screen shot you can see I render the root node then have a second repeater for its children nodes. The html is fairly simple for the first node and gets more involved for the next level.

    zerolevel

    4) The First Level Repeater

    This level gets a bit more interesting because now we have two different classifications of nav nodes, with children and without children. We have to handle each a slight bit different and I’ll explain. If you have children we need to specify a different class to have a drop down. Next it needs a nested repeater to handle the next level (2nd level). If there are no children we can simply just render the navigation node just as we did with the root level. I use the ChildNodes.Count to determine which to hide or show. You might notice that the

    • ’s, line 487 & 507, have some other attributes like data-node-count and data-node-index and are REALLY long.  I’ll explain that in the next section.

    level_one

    4a) First Level

    • ’s

    Let’s examine the first

    • the one with children. They are both the same except for the visible attr. We are going to focus on the following attributes, data-node-count, data-node-index, & class.

    data-node-count – is not needed, but this will tell you how many sibling nodes are detected. I used this to help generate the if statements for class.

    data-node-index – is not needed, but this will tell you the index of the node in amongst it’s current siblings. I used this to help generate the if statements for class.

    a

    class – this is basically a fancy edition I added which provides a first-node and last-node class. Again you’ll notice this one has “dropdown” in the class, the other

    • won’t because it doesn’t have children and doesn’t need a drop down.
      • The first node of a set will have the class=“dropdown first-node nav-node”
      • The middle nodes would have the class=”dropdown nav-node”
      • The last node would have the class=”dropdown last-node nav-node”
    1 class=’<%# Container.ItemIndex == ((SiteMapNode)((RepeaterItem)Container.Parent.Parent).DataItem).ChildNodes.Count1 ? dropdown last-node nav-node : (Container.ItemIndex == 0 ? dropdown first-node nav-node : dropdown nav-node) %>‘>

    5) The Second Level Repeater

    The second level repeater code gets a little simpler. This is our last level and we don’t consider if the node has children or not. We just render the value of the node and leave it at that. If you wanted to go 3, 4 or 5 levels essentially it’s just copy what we’ve already done but I wouldn’t go more than 2 levels. Bootstrap 3.0 removed  support for multilevel dropdowns, citing usability issues as the cause.  You would be on your own if you decided to go for more levels. There are 3rd party plugins available to assist Bootstrap 3.0 with multi levels.

    second_level

    Known Issues

    You expected everything to work beautifully, I know! But there is always a gotcha! when it comes to SharePoint.

    The only issue with this method is that you loose the selected state of the navigation. This is easily over come with supplemental jQuery. You’re only other alternative is to convert this all to a user control (like I mentioned way earlier) and then in code what page you are on and add a class. I don’t have the reference to this method – but I’m looking. To be posted later.

    Here is my jQuery work around – for highlighting the navigation for a selected node.

    Download Script Here

    1 $(document).ready(function() { 2 var nav = $(.nav); 3 if (nav == null || typeof (nav) == undefined) return; 4 5 /* Match navigation on current page */ 6 var url = window.location.href.toLowerCase(); 7 var decUrl = decodeURI(url); 8 nav.find(li > a).each(function () { 9 10 var href = $(this).attr(href).toLowerCase(); 11 var decHref = decodeURI(href); 12 13 if (decUrl.indexOf(decHref) != 1) { 14 $(this).addClass(active); 15 return false; 16 } 17 }); 18 });

    Conclusion

    That explains how I was able to utilize the SharePoint out of the box top navigation provider and build a new menu with ASP repeaters to behave responsively and work with Bootstrap 3.0. This is a simple enhancement that I’ve been re-using on many on of my On-Prem responsive projects. Unfortunately this doesn’t not work for SharePoint Online or O365 as the Masterpage does not allow code blocks. I’m curious if that’s with only editing pages by SharePoint designer, but what about deployed through wsp. http://stackoverflow.com/questions/22566589/sharepoint-master-page-asprepeater-tag . I hope to uncover an answer either way. Thanks for reading!