SPFx

Ramp up on SharePoint Framework Extensions at SPC 2019

theChrisKent Conferences, PnP, SharePoint, SPFx , , , ,

I will be speaking at the SharePoint Conference 2019 in Las Vegas, May 21st-23rd! I’m honored to have the opportunity to talk about two of my favorite SharePoint subjects: List Formatting AND SharePoint Framework (SPFx) Extensions!

I’m, of course, super excited to be able to talk about List Formatting (see my previous post for details about that session). I am a huge proponent of using view and column formatting to customize your modern list views. There’s so much you can accomplish using simple JSON. But, I’m also fully aware of the limitations. When you hit those limitations, that’s the perfect time to use the SharePoint Framework.

SharePoint Framework Extensions allow you to not only customize your fields (Field Customizers) to take them far beyond what Column Formatting can do, they provide extensibility and customization to modern pages using the same awesome tooling and APIs available for client-side web parts.

Need a custom footer or header? SPFx Extension. Need to provide toast notifications? SPFx Extension. Need to add a custom menu option to the action bar or the context menu? SPFx Extension. Need to add your own analytics to every page? SPFx Extension. Need to create custom field renderings that provide interactivity? SPFx Extension.

I love the SharePoint Framework. Client-side web parts are awesome and they get most of the attention (they also came out first) and I’ve created several. But, my favorite part of SPFx are Extensions. They are often easier to create than web parts (depending on how much interface you actually need), and they provide some really awesome deployment models that can really simplify global customizations across your tenant.

Understanding SharePoint Framework (SPFx) Extensions

SharePoint Framework Extensions are the replacement for Custom Actions, JS Link, and more for Modern Pages in Office 365 and SharePoint 2019. Whether you’ve started experimenting with the SharePoint Framework or not, come find out exactly what the Extensions are, when to use them, limitations, and advantages. SharePoint Framework Extensions are not only powerful and flexible tools to customize SharePoint, when it comes to modern pages, they’re the only way.

That’s the overview of my session on SPFx Extensions, but an even simpler description is just: SPFx Extensions 101.

At first glance it might seem strange that I would be presenting a session in the Business Apps track (List Formatting) and then this one within the SharePoint Development track. However, both sessions are about enabling you to customize modern pages.

Modern sites and pages are awesome and if you’re still using on-premises SharePoint 2016 or earlier or if your organization is still using a large number of classic sites, you may not even know just how awesome they are yet (another reason to attend SPC). While so many features that used to require customizations to either provide (or provide a more usable/functional implementation) are available and no longer require custom implementations, there are still cases where some minor tweaks are required. These can be anything from dynamic visualizations, to corporate logos and universal links on every page, to 3rd party integrations, to disclaimers for specific site classifications, and more.

Knowing when to use List Formatting vs SPFx Extensions and understanding what both are intended for is a key skill for not just developers, but power users, managers, architects, admins, and more. Both sessions can be attended independently, but I highly encourage you to attend both as they will work together to create a much fuller picture of modern site customization options and techniques.

SharePoint Framework extensions are available in both Office 365 and SharePoint 2019. If you are on either environment or suspect that you will be eventually, this will be an essential session to understand what can be accomplished and the tools needed to do so. This session will serve as both a comprehensive overview for admins, architects, and admins as well as provide implementation details (code/tooling/samples) for developers. I’m really looking forward to this session and hope you’ll join me!

If you still have questions or ideas, I’ll also be helping with the Patterns and Practices (PnP) booth and will be happy to talk with you further! Just come find me. We can just talk, or you can bring your laptop and we’ll take a look at your code together!

Register!

The SharePoint Conference 2018 was fantastic. It’s amazing to be in the presence of so many SharePoint (and related tech like PowerApps, Flow, OneDrive, Yammer, Teams, and more) experts and have them be so approachable. If you are a SharePoint professional (user, admin, manager, developer, etc.) then you should definitely attend SharePoint Conference 2019. Go ahead and register now. You can even save $50 by using the discount code KENT!

See and hear from the experts directly!

