Utilizing SPFx serveConfigurations

Recently a new serveConfigurations section was added to the serve.json config file in new SPFx Extension projects. These are a huge help when it comes to debugging extensions and are especially helpful when testing ClientSideProperties.

Robot-Tennis--33121

Background

Prior to the introduction of serveConfigurations, you couldn’t just run the gulp serve command like you do for webparts since that launches the local workbench where extensions couldn’t (and still can’t) be tested.

So the advice was to use gulp serve –nobrowser and then just navigate manually to a page in O365 and paste an ugly (and easy to screw up) set of querystrings.

Waldek Mastykarz even created a gulp task, gulp serve-info, that made this a little easier. I used it in my extensions and it was a huge leg up, but the whole thing was still clunky and a significant complexity preventing new developers from getting into extension development (or at least frustrating them).

What was needed was something as simple as gulp serve that took into account your custom locations and unique property settings. Fortunately, that’s where serveConfigurations comes in!

Setting up your serveConfigurations

When you generate a new SPFx Extension you’ll find a couple of initial serveConfiguration entries were created for you automatically in the config/serve.json file:

Default serveConfigurations

The values of these configurations should remind you of all of those querystring parameters because that’s exactly how these are going to be used. These values will build the URL for you when you serve your solution. The IDs and properties all match what was generated (although you are unlikely to keep the testMessage property for long).

The first thing you should do is replace the pageUrl property with the page address in your O365 tenant where you want to test the extension. Keep in mind these values are NOT used in the final package and are only for testing.

The sample above is for an Application Customizer (which is why the location property exists). Each type of extension will have slightly different properties (same as the debug querystrings), but will be added for you with your extension.

Multiple serveConfigurations

If you’re only doing a single extension in your solution and you aren’t using ClientSideProperties then all you need is the default entry using your own pageUrl value. If however, you have multiple extensions, then you’ll want an entry for each so that you can selectively decide which one you are serving when running gulp serve.

It is also comes in handy when you want to test different ClientSideProperty configurations. For my Field Customizer sample SPFx Item Order I allowed users to specify an OrderField property. When it was present the extension did one thing and when it wasn’t it did another.

To make this easy I included 2 serveConfigurations entries (one with the property and one without):

custom serveConfigurations

Using the serveConfigurations

Text in a json file! WOW! But how does this help?

Now when you run gulp serve the default serveConfiguration entry will be used and the browser will go to the pageUrl you specified and the debug querystring will be built using the values you provided!

Even better, you can specify which serveConfiguration you want to use using the –config parameter. So for the Item Order Field Customizer shown above, I could test the custom field configuration by entering this at a command prompt:

gulp serve --config=customField

Now the browser will be launched and my custom property will be set!

You can even see the URL that the browser will be sent to directly in the command output:

GeneratedURL

Aren’t you glad you didn’t have to type that (and get it right)? So, if you’re doing SPFx Extension development, serveConfigurations makes your life much easier!

The PnP Super Hero we “Need”

The SharePoint Patterns and Practices group often features a super hero clip-art with PnP on his chest. I really like the superhero (I’ve even got him as a sticker on my laptop), but there are several things about him that have been driving me nuts for a long time:

Original Issues

The biggest issue was that the only copy I have is a raster image which means it looks blocky when I make it bigger. So I remade the PnP Man in Inkscape as an SVG Vector image:

PnPmanOriginal600
Shown here as a png

 

I couldn’t resist fixing the armpit issue. However, I also felt the need to make additional updates so I ended up with this Updated Vector:

PnPman600
Also a png

I adjusted some of the curves, gave him a neck, adjusted the colors, and attached his cape at the shoulders. If you’re interested in using these images, you can find them on GitHub: github.com/thechriskent/PnPMan

PnPManComparison

You can use the SVG image directly in Office programs like PowerPoint and it will keep the scaling values for you and even treat it like a graphics object instead of a picture. There are also generated png files in several sizes available for other programs as needed.

Of course, you can also edit the SVG file directly where you’ll find everything is in layers so you can easily adjust the colors (including skin color), turn off or swap out elements (like the PnP logo), or adapt it to different versions (like a heroine or Stranger Things characters). Feel free to submit a pull request!

These files can be freely used for anything (PnP related or not) with no attribution required. You can also completely ignore this and keep using the old one. This is probably my weirdest and most unasked for “contribution” to SharePoint PnP yet!

 

Thank You SPS New England!

Over the weekend I had the opportunity to speak in Boston at the first annual SharePoint Saturday New England. The entire event was fantastic, I had a really great time and the sentiment from the attendees was very positive.

The organizers even coordinated with the O365 Global Dev Bootcamp to put on an all day SPFx workshop the day before. Bob German and Scot Hillier did a great job introducing everyone to SPFx and all the foundational technologies.

Our Session

Matt Jimison and I presented Getting the Most out of SharePoint Patterns and Practices (PnP). You can find the slides below.

Our goal was to introduce everyone to what’s in PnP (and to get them to use it), teach them how to stay up to date, and to encourage participation (even just documentation updates or submitting bugs).

DocumentationContribution

Nearly everyone in the room had heard of some portion of PnP and there were even those that were using one or more parts. However, there wasn’t anyone that was aware of everything available and it’s always nice to give demos where people are visibly impressed (PnP PowerShell was the big winner this time)!

