Better late than never: 3 takeaways from Microsoft Ignite 2016 for SharePoint and Office 365 (with a developer spin)

I forced myself to wait a few weeks (OK, two months) and let the Microsoft Ignite dust settle before blogging about what’s next for SharePoint and Office 365.  As a rule, it’s best to wait until the conference high subsides before crowning each and every announcement as the greatest thing since sliced bread for {insert favorite Microsoft platform here}.

(Plus, a certain baseball team on the north side of Chicago is in the playoffs WON THE WORLD SERIES…)

wflag
I’ve been a bit preoccupied, but better late than never.

But Microsoft Ignite 2016 brought plenty of welcome news for everyone connected to the SharePoint platform, whether in Office 365 or on-premises.

With Jeff Teper and Bill Baer leading the way, Microsoft made it loud and clear: SharePoint is back as the premiere collaboration platform, and the changes we’ve seen lately are just a taste of what’s to come.

1.  Files are finally easy in Office 365

Wait, wasn’t SharePoint designed for file sharing? Well, yes– but as Office 365 and OneDrive for Business evolved, sharing files in SharePoint became just one way to collaborate. Most of us have files in Office 365 Groups, OneDrive, Yammer AND SharePoint, and navigating to each individual app to work on a file is painful.

Now, you can access (almost) all of your files in one place: OneDrive. All of your files from SharePoint team sites, Office Groups, OneDrive for Business and files that have been shared with you from other users’ OneDrive are all accessible via OneDrive and the OneDrive mobile app.

Noticeably absent from this list is Yammer, but don’t worry: the Yammer team had some good news of their own to announce (hint: it’s not dead)!

O365 Groups integration.png
From the right-side panel in Yammer (source: Yammer team blog)!

The Yammer roadmap includes tighter integration with Office 365 Groups, including a Group for every Yammer team created.  You can read the Yammer announcement about Groups integration on their Office Blog, or watch the roadmap video on Channel 9.

onedrive-in-yammer
Accessing OneDrive files in Yammer (source: Yammer team blog)

Developer spin: welcome to the OneDrive API!

Get used to using the Microsoft Graph to work with files in Office 365 and SharePoint, rather than the SharePoint CSOM.  Announced at Ignite, the Microsoft Graph now officially supports files and folders in SharePoint Online document libraries.

If this sounds confusing (wait, wasn’t the Microsoft Graph Files API recently deprecated?), that’s because it is (at least to me).  It is, in fact, the OneDrive API that now supports REST queries for SharePoint files.  Further adding to the confusion is that the SharePoint team announced on their Future of SharePoint blog that SharePoint files access is coming to the Microsoft Files API.

But this is just further proof that it shouldn’t matter where your files are stored– in OneDrive or in SharePoint Online– working with files in Office 365 is getting a consistent user experience that is backed by a consistent experience for developers, too.

2.  SharePoint UX is ready for the modern web

The SharePoint library and list UX has been virtually the same since 2007, and the new Modern Document Library and Modern List experience (now rolling out to all tenants) has been a breath of fresh air. While not perfect (there were some bumps along the way, and there are still some legacy features missing from the modern experiences), these new user experiences provide a fresh take on the traditional library and list.

Notable features in modern document libraries include new grid views, pinned documents, fast view switching and a powerful details pane that you can open by simply typing “i” on your keyboard.

Modern lists now inherit the same slick new UI and support quick and dirty Flow and PowerApps integration.  In this blogger’s opinion, neither is fully ready for prime time yet, but each provides a ray of hope for rapid workflow development and mobile form creation, respectively.

But the biggest announcement coming out of Ignite is that modern Pages are live.

pages.png
Configuring the Highlighted Content web part on a modern Team Site page

The Pages experience brings a wealth of new web parts in a responsive grid (well, more like a responsive column– I’m not sure if a true grid is in the works).  Out of the box, Modern Pages support several new modern web parts:

  • Text
  • Image
  • Document
  • Office 365 Video
  • Content Embed
  • Highlighted Content
  • Quick Links
  • Site Activity
  • Yammer Feed
newpage.png
Adding client-side web parts to a new Modern Page in SharePoint Online

