Year: 2017

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!

A Verbose Schema for SharePoint Column Formatting (Proposal)

theChrisKent Branding, Column Formatting, List/Library Settings, SharePoint , , , , , ,

Declarative customization through Column Formatting in SharePoint Online is a really cool new way to customize how fields in lists and libraries are displayed. It’s all done through JSON and it’s pretty awesome.

I think there are a few minor areas it’s currently falling short, however. Such as:

Unfortunately, although there is an open source repo of great samples, Column Formatting itself is not something we can directly contribute to (outside of issues and user voice like the above). But, I had another issue that I really wanted solved so I solved it (at least for me) and thought I’d share and suggest it (or some version of it) should be adopted officially.

While a UI for generating the JSON would be awesome, the alternative suggestion of writing your column formatter in VS Code using the schema.json is a good one. However, I really wanted better intellisense to help me track down what I can and can’t do. So, I added a bunch of stuff to the schema.json file to do exactly that.

A Verbose Schema

Using my version of the columnFormattingSchema.json (currently available as a gist), you get fancy stuff like this:

VerboseColumnFormatting

Here’s what’s in here compared to the original:

  • Valid operations toLocalString(), toLocaleDateString(), and toLocaleTimeString() are no longer marked as invalid (added them to the operator enum)
  • The style property now only allows values corresponding to supported style attributes
    • Additionally, each style property has enum values corresponding to possible values
  • Valid attributes iconName, rel, and title are no longer marked as invalid
  • class attribute provides enum values (using the predefined classes)
  • target attribute provides enum values
  • role attribute provides enum values
  • rel attribute provides enum values
  • iconName attribute provides enum values
  • Most properties (like txtContent and operators) provide special string enums (@currentField, @me, @now, etc.)

It’s important to note that every value can still be an expression and even where enums are provided for convenience (like class or txtContent), you can still supply a string not in the list.

Using the Schema

When you apply column formatting the JSON is validated, but the actual schema isn’t really restricted like you might expect (this is why you could previously specify an iconName property without issue even though it was technically invalid). This also means that using the Verbose schema won’t cause any problems for you (I’ve actually tested it against every sample available to me) and is actually much more likely to prevent you from getting multiple console error messages about unsupported style attributes, etc.

For now, you can just save the file to your machine and use a local reference (as shown in the image above) or, even better, you can reference it directly from the gist (raw) like this:

{
    "$schema": "https://gist.githubusercontent.com/thechriskent/2e09be14a4b491cfae256220cfca6310/raw/eb9f675bf523208eb840c462d4f716fa92ce14c2/columnFormattingSchema.json"
}

Now, as long as you save that file with a .json extension, VS Code will automatically add the intellisense and extra validation!

You don’t even need to remove the $schema property (you can even leave it out, it is not currently used by SharePoint at all).

Also, for anyone that is wondering what the column formatter shown in the animation above looks like, here it is for a Person field:

Final
My name is red since I’m the logged in user

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!

The PnP Super Hero we “Need”

theChrisKent PnP, SharePoint , , , ,

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!

theChrisKent PnP, SharePoint, SharePoint Saturday , , ,

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!

theChrisKent PnP, SharePoint, SharePoint Saturday , , ,

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!

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.

Join us at Cincinnati SharePoint Saturday on October 14th!

theChrisKent SharePoint, SharePoint Saturday, SPFx , , , ,

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!