For no real reason at all we decided to make our slides and session be Stranger Things themed and we even gave away Stranger Things action figures (I’ll miss you my babies). I’m pretty sure we convinced people to use PnP AND to go watch Stranger Things. We’re still waiting for Netflix to send us our royalty check and/or a cease and desist letter.

PnP2StrangerThings

It was a really great event and the organizers should be really proud! If you missed it, they’ve already announced that the next SPS New England will be on October 20, 2018! Thanks to all the sponsors, organizers, speakers, and attendees! See you next year!

Resources

Join us at SharePoint Saturday New England on October 28th!

Matt Jimison and I will be presenting Getting the Most out of SharePoint Patterns and Practices (PnP) on Saturday, October 28th, 201 in Boston as part of SharePoint Saturday New England!

Our session is right after lunch at 12:45 pm and we’ll be talking about SharePoint Patterns and Practices (PnP):

The SharePoint Patterns and Practices (PnP) is an open source initiative coordinated by SharePoint engineering – but what does that mean and why should you care? PnP has tons of tutorials, videos, samples, documentation, and tools (as in amazing, ground-breaking tools). If you haven’t heard of it or if you thought it was just one or two things, you’re doing SharePoint development on hard mode! In this session we’ll dive into what’s available, how to get started, how to stay up to date, and even how to contribute. You’ll leave this session knowing not only what PnP is, but you’ll be ready to start taking advantage immediately! It doesn’t matter if your using On-Premises or Online, you’re sure to learn something new and likely amazing.

SPSNE_ST_Kids

SPS New England is a collaborative effort from the Boston Area, Connecticut, Granite State, and Rhode Island SharePoint Groups. There are a ton of awesome speakers, Chris McNulty will be doing a Microsoft Q&A, and the whole thing is FREE!

Thank You SPS Cincy!

This weekend I had the pleasure of speaking at SharePoint Saturday Cincinnati. It was a really well organized event with speakers coming from as far away as Chicago, Texas, Georgia, Indiana, Canada, and even England. However, it wasn’t just the speakers willing to travel, there were attendees coming from all over Ohio, Indiana, Pennsylvania, and even Tennessee!

BillBaerKeynote
Bill Baer’s Virtual Keynote

Unfortunately, Bill Baer wasn’t able to attend in person (family reasons) but he got up super early and delivered a top notch keynote virtually.

My Session

I presented Getting Started with the SharePoint Framework. You can find the slides below. Here was the outline:

  • Setup Steps 1 & 2
    • Installing NodeJS LTS
    • Installing VS Code
  • SharePoint Development: A Brief History
    • SP 2016 Development Recommendations
    • Office 365 Development Recommendations
  • The Modern Experience
  • Setup Step 3 & 4
    • Installing Yeoman & Gulp
    • Installing the SPFx Generator
  • An Introduction to the SharePoint Framework
    • Client-side Web Parts
    • SPFx Extensions
    • Tool Comparison
    • The SharePoint Workbench
  • Building Your First Client-Side WebPart
    • Running the Generator
    • Trusting the Dev Certificate
    • Exploring the Local Workbench
    • Adding a Custom Property
  • SharePoint Patterns & Practices
    • What’s in PnP (Selective Highlights
    • Staying Up to Date with PnP

If you have any questions about what I presented, or the SharePoint Framework in general, you can comment here or reach out on Twitter anytime. The presentation went over very well and people seemed very excited about using SPFx, whoo whoo!

Resources

You can find my slides here: Getting Started with SPFx – SPSCinci17 (now with embedded fonts!)

Many of these slides are original but several have been adapted from other sources (mostly Ignite).

I had a great time! SPS Cincinnati had great organizers, great sponsors, great speakers, and great attendees! If you missed it, be sure to be on the lookout for it next year.

Join us at Cincinnati SharePoint Saturday on October 14th!

Matt Jimison and I will be presenting Getting Started with the SharePoint Framework (SPFx) on Saturday, October 14th, 2017 in Cincinnati as part of ScarePoint Saturday (SPS Cincinnati)!

SPSCinci17-TitleSlide

Bill Baer will be delivering the keynote: SharePoint, OneDrive, and Digital Transformation – and there are a ton of other great speakers (plus it’s free)!

Our session is at 10:40 and will introduce you to the SharePoint Framework (both web parts and extensions). We’ll actually walk you through getting the various tools installed and ready (bring your laptop) so that by the time you leave you’ll know not only what the SharePoint Framework is, what it can do, and when to use it – you’ll be ready to start experimenting immediately!

SPFx Extensions List Item Clone Demo

I was fortunate enough to present in the PnP Monthly Community Call yesterday. I demoed a sample I contributed to the SharePoint Framework Extensions sample repository called JS-Command-Clone. The sample is a ListView Command Set SPFx Extension that enables the creation of duplicate list items and utilizes PnP JS Core.

Ryan Schouten has provided a great summary and write-up of the full call. You can also watch the recording directly on YouTube. Of course, you can even watch it here where I’ve directly queued up my demo:

Please feel free to reach out to me with any questions or other feedback. Thanks!

Here are some related links: