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

How is the Delve Yammer feed configured?

image.png

Delve is a great way to discover content and people across Office 365. One of the best social features within Delve is the ability to take part in a Yammer conversation directly against the content.

The Delve conversations experience

image

As you can see each Delve card has a menu in the bottom right which provides employees with the option to ‘Talk about this in Yammer’.

image

The conversation panel then pops out and displays all the conversations about that content within your Yammer network.

image

So how do you need to configure the Yammer Embed widget to match the settings seen in Delve?

Delve makes use of the same Yammer Embed widget as you would anywhere else within Office 365, or other web pages. Using the html inspector in your favourite browser you can see the settings passed by the hosting page to the iframe widget.

Digging deeper you can see that the Delve feed iframe is configured as follows:

(example)

src=”https://www.yammer.com/embed-feed?
container=%23yammerRender
& feedType=open-graph
& objectProperties%5Burl%5D=https%3A%2F%2F<tenantname>.sharepoint.com%2Fsites%2Fnewsdev1%2Fuk%2FPages%2FKatherine%2520Grainger%2520Is%2520Britain’s%2520Most%2520Successful%2520Female%2520Olympian.aspx
& objectProperties%5B
private%5D=true
& config%5B
promptText%5D=Talk%20about%20this%20on%20Yammer
& config%5B
defaultToCanonical%5D=true
& config%5B
header%5D=true
& config%5B
hideNetworkName%5D=true
& config%5B
footer%5D=false
& config%5B
showOpenGraphPreview%5D=false
& config%5BuseSso%5D=true
& bust=1471035190502″

So the settings are:

  • Feed type: open-graph
  • Private: true
  • PromptText: Talk about this on Yammer
  • DefaultToCanonical: true
  • Header: true
  • HideNetworkName: true
  • Footer: false
  • ShowOpenGraphPreview: false
  • UseSSO: true

So these settings mean that it is defaulted to using the open graph mode. This converts the content url into a rich object in Yammers social graph. Private being true means it requires either a group or people to be mentioned to show to those selections. The prompt text appears in the text box. Header being true makes it show, combined with hiding the network name makes it show ‘Yammer Conversations’. No footer is being shown, so no ‘log out option’. Interesting they choose not to show the open graph object previews. This makes a little sense as that can’t see internal Office 365 data, although you might still want this to be ‘true’ in the case where an employee posts a url that is public. Finally the default to canonical (crazy name for this) means it will seek to use your accounts ‘home’ network rather than default to whichever network you last visited. That’s quite useful as you don’t want to accidently share private corporate links to another network. Use SSO being true means it uses the SSO.

So there you have it, simple settings correct for the context of Delve. Useful to know if you want to have the same experience elsewhere.

Driving engagement with your organisation through the Office 365 Video Portal

Image_EasilyConsumerVideo_713x354

Back in November 2014 Microsoft announced the release of the Office 365 Video Portal. This was the first of the so named NextGen portals Microsoft aims to release. We gained an internal Video portal within each Office 365 tenant backed by the power of the Azure Media services platform. This was also the first time we had received a service at MVP (minimum viable product) stage. So the community and customers alike began to watch the Office 365 teams roadmap closely and provide feedback via their UserVoice channel.

Introduction to the Video Portal

I won’t spend a huge amount of time explaining every detail about the Video Portal, but if you’re new to Office 365 here is a little more about the Video Portal services.

Video Portal

The Video Portal is the main ‘Hub’ experience, it is the entry point when you navigate to the Video Portal from the application launcher tile. It displays a spotlight of selected videos, trending video aggregation, upto three video channel video aggregations and a channel directory. Video Portal admins can make various settings changes such as the spotlight video selections and the permissions for the portal.

Video Channel

The Video Channels are logical collections of videos. They feature a spotlight, trending aggregations and actually store the videos (for the technical amongst us it’s a little more complex than that). Each channel has settings like the spotlight video selections, Yammer group selection and colour for the header, plus permission.

Video playback page

The playback page is where you can watch the video, discuss it on Yammer, see suggested videos.

Microsoft published a good overview…

Read about the service from the Office 365 site.

To find the indepth help and instructions for the Office 365 Video Portal visit the https://support.office.com site.

Office Mix

At the same time that the Video Portal was announced a little known app called Office Mix also gained the ability to publish directly to the portal. Office Mix is an awesome addition to PowerPoint which helps employees to create interactive video presentations, you can read more about the features over in the tutorial section of their site. Combining both Office Mix and the Office 365 Video Portal opens up many new opportunities to leverage the powerful Office Mix capabilities and still use them within Office 365.

So where can Office Mix help your organisation?

You can use Office Mix when:

  • You need to prepare a presentation for your team, customer or partners and have read-only mode with the animations and transitions
  • You need to improve knowledge sharing, adding voice, video and digital ink to your slides
  • You need to understand who watched which portions of your content, and survey your audience to gain feedback and insights
  • You need to support e-Learning scenarios, turn PowerPoint into a tool which saves time and money allowing experts to produce and publish their content
  • Share pre-recorded mixes for the meeting presentation prior to the meeting, freeing up the meeting time for discussion and actions

You can find out more about Office Mix for business here.

So you can see the this collaboration between Office Mix and Office 365 Video Portal will allow your employees to produce content in a more interactive fashion. This is an area of your Office 365 rollout which really supports employees during their working processes. Publishing these videos into the Video Portal then makes them easier to discover via Delve and other sites.

Where do you use the videos?

So hopefully your organisation has made use of the Video Portal and has a vibrant collection of channels. It’s always better to bring those videos into other information contexts.

You can embed a video anywhere across your SharePoint Online, and with hybrid on-prem SharePoint. Microsoft have a great article on their support site which details the steps. This will help your employees make use of video to support other content. Examples like a mobile phone video uploaded with a site visit, then embedded on a best practices team site for discussion.

Delve is a great way to discover video content being produced across your teams and departments. Using Delve you can add those to Boards or Favourites so you can find them later.

The videos can also be embedded into the Delve modern blog articles, again helping to make those articles much more media and context rich.

Understanding the stats

Just released are the video statistics. You can find all the details here.

The most exciting part of the new stats is the ability to see inside the viewing stats. Video is such a rich media that simple view counts don’t really cut it. The new stats (from Feb 19th 2016 onwards) will begin to show a breakdown of the viewer engagement.

An example from the launch article:

Office 365 Video Viewer Engagement

Why is this cool?

Well lets imagine you have a month all hands meeting in which your CEO talks about the business strategy, sales wins and various reward announcements. These meetings are often recorded and published by the internal communications teams. The comms team will already be promoting the video via existing channels like Yammer/Slack and email. Now they can also understand the true engagement with the video and act accordingly. Imagine that at 48 minutes into the video the CEO made the most significant announcement which the comms team wanted people to see. From the graph above they can quickly see that less than half the viewers made it to that time in the video. This gives them opportunity to tailor new messaging about the missed communication.

Wrap up

Hopefully this has shown you a few options, features or tid-bits about the Video Portal that you can dove tail into your engagement and communication strategy within your organisation. Making better and deeper use of your existing Office 365 investments.

Office 365 SuiteBar becomes responsive

image_thumb.png

Quick heads up about some SuiteBar improvements which are worth knowing about.

Microsoft have recently update the Office 365 SuiteBar. As you can see in the image below the Application Launcher got a new visual which resembles the Windows 10 Start experience. You can now resize the tiles as well as drag and drop them into a desired order. The tiles can be small like my Twitter and TinyPng or massive wide ones like my Delve.

image

Overall the SuiteBar has now become a responsive experience. It changes and adapts depending on the screen width and this removes the need for any clever work around.

Examples:

SuiteBar at a full 1920 width

image

SuiteBar a little smaller. Notice how the Application Launcher jumps to the right now.

image

Between the sizes above their seems to be a tiny glitch in about a ten pixel range where extra buttons appear.

image

The new buttons don’t do anything at this point though.

Finally we get down into the smaller mobile sizes.

image

I hope you found this update useful and it gives you chance to remove any customisations you might have made for the responsive SuiteBar.

OneDrive for Business gets a new user experience

OD4B

The eagle eyed amongst you will notice that Microsoft have released an update to the web interface of OneDrive for Business. It now looks and functions in a very similar way to the personal consumer version of OneDrive.

OneDrive for Business look and feel.

image

OneDrive consumer look and feel. (i’ve just redacted the names of my personal stuff, it doesn’t really have the blobs of colour all over it)

image

To me this feels like a great improvement in the user experience, and probably a good view an Office Fabric use. Microsoft did say that OneDrive for Business was utilising the Office Fabric. One challenge with this unification will be helping your employees to understand the differences, how to identify the UI so they understand where they are. I can already see some tricky consulting conversations ahead with regards the obvious questions around helping an employee differentiate one from the other. We always have to remember those of us living and breathing Office365 24/7 are actually not a ‘typical’ employee Winking smile. The most obvious element is the ‘Office 365’ wording in the suitebar.

A tour of some of the features

Lets take a walk around the new features. While this isn’t an exhaustive list it should help get a footing.

View formats and options

We can switch between viewing formats with the following buttons in the action bar.

image

Sort is fairly self explanatory and changes the sorting of the main view.

The little block icon next to it toggles the main view from details to icons.

Details view

image

Icons view

image

Document details

The ‘hover panel’ is no more. Personally i’m really glad to see the removal of the hover panel idea, it always felt clunky to me and was a really bad experience on a touch enabled device.

Selection of a document is now super easy even with a fingertip.

image

You can see the action bar become contextual with the common action now available for that file.

image

You can also invoked the menu from the item ‘…’ option as well.

image

Opening the details panel now provides an in-depth view of the selected document. The file previewer for an Office Document shows the contents. If you select a folder you get the large folder preview icon and an item count for that folder.

image

Return to the older UI style

Simply click the bottom left

image

Which takes the view back to the older one.

image

Help panel

The new ‘Help’ panel also lights up with new content for this interface. Access it by clicking the ‘?’ icon on the suitebar. This is something that you can encourage employees to click through when they enter an area of Office 365 they are less familiar with. Microsoft are starting to bring some more useful and engaging information in through this mechanism and I’d encourage organisations to begin to highlight this feature as a good way to aid learning.

image

First item prompt.

image

Second item shows a small animation in the panel.

image

Third item prompt.

image

Fourth item prompt.

image

UserVoice

As you may be aware Microsoft like to hear from their consumer base about their changes and any ideas they might have via UserVoice. The specific OneDrive for Business is here: https://onedrive.uservoice.com/forums/262982-onedrive/category/86090-onedrive-for-business

Summing it all up

So these new user experience changes are great, one thing that struck me was no mention of them on the roadmap site http://success.office.com/en-us/roadmap.

Introducing AddIn365

AddIn365BlogHeader

Office 365 presents an opportunity to meet more business objectives than ever before with an ever expanding set of services. However, out-dated attitudes and practices towards implementation of the Office 365 platform make it difficult for many organisations to realise this potential.

AddIn365 offer a fresh partner perspective on how clients can maximise the return on their investment in Office 365 with a context driven approach to add-in development. This new approach takes advantage of the great new services Office 365 provides and focuses on attaining a high level of employee adoption.

Office 365 presents a unique opportunity to move beyond a fragmented digital estate; it is a platform that brings together email, enterprise search, intranet, collaboration, enterprise social network and instant messenger. Furthermore, Office 365 natively provides the tools to link to other systems with ease via features such as the app launcher. Read more about the app launcher here.

Last year Microsoft released 400+ new features to the Office 365 platform. Many of these new features are complex and make light work of providing organisation’s insights that would have cost clients millions to develop in years gone by. Delve is just one example of this high quality engineering that comes as part and parcel of the Office 365 experience; it uses machine learning to understand who you are, who your network is and to suggest content that might be useful to you that you have not engaged directly with.

Organisations have recognised the opportunity that Office 365 presents in moving away from a disjointed collection of systems to a more integrated one. According to Radicati, growth of the Office 365 market share is expected to be 20% year on year for the next four years.

In order to take advantage of the great new services available with Office 365, organisations are turning to the market which tends to offer custom development or products in response to their business requirements, both of which present challenges.

Custom development tends to be:

  • Very Sites (SharePoint) focused.
  • Bends towards developing capabilities rather than configuring what is already available. This means that organisations tend to face more cost and protracted timescales when trying to deploy Office 365 than they need to.
  • Employee adoption is a secondary consideration to development and is often glossed over altogether.

Organisations that go down the product route tend to suffer three challenges:

  • Adoption is still a problem; employees using the platform will never ‘learn’ what is available so only a portion of the product will be used.
  • Products tend to branch from the Office 365 platform; clients that have invested in off the shelf products end up on the vendor roadmap and inevitably fall behind what Office 365 natively has to offer because Office 365 is evolving at a faster pace. This limits the return on investment an organisation can get from Office 365.
  • Products also tend to be based primarily on the Sites (SharePoint) part of the platform and do not take advantage of the great new services – again limiting the return on investment an organisation can get from Office 365.

We have seen these product challenges materialise recently within the intranet space (not too long ago I counted more than 15 products). Microsoft plan to release Infopedia in early 2016 which will provide all the common requirements an organisation has of an intranet, as Chris O’Brien reports here. With a powerhouse of engineers behind it this Office 365 native intranet capability will quickly become superior to any off the shelf product or custom developed intranet in the market.

Organisations are faced with a conundrum; both custom code and many off the shelf products fail to maximise a return on what is already available in Office 365 and inherit the adoption challenge.

So, how should organisations approach rolling out Office 365, in order to take advantage of the platform’s great new services and take employees on the journey with them?

I took the decision recently to co-found AddIn365. AddIn365 is the first Microsoft partner globally to offer a range of mobile and tablet friendly Workforce Enablement add-ins, for Microsoft Office and Microsoft’s Office 365 platform.

The AddIn365 add-in approach is context driven; tailored to individual employee’s daily tasks to ensure a high level of adoption whilst making use of a cross section of Office 365’s new capabilities.

AddIn365 add-ins increase productivity around common daily tasks and in doing so improve the employee experience of work.

Our two launch add-ins are:

  • AddIn Work Hub for Office 365 which provides staff a fully personalised dashboard to facilitate individual and cross-functional coordination, whether that work is operational, customer facing or delivery orientated.
  • AddIn Document Builder which is a Microsoft Office app that enables the workforce to create high quality documents quickly, through the creation and reuse of assets.

AddIn Work Hub brings together Calendar, Outlook, Delve, Groups, SharePoint team sites, Stories and the Video Portal.

AddIn Document Builder makes the process of document creation fast and accurate in Word, Excel and PowerPoint.

My ethos behind the designs of these new products has been:

  1. Make Office 365 intuitive for staff to use by providing context-led technology, so staff want to use the platform to get their work done faster and to a higher standard.
  2. Help organisations to get even more return on their investment in the Office 365 platform by using the new services Microsoft make available to support usage of the whole platform and not just SharePoint.
  3. Keep organisations on the Office 365 roadmap with a configure over customise development approach.

I’m really excited about the AddIn365 project and will be posting further on how I have led our engineering team to produce these add-ins over the next few months.

In the meanwhile, I would encourage you to check out the AddIn365 website and follow us on Twitter and LinkedIn for regular updates.

Adding Custom Tiles to the Office 365 App Launcher

image_thumb.png

Microsoft recently released a new feature so that as an Office 365 admin you can add tiles to the App Launcher.

 

Setting it up

Browse to the Admin dashboard for your tenant, from the left hand menu choose the ‘Company Profile’.

image

 

From the ‘Company Profile’ page select ‘Custom Tiles’ from the left hand menu.

image

 

The ‘Custom Tiles’ page is now displayed, and on very first load will be empty.

image

 

Click the ‘Plus’ to create a new tile.

image

 

You’ll notice that the information being requested is a lot simpler than the Azure AD application configuration. So in my opinion you may still want to opt for the Azure AD application root if you wanted to use groups/user assignment for the tile. This new Office 365 custom tile approach really only provides ‘add the icon’ style functionality. So in scenarios where you wanted to use a consistent name and icon for say a HR system where different regions had different urls/systems you’d still want to use the Azure AD root. Relying on this new Office 365 custom tile would need two tiles and both would show for everyone. As it stands today this feature is probably only useful for truly generic links such as the SharePoint root site collection (But why MS ignored that for so long has always baffled me).

Just before setting the tile information we need to make sure we have the logo somewhere, I always use Lego mini figures in this tenant so I uploaded a new picture to the assets library of the root site collection.

image

 

Once I have an image somewhere (it could have been located anywhere including externally from the tenant) I can enter the information to create the tile.

image

 

The new tile is now listed. Note that you can also edit and remove the tile from this screen.

image

 

Browse to your ‘MyApps’ page.

image

 

There you can see our newly created tile. From here the employee can decided to pin it the App Launcher.

image

 

They can also view details about the app.

image

 

We can see the new tile in the App Launcher.

image

 

So this is a neat new feature which will satisfy the common request to have a tile for the Intranet home page. While MS could hopefully go further in the future to allow employee and group assignment like the Azure AD apps.

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.

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.