SharePoint Framework Context Explorer web part

image.png

The new SharePoint Framework developer preview is available now and you can check out how to get started over in the Microsoft GitHub repo here: https://github.com/SharePoint/sp-dev-docs/wiki

Follow through the setup and tutorials if you’re new to the SPFx and how it all hangs together.

With the new SPFx we get given a context object as part of the core which provides properties we can leverage inside our web part. This example is super simple and is aimed just to provide an easy to consume view of the context.

The full technical document is found  here

We can run the web part in the WorkBench hosted on localhost to see something like this

image

 

When we run the same web part within a SharePoint online hosted WorkBench it updates to show something like this

image

Extend the render

We inject some additional code into the render method to display the various properties.

Helper functions

There are a couple of additional functions to help deal with the objects and enums.

Clone and extend

Hopefully this will help you get familiar with some of the properties you have access to. Feel free to clone the code from my repo SPFx Context Explorer Repo.

Smile

The Future of SharePoint paradigm series – Using Visual Studio 2015 to build a SharePoint Framework client web part

image_thumb.png

Microsoft announced the new SharePoint Framework at the Future of SharePoint event on May 4th 2016. You can read about the full announcement here: https://blogs.office.com/2016/05/04/the-sharepoint-framework-an-open-and-connected-platform/

Dan Kogan, principal group program manager, covers the SPFx in his video from the event. Watch this if you haven’t already as it details all the cool new things that the SPFx will bring.

Most of the demo’s and blogs have focused on using Visual Studio Code. You can still develop using Visual Studio 2015 if you choose. This article will explain how to hook up the SPFx solution and use Visual Studio 2015.

This article is based on the SharePoint Framework preview and is subject o change for the GA. Any information is correct at the time of publication, but you should check with the latest Microsoft information.

Getting Visual Studio 2015 ready

The SPFx experience is normally used from VS Code so we have to add a few things to Visual Studio 2015 to enable it to use the node and npm tech.