I’ll blog more in-depth about each of these options another day, but for now, the big takeaway is that Modern Pages are live, and with them come modern, client-side web parts.

Developer spin: time to learn SPFx

With modern, client-side web parts comes the SharePoint Framework, or SPFx, for developing client-side web parts for SharePoint Online.

This isn’t exactly news from Ignite– modern web parts were announced back on May 4 as part of the Future of SharePoint event– but we got a taste of actually developing them during a few developer-focused sessions at Ignite.

Donning a baller “$ yo SharePoint” shirt, Chakkarah Deep (PM, SharePoint Developer Platform) led an intriguing session on the SharePoint Framework in which he demonstrated using modern web scaffolding tools such as Yeoman, Gulp, Node.js and NPM to build client-side web parts in SharePoint Online with new eye candy like Office UI Fabric (built with React.js).

What a mouthful!

ctc3cfawyaeuqjw
Got my hands on a sweet $ yo sharepoint shirt. I feel like Superman.

It’s a big mouthful, but it’s an important one for SharePoint developers.

Gone are the days of building web parts that inherit from the .NET WebPart class.  Gone are the (brief, but painful) days of building App Parts for your SharePoint Add-in only to scratch and claw to get something useful to render in an iFrame.

New web parts are:

  • Written entirely on client-side languages: pick a favorite and scaffold the supporting SharePoint classes
  • A brilliant example of the new TypeScript 2.0 (not required, but useful)
  • Environment-aware: run in SharePoint when deployed to production, but can be developed locally with a Node server and Gulp using data from a live SharePoint environment
  • Backwards-compatible: can be added to old web part pages and new Modern pages.
  • Still in preview: you will need a development tenant to deploy and test them with SharePoint connections

3: Every SharePoint Site gets a Group, and every Group gets a SharePoint Site

I saved the best for last.

Now, when you create an Office 365 Group, a SharePoint team site is provisioned (actually, it’s always been this way, but you can finally access the full team site).

And the reverse is true: when you create a SharePoint team site, you get an Office 365 group.

Although the message is still a bit murky and provides an opportunity for thought leadership on what features of Groups and Team Sites to use when, this much is clear: you no longer need to choose between a Group or a Team Site.

The end result is that when you create a site or a group in Office 365, you get a full-blown, people-centric collaboration suite with:

  • A Shared Documents library that is accessible within OneDrive
  • The ability to create additional document libraries with custom columns, permissions, Flows and PowerApps
  • The ability to create custom databases (lists) on your site, again with the full extensibility of Flow and PowerApps
  • A group inbox in Exchange via a distribution group and a team chat that you can access in Outlook
  • A OneNote notebook
  • A Plan in Planner for tracking project goals, tasks and assignments
  • A home page for your team that shows recent documents and team activity, with the ability to create additional pages with web parts that highlight activity, individual documents, or even list items
  • A true modern, mobile experience in the SharePoint app on your phone

Clicking the “Files” tab in any view of an Office 365 Group (from within Outlook or on the team site) will open the Team Site Shared Documents library, but you can then navigate to additional document libraries, pages and lists on your site.

Developer spin: owning the provisioning story is more critical than ever

I’ve been screaming as loud as I can about the incredible work the OfficeDevPnP team has been doing around site provisioning in Office 365 (and SharePoint 2016).

If you’re new to the PnP team, here’s a TL;DR: the Office Development Patterns and Practices team curates open-source, documented code on GitHub that helps you implement best practices for provisioning custom site collections in Office 365.

Owning the site provisioning experience has always been important to SharePoint developers; most of my clients request some means of creating a customized instance of a SharePoint site.

So why is it more important now?  We’ve traditionally used site templates to take more ownership of the large, sprawling toolbox that is a SharePoint site, typically managing customization around things like web parts on pages, navigation, security groups and permissions, default list instances and, of course, site columns and content types.

This toolbox has now grown to include all the Office 365 Groups goodies (see above), which means that administrators wishing to stand up governance around the creation of SharePoint sites now have even more to govern.

For now, the best advice I can give to SharePoint developers and administrators scrambling to govern Team Sites and Groups is to funnel the creation of Office 365 Groups through the creation of SharePoint sites, where you can own more of the experience.  Utilize tools like the OfficeDevPnP Partner Pack to manage self-service site creation and, if you’re especially concerned about content sprawl, turn off the ability for end users to create Groups and instead direct them to a site request list.