Whether you attend my sessions or not, I hope you’ll come and say hello. In the meantime, feel free to reach out on this blog, twitter, or attend one of the PnP Calls!

Thank you SPS Charlotte!

theChrisKent Column Formatting, SharePoint, SharePoint Saturday, SPFx, Web Parts , , , , , ,

This past weekend I was pleased to speak at SharePoint Saturday Charlotte. It was an awesome time and is one of the best SPS events out there. I had a great time presenting both Getting Started with the SharePoint Framework (SPFx) and Office 365 List Formatting (Slides can be found below).

DkWaC6QXsAY2qD8
Photo courtesy of John Warner (@kingfumaster)

Both sessions were full of people asking great questions and actively participating. Presenting at these events can be a lot of work and requires not just the travel and the weekend time, but often many many hours of prep. Unfortunately, not every event feels worth it, but the attendees at SPS Charlotte were genuinely interested and engaged and I felt like I was able to both teach and encourage them to do awesome stuff.

Having spoken to several attendees (of not just my sessions) the overall sentiment was very positive. I wasn’t the only one amazed that these SharePoint Saturdays are FREE. The quality of speakers, sponsors, and attendees all put together by fantastic organizers is super impressive. If you missed it this year, be sure to correct that mistake next August!

P.S. – Charlotte has public electric scooters that are super cheap to ride. I rode all over downtown after the event and even went 4 miles on one the next day on my way to the airport. Even if you don’t use SharePoint, you gotta get to Charlotte just to feel the wind in your hair, the jealous stares of the walking pedestrians, and the unbridled feeling of freedom while traveling at 8 mph on a lime green scooter.

Resources

Join me at SharePoint Saturday Charlotte on August 11th!

theChrisKent SharePoint, SharePoint Saturday , , , , ,

I will be presenting Getting Started with the SharePoint Framework (SPFx) and O365 List Formatting on Saturday, August 11th 2018 in Charlotte as part of SPSCLT!

SPSCLTvan

Last year’s event was awesome! Don’t miss this opportunity for free training with keynotes by Bill Baer, Brian Alderman, AND Naomi Moneypenny (Not to mention all the other great speakers)!

I’ll be presenting Getting Started with the SharePoint Framework (SPFx) at 10 am. This session will provide an overview of all your customization options and focus on where the SharePoint Framework fits in that ecosystem. You’ll leave this session knowing what the SharePoint Framework is, what it can do, when to use it, and how to get there. I’ll also provide you a bunch of tips and tricks to get you going right away.

Then I’ll be presenting O365 List Formatting at 11:15 am. We’ll cover Column Formatting and take a look at the soon to be released View formatting. We’ll talk about both the power and flexibility of this approach along with some of the limitations. I’ll share the basics of list formatting, tips and tricks, and tools and resources available to enable you to get started immediately (including a demo of Column Formatter 2.0).

I’m really excited to return to SPS Charlotte. Great attendees, great speakers, and great SWAG all at a FREE event – don’t miss it!

What’s new in Column Formatter 1.2?

theChrisKent Column Formatting, SharePoint, SPFx , , , , , ,
Applies to: Office 365

Column Formatter 1.2 is now available! Column Formatter is the Easy editor for modern listview Column Formatting. It is a free webpart available from SharePoint PnP that brings the full power of VS Code editing while providing easy to use templates and browsers all within the browser – and now it’s even better!

Quick start

What’s new

Editor properties

Layout options

A height property was added in 1.1, and with 1.2 Column Formatter now supports full-width sections. With these changes you can dramatically increase the size of the editor on your page:

FullCanvasish

Line Numbers

You can optionally enable line numbers in the editor. This is especially helpful when working with longer formats:

PropertyLineNumbers

Indent Guides

The editor has always had indent guides on by default, but now you can disable them if you prefer a “cleaner” code surface:

PropertyIndentGuides

Mini Map

You can optionally enable the Mini Map navigation/preview in the editor. This is especially helpful for quickly scrolling through long formats:

MiniMap

Site column saving/loading

In addition to downloading, copying to the clipboard, saving to a document library, and applying directly to a list field, you can now save your format at the Site Column level. You can even have those changes pushed to all lists that are using your column!