First step is to install the Visual Studio 2015 update 3 (https://www.visualstudio.com/news/releasenotes/vs2015-update3-vs), this takes about 20 minutes and requires a restart.

Once the update is installed the Node.js tools for Visual Studio (https://www.visualstudio.com/en-us/features/node-js-vs.aspx) need to be installed.

Creating your solution

Create a new folder which will contain the generator output. I’ll call mine WebPartExample1

image

image

Run the SPFx Yeoman Generator

image

For the preview I need to add the next step of an alias

image

This will then pull in the node modules and begin running the generator

image

For this example we’ll choose the client side webpart

 

image

Give the web part a name

image

Add the description

image

Choose your Framework of choice. I personally prefer other frameworks than React so i’ll choose Vanilla.

image

And the generator is done.

image

If we check our file system we can see the new files

image

 

Importing this Yeoman output into Visual Studio

From Visual Studio 2015 create a new project.

From the TypeScript list choose Node.js and then select ‘From Existing Node.js code’.

It is important to select the folder your Yeoman output was in.

image

Then you need to name the project the same as your SPFx client side project.

If you need to find it check the package.json

{
“name”: “web-part-example-1”,
“version”: “0.0.2”,
“private”: true,

“engines”: {
“node”: “>=0.10.0”
},

“dependencies”: {
“@ms/sp-client-platform”: “0.0.20”,
“load-styles”: “^2.0.0”
},

“devDependencies”: {
“@ms/ms-core-build”: “0.3.23”,
“gulp”: “^3.9.0”
}

}

It will be listed in there.

Now click OK to run the wizard.

image

Again select the right folder and click next.

image

If you have the right folder you should see the gulpfile.js.

image

Click finish to complete the project import.

The project

Let’s take a look through the new project and solution.

image

We can see that there is an npm node which allows us to explore the node modules. There are also plenty of regular files like tsd.json, tslint.json, package.json etc. These should be fairly recognisable from common web dev projects. Remember that SPFx is expecting you to have working knowledge of modern web dev like TypeScript and gulp.

Fixing gulpfile.js for Visual Studio 2015

We need to just change the gulpfile.js to use var instead of let.

image

Setting up for F5 running

We need to modify the project settings to include the node module gulp and argument serve.

image

Once you make those changes F5 will build and run the server files and open the SharePoint Workbench

image

As I stated earlier these are steps based on the DevKitchen pre-release SPFx bits and will almost certainly change for GA. It hopefully shows how you can still make use of Visual Studio 2015 and don’t have to move to using VSCode if you’d prefer VS2015.

I hope you found this info useful and onwards to the Future of SharePoint

The Future of SharePoint paradigm series – First look at the SharePoint Home

image_thumb.png

On May 4th we got an insight into the Future of SharePoint from Jeff Teper and team, you can read my event summary here: http://weshackett.com/2016/05/whats-new-with-sharepoint-microsofts-future-of-sharepoint-event-round-up/ In this article I outlined three areas of this series, this article falls within:

User Experience

Exploring the implications for organisations of the new UI and experiences being pushed into service.

During the Future of SharePoint event we saw the announcement of the new SharePoint Home experience. You can read more about the wider announcement about the ‘mobile, intelligent intranet’ from the Office Blogs. In the video Adam Harmetz, Group Program Manager, SharePoint experiences, talks about all the amazing new user experiences coming to SharePoint and Office 365. About 40 seconds into Adam’s video we get the first glimpse of the new SharePoint Home experience.

A little history

Since the launch of the SharePoint 2013 visuals on Office 365 back in 2013 we’ve had a page called ‘Sites’. This is a first level navigation item which appears in the Application Launcher. As you can see in the image below the ‘Sites’ page forms a key element of the SharePoint navigation experience. It provides a strip of corporate links along the top, your personally followed sites, recent sites you have visited, and finally sites that are recommended. The Office 365 version is slightly more advanced than the on premises version.

image

 

The Future

Today Microsoft began the rollout of the new SharePoint Home. First Release tenants will begin to get the new experience as it rolls out across the service globally.

Lets take a closer look.

The welcoming experience.

You employees are guided into their first use with the key elements being highlighted. As you can see in the image your employee is introduced to the ‘frequent’ strip of sites and groups.

image

Next up your employee is shown the value of ‘following’ and ‘recent’ sites and groups.

image

Next is explanation of the ‘links’ section.

image

The final section is the ‘suggested’ sites and groups.

image

After the intro you’re in and the new SharePoint page is there in all its new shiny glory. You can see in the image below the main content areas match the replaced ‘sites’ page. This is good from one aspect as employees will be familiar with the sites and groups listed within each area.

image

Cards

Let’s take a closer look at each of the visible card types.

The site card:

The site card is picking up the site logo or name abbreviation if the logo was the default SharePoint logo. It has the ability to be followed via the star in the header strip. The site title is also being displayed. There are also three items of activity being listed. This is giving you insights into activity within that site.

image

The blog card:

Delve blogs you write for or read are listed. Notice the lack of following ability on blogs, it’ll be really great if this feature gets added in at some point.

image

Video channel card:

Video channel displays the video activity in that channel. You can follow that channel from the card.

image

Now a couple of interesting observations. First this card colour matches the video channel selection which is a good thing. Second is that you can follow the channel on the SharePoint Home, but not from within the channel itself. This scenario needs to get closed within the Video portal, I think the user experience should be consistent between the pages. This would reinforce the value of following the content through both experiences. Seeing a page experience within the Video portal which is the ‘followed channels’ would be a good extension to an already good experience. Many customers use the Video portal channels to group videos into a context for employees, such as technical walkthroughs, news, community and product information. Allowing an employee to follow a channel and see that from both SharePoint Home and the Video portal consistently.

image

While we look at the cards, you’ll notice that they have colours that are seemingly random. The team site above is using the default blue and white SharePoint theme, yet appears green in the SharePoint Home. This will hopefully become joined up as the new Team Site user experiences and branding rolls out later this year. I’d certainly like to see consistency between the two. Often themes on collaboration sites are set by business unit or type of function and having this visual cue consistent between both would again be a cool addition.

With all the cards the clicking/tap launches the site/group/channel into a new tab. The activity line items provide a link to each document or video which launches into a new window. I think I’d still use Delve to get to my documents based in activity scenarios.

Seeing all your Following and Recent

So in a normal enterprise you will be following and visiting a largish number of sites and groups. It’s not unusual to have 20+ in your personal following. In the SharePoint Home you can view them all by clicking the ‘see all’ link in the left hand menu.

image

The discoverability of this was not as clear as I think it could be. For me the ‘see all’ is visually associated to the ‘recent’ section so it took a few clicks to discover that it also showed all my ‘followed’ sites. Personally I’d like to see either the headings become clickable or a better information scent for each section, even if it just links to a bookmark of the section in the unified listing experience. As you can see from the image below this page from the ‘see all’ link lists all the sites I’m following.

image

The ‘recent’ section appears below the ‘followed’ section as you can see in this image.

image

This page doesn’t list out the activity within each site. I’m guessing there would be a pretty huge performance implication if every card was to display the activity list. Is this missing some of the value though? Should this be a place you can see activity across every site you follow. The Office Graph is driving a lot underneath, maybe there will be some exploration by Microsoft in bringing an activity addition to these cards as well. Although does this begin to clash with and dilute the value of Delve as an experience? I know customers are already asking about the search in the SharePoint Home they’ve seen in the videos and how Delve fits into this story. Delve is already an awesome experience and in many peoples opinion solves that ‘Goggle like’ search experience that we’ve been asked for for years. The way it can predict what you might be looking for before you search is proving to be of huge value in high performance organisation cultures for many customers. Is SharePoint now competing with Delve? The SharePoint Mobile app is also gaining document and site searching, the Delve app can do the same. Where and when will this become clear? Lets hope this gets addressed soon.

There also is no obvious back link on this page so I’m relying on the browser back to navigate.

Search

The existing ‘sites’ page provides search, the new SharePoint Home also allows a search experience.

The search box has a type-ahead feature as you can see below.

image

Typing something in like ‘exec’ in this example and you get this.

image

Clicking on ‘see all’ gives us an extended page.

image

At the time of writing my tenants weren’t showing the full experience Microsoft published via their support article. I’m assuming this is still rolling out behind the scenes.

SharePoint Home Search Results

You can switch back into the SharePoint search center clicking the link to ‘go to classic results page’. This auto switch isn’t remembered and has to be invoked each time. Another consideration here is that if you’ve invested in configuring and tuning your SharePoint search experience this new page is getting in the way between your initial search and the configured one. Possibly something to consider and feedback to Microsoft on.

Just for comparison lets look at the same ‘exec’ search in Delve.

image

Personally I would stick to using Delve for my initial search as it just provides a more useful experience for my working patterns. Board and Yammer features just add the value I need during a discovery scenario.

Links

The links are managed in the same way as before through the page if you are an admin or via the SharePoint Profile service in tenant admin.

Putting the links into edit mode

image

Adding a new link is simple

image

New site

Finally there is the ‘new site’ link, which still launches the existing SharePoint create new experience. We’ll see the new provisioning interface later when the new team sites arrive I guess. Still plenty of value to be had from your PnP provisioning investments, but plan for how this change will impact you.

Summing it up

So it’s a big improvement to the ‘sites’ experience. As with everything first release it’s not perfect, or complete, but jumping into User Voice https://sharepoint.uservoice.com/ and sharing ideas, improvements and new features will help the team get more from the service.

You can read the official support information here: https://support.office.com/en-us/article/Find-sites-and-portals-in-Office-365-6b85097a-87e0-4611-a29a-dfd49b1a1220?ui=en-US&rs=en-US&ad=US which is a good place to start to understand the mechanics of how to configure the page and the information available.

Dealing with this change inside your organisation also needs some considerations. Start to prepare you internal communications team to publise these features. Key highlights should include:

  • Reassuring employees that existing data reminds the same and that the experience is additive
  • Explaining the features and how they support working scenarios
  • Explaining the options with Office 365 for searching and which is appropriate in certain scenarios

I hope you found this info useful and onwards to the Future of SharePoint

What’s new with SharePoint? Microsoft’s Future of SharePoint event round-up

Team-site-home-1.png

Today Microsoft hosted a Future of SharePoint event, sharing publically for the first time what the SharePoint roadmap has to offer in 2016 and beyond.

It did not disappoint. The event placed SharePoint and OneDrive’s soon-to-be-released simple user experience and rich mobile capability front and centre of Microsoft’s Office 365 offering. Another point of emphasis was the huge leap Microsoft have in empowering employees to be more productive, with significant investments having been made in the document lifecycle experience.

What does this mean for Office 365 customers? Let’s take a closer look.

Improving SharePoint Online’s user experience

There has been a proliferation of intranet-in-a-box products built on SharePoint Online over the past 5 years that aimed to make the SharePoint Online experience more intuitive to employees. Their popularity in the market did not go un-noticed by Microsoft, who have listened and responded to customer demand, with heavy investment being made in SharePoint as a “mobile and intelligent intranet,” as Adam Harmetz, Principal Group Program Manager at Microsoft, informed us today. In 2016 some fantastic new Graph powered enhancements will be introduced to deliver a personalised intranet experience to employees, including a recent activity capability and a recommended sites tool, driven by the actions of those you work with day to day. Team sites will also enjoy a series of updates, in my opinion, making them virtually feature complete from a collaboration standpoint. Favourites, KPI monitors, members, files and spotlights will make up the core team site offering before the year is out.

Microsoft have taken the bold step to reintroduce the SharePoint name into the Office 365 experience and will be swapping out the ‘Sites’ tile for a ‘SharePoint’ tile which comes through to your home experience. This modern and responsive user experience puts all the important sites and groups at your fingertips across your organisation.

image

Team sites have a huge overhaul and now provide a crisp and mobile ready experience. Your team can now highlight news, documents and announcement updates right on the home page experience.

Team site home 1

Within these Team sites pages gain the beautiful canvas editing experience from the Delve blogs. This will help teams share those important contextual articles about their work and outputs.

image

The improvements to SharePoint Online’s user experience has been supported with a new SharePoint mobile app experience which delivers an “intranet in your pocket” experience.

SharePoint app users will have on-the-go access to their sites and portals, files, search and people discovery as well as their work stored and managed in SharePoint. What’s more, the new app will also leverage office graph to highlight sites, content and people that are most relevant to the individual.

The SharePoint mobile app comes first to iOS, followed by versions for Windows and Android in the second half of 2016.

image

Empowering employees to be more productive

Document collaboration has long been the cornerstone use case for SharePoint Online and One Drive for Business. Microsoft are upgrading this experience so that when employees need to bring in files from OneDrive for Business or publish files between document libraries, users can click Move to or Copy to move or copy files to other locations across Office 365, without generating unnecessary versions of the same files. As such, moving a document from One Drive that you may have been working on in isolation, to a team site for wider consumption, will become a quick and easy process.

The Future of SharePoint paradigm series

I’ve been aware of the roadmap announced today for SharePoint Online for a number of months as I was lucky enough to be invited to attended the Developer Kitchen in Redmond at the start of February to play with some of the new tech talked about today. This has kept my company, AddIn365, ahead  in developing products for Office 365 that deliver value over and above what the platform has to offer and the direction of travel for services like SharePoint Online we heard about today. Today’s announcements will exert some much needed pressure on the wider Microsoft SharePoint eco-system to bring harder working value-add solutions to market.

Over the next couple of weeks I’ll be publishing articles on three key areas:

Mobile

How the Microsoft mobile offering has transformed the use cases for SharePoint, OneDrive and Office 365 for organisations.

User Experience

Exploring the implications for organisations of the new UI and experiences being pushed into service.

SharePoint Framework

A personal favourite, we’ll explore the implications for design, build and tech approaches in readiness for it’s release later this year. Whispers…. TypeScript and Framework wars enter the SharePoint dev conscious (React against AngularJS)

The full Microsoft roundup

For the full details check out the Microsoft blogs:

Vision & Overview Blog

The Future of SharePoint – https://blogs.office.com/2016/05/04/the-future-of-sharepoint

SharePoint Server GA & Feature Packs

SharePoint Server 2016—your foundation for the future – https://blogs.office.com/2016/05/04/sharepoint-server-2016-your-foundation-for-the-future/

SharePoint mobile app, SharePoint home, team sites, Microsoft Flow & PowerApps integration

SharePoint—the mobile and intelligent intranet – https://blogs.office.com/2016/05/04/sharepoint-the-mobile-and-intelligent-intranet/

SharePoint Framework

The SharePoint Framework—an open and connected platform – https://blogs.office.com/2016/05/04/the-sharepoint-framework-an-open-and-connected-platform/

It’s great to see that Microsoft are being pro-active in claiming the intranet space as part of their SharePoint Online offering. This will add a lot of value to the Office 365 service for subscribing organisations and will provide one more reason to those thinking about a move to Office 365, for doing so. The new user experiences, fantastic new SharePoint app and enhancements to the document experience fill some feature gaps and benefit from being both simple and intuitive.

Office 365 Unified API session from Microsoft Recoder 2015

MS-RECODER-540x270-Tweet_thumb.jpg

About the event

Recoder 2015 was a free one-day conference for application developers and IT professionals who wanted to get the fast track on Office 365.

My session

Intro to Office 365 Unified API

Over recent years Microsoft has been busy resetting the traditional developer landscape and in this session Wes will be introducing you to the exciting new Office 365 Unified API model and helping you to understand the APIs architecture and what choices or decisions you need to consider when approaching a development project in today’s Microsoft world.

Here are the slides that I presented during my session.

This was part of the introduction sessions so was super high level. During the short live demo I used the following API Explorer site.

https://graphexplorer2.azurewebsites.net/

This site allows you to prod and try out all the code snippets from the deck. When you first log in you will be asked to trust the app to all your Office 365 services. Then you can begin to call the various endpoints via the REST syntax.

Speaking at Microsoft Recoder 2015

MS-RECODER-540x270-Tweet.jpg

About the event

Recoder 2015 is a free one-day conference for application developers and IT professionals who want to get the fast track on Office 365. Discover how you can work smarter now, and get ready for the big innovations that are on the horizon.

Office 365 has become Microsoft’s fastest growing multi-billion dollar business, with hundreds of millions of users. At Recoder 2015 you will learn how you can build on this success – tapping into the secrets of the O365 APIs. There are very exciting times ahead, as Microsoft transforms the popular O365 productivity suite into an open platform running on all of the major operating systems, including Windows, Apple iOS and Google Android.

Recoder 2015 offers a fascinating day, whether you are an app developer looking to incorporate O365 functionality in your own apps, a developer creating full applications for O365, or an IT Pro responsible for the deployment and management of O365 applications.

See the UK’s first Live Demo of SharePoint Server 2016

In the morning you’ll gain new insights from some exciting keynote speakers including Steve Smith from Combined Knowledge (demoing SharePoint 2016 for the very first time in the UK) and Simon Hill from Wazoku, who will be sharing their views on the future of productivity and collaboration rooted in the reality of today. The afternoon is dedicated to breakout sessions tailored to IT Pro’s who deploy and manage the apps, plus Introductory and Deep Dive technical workshops for Developers, delivered by some of the industry’s most respected MVPs including Chris O’Brien, Spencer Harbar, Waldek Mastykarz and myself.

My session

Intro to Office 365 Unified API

Over recent years Microsoft has been busy resetting the traditional developer landscape and in this session Wes will be introducing you to the exciting new Office 365 Unified API model and helping you to understand the APIs architecture and what choices or decisions you need to consider when approaching a development project in today’s Microsoft world.

Registration

It’s free to attend, but registration is mandatory.

You can register at http://aka.ms/Recoder2015

We have capacity for 300 and we are expecting a sell-out.

SUGUK Yammer Deep Dive presentation

On Thursday April 30th SUGUK held a London session where I presented a session on Yammer deep dive.

 

Yammer deep dive

Many organisations are considering leveraging Yammer as their Enterprise Social Network (ESN). Office 365 has already taken some steps to integrate the Yammer capabilities by replacing the SharePoint newsfeed and introducing the document conversations. The reality is that these integrations are only the tip of the iceberg with regards the integrations you can achieve with Yammer.
This demo centric session covers in detail the integration options and the steps that a developer or architect can take to bring Yammer into use for a scenario.
We’ll walkthrough:

  • Learn how the Yammer Embed can bring conversations into SharePoint article pages.
  • How to post information into your Yammer network from other systems using OpenGraph.
  • Learn how to use the REST API to discover groups, messages, topics, users and perform advanced searches against the network.
  • Take a look at the cutting edge Azure Logic App and Yammer connector

 

SharePoint Evolutions 2015 presentations

April 20th – 22nd 2015 saw London play host to SharePoint Evolutions conference. It was a great event organised with so many quality speakers and companies in attendance. It was a privilege to be invited to speak again. This year I had two sessions as you can see below.

 

Introducing App Launcher

Delivered by: Wes Hackett

Audience: Office 365, Information Worker, Developer
A new feature of Office 365 is the ‘app launcher’ and ‘my apps’ features. These new features provide a new style of navigation experience where all your apps are available from the Office 365 suite bar and the ability for a user to pin their preferred apps. This session introduces the features and the extensibility approaches to have your own apps interact with it.

 

Yammer development deep dive

Delivered by: Wes Hackett

Audience: Office 365, Developer
Many organisations are considering leveraging Yammer as their Enterprise Social Network (ESN). Office 365 has already taken some steps to integrate the Yammer capabilities by replacing the SharePoint newsfeed and introducing the document conversations. The reality is that these integrations are only the tip of the iceberg with regards the integrations you can achieve with Yammer.
This demo centric session covers in detail the integration options and the steps that a developer or architect can take to bring Yammer into use for a scenario.
We’ll walkthrough:

  • Learn how the Yammer Embed can bring conversations into SharePoint article pages.
  • How to post information into your Yammer network from other systems using OpenGraph.
  • Learn how to use the REST API to discover groups, messages, topics, users and perform advanced searches against the network.
  • Take a look at the cutting edge Azure Logic App and Yammer connector

 

If you were an attendee you can also watch the DVD of the sessions.

SP Connect 2014 Presentation

SPConnect

Tuesday 18th and Wednesday 19th saw this years SP Connect 2014 take place at the Meervaart Theatre, Amsterdam. It was a great event organised with so many quality speakers and companies in attendance. It was a privilege to be invited to speak Smile

I presented a session on the new Office 365 APIs with Chris O’Brien, the slides from our session can be seen below. I hope everyone found the session useful Smile I certainly enjoyed presenting to such an interactive audience.

Our session demonstrated the latest release of the Office 365 APIs which recently GA’d. We used the samples available on GitHub, The Web Client library used https://github.com/OfficeDev/Office-365-APIs-Starter-Project-for-ASPNETMVC the MVC5 starter example. This is a single tenancy app which uses the three elements of the Outlook Client library and the Auth models. It’s a great place to start as it shows a good spread of the API. The second demo showed the preview File Handler which shows how to extend Office 365 with a file extension capability. The pictures below give a sneak peek to how it looks when its working. The sample can be found here https://github.com/OfficeDev/GPX-FileHandler.

fullapp

SPConnectDemo

 

Thanks to everyone who attended the session, hopefully I’ll be back at next years event. Special thanks to Daniel Laskewitz for allowing me to use his session picture in this article Smile