As the Office 365 toolbox continues to evolve, common customization requests of SharePoint/Office 365 developers will grow to include standing up custom team sites with custom document libraries/lists, plans, custom navigation, default content, limitations on naming conventions and perhaps even integration with the recently-announced Microsoft Teams.

By owning the provisioning experience with the OfficeDevPnP toolkit, you gain programmatic control over several aspects of the experience, and I anticipate that the list of customizations will continue to grow; Microsoft has already announced that Planner Templates with custom buckets and flags are in development:

roadmap
Custom Planner templates are coming to Office 365.  Source: FastTrack

Wrapping it up

As I put the final touches on this blog here at the MVP Summit, I’m reminded that Microsoft now moves faster than most of us can keep up– even MVPs like myself who live and breathe this stuff every day.

If you’re overwhelmed, you’re not alone.  But know this: incredible things are ahead for collaboration, and SharePoint is at the center of all of it.

Developer spin: it’s a paradigm shift

Our role as SharePoint developers has undergone a paradigm shift, from shoehorning custom business functionality into SharePoint by hook or by crook, to mastering the ins and outs of the SharePoint and Office 365 toolkit enough to make an educated guess as to:

  • Which Office 365 service to harness for a particular use case
  • When to custom-develop an application, vs. when OOB is good enough
  • How to bridge the gap between OOB and what your customer actually wants using client-side code

 

Allow Office 365 Group Members to “Send As” the Group Email Address

Background

At PSC, we are nerds.  Many of us are also big fantasy football fans.  Naturally, we use Office 365 Planner to manage the office fantasy league.

FFL.png

We run 2 leagues– an A and a B league– like the British Premier league.  Every year, the bottom two teams in the A league are relegated to the B league, and the B league champion and runner-up are given the option to join the A league.

Depending on who returns to play each year, a few spots open up in the B league and we send an open invitation to everyone else at PSC, first-come first-serve.

Because we used Planner to manage the league this year, we wanted to send the “league sign-up” email from the Office 365 Group’s email address (fantasyfootballcommissioners@psclistens.com) so that every reply went straight to the Group’s conversation and each of the 3 commissioners was notified when a reply came in.

Nuts and bolts

Office 365 Groups are comprised of multiple pieces: a SharePoint Team Site for document storage, a Notebook, an Exchange Calendar and an Exchange Distribution Group (with a snazzy “Conversations” front end) for email.

So we should just be able to update the settings for the Distribution Group like you would any other distro to allow users to send as the group.

To enable a user to send email as the group , you can make a quick change in the Group configuration in the Office 365 Exchange admin center.  Note that your user account must have the Exchange Administrator role to perform this action.

1.  Open the Exchange Admin dashboard and navigate to the groups page:

snip_20160804114530

2.  Search for the group you want to edit:

snip_20160804114611

3.  Double-click the group to open it, then click group delegation.

snip_20160804114842

4.  Click the + button, then add each user who should be able to send email from the group.

snip_20160804114810

5.  Click OK.  The users are now listed.

snip_20160804114720

6.  Click Save and you’re done!  These users can now send email as the group:

snip_20160804114937

snip_20160804120935

 

Adding a Hyperlink control to a repeating section in Nintex Forms for Office 365

You may have noticed that if you try to add a Hyperlink control to a repeating section control in Nintex Forms for Office 365, you get an error message:

1

To get around this limitation, you can create your own hyperlink “control” with a couple of panels, and a couple lines of CSS and JavaScript.  The code is really simple, and you can just copy and paste it from this post!

How to build the custom Hyperlink “control”

1.  Expand your repeating section so that it’s about 3 times taller than when you initially drag it onto the canvas.

2.  Drag a Panel shape into the repeating section.  Make sure it’s inside the repeating section and not just on top of it.

3.  Drag 2 Single Line of Text controls into your new panel, followed by 2 labels, then arrange the 4 controls so that they look like the Hyperlink control.  I changed the label text to match the labels in the Hyperlink control, too:

18

4.  Name the top text control “WebAddress”:

6

5. Name the bottom text control “TextToDisplay”:

7

6. Drag a second panel into the repeating section, and drag a Calculated Value control into the panel.

19

7. Add a rule to the top panel (the one with the text box controls) to hide it if the form is in Display Mode.

8

8.  Add a rule to the bottom panel (the one with the calculated value control) to hide it when the form is NOT in Display Mode.

9

9.  Double-click the bottom panel (the one with the calculated value control) and update its “CSS class” property in the Formatting section.  Type hyperlink-repeater-section- into the field, then double-click the “Is Display Mode” function under the Common header on the right side of the dialog to insert the function into the “CSS class” property.

21.pngWhen the CSS class is rendered on the control, it will be rendered as hyperlink-repeater-section-True only if the form is in Display Mode.  We’ll define a CSS class for hyperlink-repeater-section-True in a bit.

10.  Double-click the repeating section and add CSS classes the same way.  In the “Item CSS Class” field, add hyperlink-repeater-IsDisplayMode (again inserting the “Is Display Mode” function), and do the same in the “Alternate item CSS class” field.

13

These CSS classes just allow us to remove the extra white space beneath the field when the form is in Display Mode.

Add a little bit of code

11.  Now, define the two CSS classes we added to the form controls.  In Form Settings, add the following CSS to the Custom CSS section:

/*Hyperlink Repeater Styles*/
.hyperlink-repeater-True{
height: 35px !important;
}

.hyperlink-repeater-section-True{
height: 35px !important;
}

When you’re done, it should look like this:

15

12.  While you’re in the Form Settings dialog, add a JavaScript function to the Custom JavaScript section:

function MakeHyperlink(url, text){
return '<a href="' + url + '" target="_blank">' + text + '</a>';
}

 

This is the function we’ll call in the formula of the calculated value control.  Click Save.

13.  Set the formula for the calculated field control in the bottom within the repeating section.  Double-click the formula to open it, then type MakeHyperlink( into the “Formula” field.  All you’re doing here is calling the JavaScript function you wrote in the step above.

You need to pass the function 2 parameters: the web address, and the text to display.  Double-click the WebAddress control under the Named Controls header in the right side of the dialog box.  Type a comma (to separate the parameters), then double-click the TextToDisplay control.  When you’re done, the formula will look like this:

3

14. Before closing the dialog, change the value of the “Recalculate formula on view mode” to “Yes”, and change the value of the “Recalculate formula on new mode” and “Recalculate formula on edit mode” to “No”.

4

Click Save.

14.  Finally, clean up the repeating section so that it’s not gigantic when the form is in Edit Mode (we’re already fixing this in Display Mode with the custom CSS).  Drag the bottom panel (the one with the calculated value control) on top of the top panel (the one with the text box controls), then shrink the size of the repeating section so that it just barely fits around the stacked panels.

The finished form should look like this:

11

Just a note– when/if you need to change anything in the panels within the repeating section, you will probably need to expand it and “un-stack” the panels.  Typically, Nintex Forms will automatically hide any vertical whitespace created by panels being hidden, but because the panels are within a repeating section, we have to take matters into our own hands.

Now you’re ready to test your form!  It’s not really easy to test in Preview mode, because the repeating values are stored in the form instance itself, so go ahead and publish the form.

Try it out!

Create a new list item, then add a couple of hyperlinks to the Links repeating section:

16

Click Save, then open the form in Display Mode:

17

With any luck, clicking the link should open it in a new tab.

If you don’t want the link to open in a new tab, remove target=”_blank” from the JavaScript function in Step 12.

Summary

In case you’re wondering what you did, you:

  1. Created a custom panel to hold the input for the hyperlink field, and a second custom panel to hold the display of the hyperlink.
  2. Created a JavaScript function to concatenate the URL and Display Text of the hyperlink “control”, then called the function in the formula for the Calculated Value control used to display the hyperlink.
  3. Set rules on the “Edit” and “Display” panels so that they only appear in the appropriate form.
  4. Added custom CSS classes to the Repeating Section control and the “Display” panel that use the “Is Display Mode” function to render a custom CSS class name, then defined a CSS class with this name and assigned it a hard-coded height property.

Nice job!  Let me know in the comments below if this worked for you, or if anything is unclear.  As always, sharing is caring!