ApplyToSiteColumn

You can, of course, also load site column formats as needed.

Wizards

With v1.2, Column Formatter now has 14 wizards/templates covering every column type:

WizardCoverage

New wizard: Donut

The new Donut wizard for number columns allows you to create dynamic donut or pie charts:

WizardDonut_Display

You can provide a custom range, size, colors, value display, and more.

This wizard is adapted from the number-piechart sample by Aaron Miao.

New wizard: Start Flow

The new Start Flow wizard makes it easy to create an inline button to launch a flow for a selected item:

WizardStartFlow_Options

Just provide the Flow id and then quickly customize the look and feel to make launching flows even easier for users.

This wizard is adapted from the generic-start-flow sample by Yannick Borghmans.

New template: Overdue Task

The new template Overdue Task takes the concept of highlighting a due date when it’s past due and demonstrates how to add an additional condition based on another column. In this case, the due date will only be highlighted if it’s both past due AND the status column isn’t Complete:

WizardOverdueTask

New wizard: Twitter Pic

The new wizard Twitter Pic makes displaying Twitter profile pictures super easy:

WizardTwitterPic_Options

Now it’s even easier to go bug Marc or write a Dear Vesa style tweet!

Localization

Column Formatter is now more accessible than ever!

Thanks to PooLP, Column Formatter is available in French. Magnifique!

French

Also, thanks to Thomas Goelles, we’ve got German as well. Glücksschweine!

German

Everything else

  • Theme options have moved to the property pane to clean up the editor and to ensure preferences are saved as expected.
  • Each wizard has it’s own documentation page.
  • In fact, there’s quite a bit more documentation in general.
  • New wizard controls made for reuse:
    • Standard colors dropdown (UI Fabric colors)
    • Icons dropdown (UI Fabric icons)
    • Spin button with suffix
  • Updated solution to use SPFx 1.4.1 and PnPJS
  • Several minor bugs were murdered
  • The Mini Map wizard was renamed to Tiny Map to avoid confusion with the new editor feature

Conclusion

If you’re interested in contributing, please do! If you find any bugs or have ideas or are lonely or have questions or whatever, please post in the Issues list – it is greatly appreciated!

Let me know what you think, thanks!

Thank you North American Collaboration Summit 2018!

theChrisKent Column Formatting, PnP, Powershell, SharePoint, SPFx , , , , , ,

Over the weekend I was able to attend and speak at the North American Collaboration Summit (Sharepointalooza) in Branson, Missouri. It was an extremely well run and attended event. It’s unbelievable to me that attendees were only paying $65 for content and experience that would cost $1500-2000+ elsewhere!

I spoke on Understanding SharePoint Patterns and Practices (PnP). I love this topic because it allows me to show off amazing stuff that always has immediate “Monday” value. People always leave this session with at least one or two things they’ll start using as soon as they get back to work. SharePoint PnP is awesome but it can be difficult to know about everything that is available.

I was able to demo:

  • SharePoint PnP PowerShell
  • Remote Provisioning
  • Site Designs with Remote Provisioning
  • PnPJS
  • Column Formatter

I even demonstrated how to do the simplest (but still very much appreciated) contribution by live fixing documentation!

Thanks to everyone who attended. I got a lot of great questions and once again people were really impressed with what PnP has to offer! Awesome event, awesome sponsors, awesome speakers, and awesome attendees!

Resources

 

Column Formatting Client-Side Web Part: Column Formatter

theChrisKent SharePoint, SPFx, Web Parts , , , , , , ,
Applies To: Office 365

Update

This solution is now officially a part of SharePoint PnP! Please use this repo for all updates, issues, contributions, and more. Whoo Whoo!

Modern listviews support the addition of custom formatting for most field types. This is an awesome feature designed to make custom formatting simpler and less administratively difficult than packaged solutions.

Unfortunately, the tooling is still very minimal. Users are given a simple text field within a panel to paste the JSON code and a preview and save button. The panel is clearly not designed to enable editing meaning that not only do users have to write code, they have to find someplace to do it.

The official suggestion is to use VS Code which will provide some auto completion using the standard schema. However, there are several downsides to this approach:

  • Requires a desktop client to be installed
    • Non developers that may have hung on past the initial mention of JSON are mostly gone by now
  • Once you do get VS Code up and running and begin editing your JSON:
    • The intellisense and syntax checking are very limited
    • There is no preview of your format
    • While some examples exist, there’s still a huge learning curve

I previously released a verbose schema which makes editing in VS Code a lot easier, but still doesn’t solve the preview problems, learning curve, or the need to use a tool outside of O365.

Column Formatter

ColumnFormattingChristmas4

Column Formatter is a SharePoint Framework client-side webpart I’ve created using React and Redux. It’s designed to give the full power of VS Code editing while providing easy to use templates and wizards all within the browser! The goal is to make writing and applying Column Formatting easier and quicker for both developers and end users.

Development Details

I originally set out to make an Application Customizer SPFx extension that would sit directly on the modern listview page. Unfortunately, there aren’t APIs available (at least that I could find) to load the CustomFormatter library on the page if none of the columns are using it yet, nor a way to trigger applying the formatting to the listview without actually changing the field’s CustomFormat value.

So I’ve extracted the CustomFormatter library into my project and am faking it by providing it only the dependencies it actually needs. While this gives me full control to enable “as you type” live preview of rendering, it also means that things could get out of sync with O365 development. For now, I’ll do my best to keep things updated but ultimately I’d like to be able to load the office CustomFormatter module on demand.

Similarly, I had to extract the styles of the modern listview and the unique classes for CustomFormatter.

The editor is a custom build of the Monaco Editor (the editor that powers VS Code). Getting this built as a module that worked in SPFx was a real challenge, but worth it because of the immense power it adds.

This was my first experience with Redux. It was hard to wrap my head around at first and there is a significant amount of boilerplate code required (largely to play nice with Typescript), but I wouldn’t do any React webpart of even minor complexity without it! It simplifies state management and makes additional iterations of features much easier.

What’s next

There are a few templates and wizards included currently, but there are way more that could be added. I plan to keep adding these and am open to both pull requests and suggestions.

DataBarsWizard
Wizards make it easy to generate Column Formatting without writing any code

TrendingTemplate
Templates provide you with starter code and sample data

I have submitted this webpart as an entry in the Hack Productivity 3 hackathon (Go vote for it, please!) which is why it’s currently hosted on my github. I’d like to get it included in SharePoint PnP if they’re open to it, although I’m not sure where it should go just yet.

More Information

You can find a lot more details about features and how to use Column Formatter in the ReadMe in the repo. I also created a demonstration video that covers a lot of the features:

Thank you SPS Detroit!

theChrisKent SharePoint, SharePoint Saturday, SPFx , , , ,

Over the weekend I had the honor of speaking at SharePoint Saturday Detroit. It was a well organized and well attended event. I had a great time and the feedback I got from attendees was extremely positive.

The event was held at Wayne State and the campus was covered in squirrels. Including totally black squirrels which I’d never seen (and assumed were rats at first) so of course I took a video:

Here’s a picture somebody else took:

A1FN14 / Black Squirrel
SQUIRREL!

SharePoint is cool and all, but those squirrels were great!

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. It was really tough to fit everything above into a 45 minute session so although it was a bit rushed, I think it went over pretty well and people seemed genuinely excited to get started with SPFx!

Resources

SPS Detroit was a great event. Thank you to all the sponsors, organizers, speakers, attendees, and squirrels!

Join us at SharePoint Saturday Detroit on December 2nd!

theChrisKent SharePoint, SharePoint Saturday, SPFx , ,

Matt Jimison and I will be presenting Getting Started with the SharePoint Framework (SPFx) on Saturday, December 2nd, 2017 in Detroit as part of SharePoint Saturday Detroit!

Our session is at 1:30 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!

Utilizing SPFx serveConfigurations

theChrisKent SharePoint, SPFx , , , , ,

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!

Thank You SPS Cincy!

theChrisKent SharePoint, SharePoint Saturday, SPFx , , , ,

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.