The PnP Super Heroes we “Need”

Back in November, I reworked the PnP Hero as an opensource SVG Vector image making several corrections and ensuring the hero looks good at any size. Then earlier this year, Vesa Juvonen announced he was using this design for some stickers (I’ve since gotten hold of one and they are awesome):

PnPHeroStickers

One of the things that became obvious though was that people would like to see more than just a dude. So… here’s my attempt at a lady:

PnPHero-Female-Original

Don’t like it or think something’s off? Good news! You can totally update it and submit a PR over in the PnPHero-SVG repo on Github!

While I don’t think there’s necessarily anything wrong with the PnP Hero we’ve had (but I wouldn’t would I), I think it’s important to be as inclusive as possible to make it clear that PnP is for everyone. After all, Sharing is Caring.

SharePoint PnP has contributors from all over the world of various gender and ethnicity. So, following the great example of emojis everywhere, in addition to female heroes, the PnP heroes now come in original, light, medium-light, medium, medium-dark, and dark skin tones:

MaleHeros

FemaleHeroes

The repository has a master SVG file with all of the layers, but there are also individual SVG files (as well as png files) for each included. These files can be freely used for anything (PnP related or not) with no attribution required.

This isn’t meant to be political commentary in any way, just an attempt to be more inclusive. Let me know what you think and if there is anything you think should be changed/added.

Use Font Awesome icons in Column Formatting

Applies to: Office 365

I was reading through the issue list on the sp-dev-column-formatting repository and came across a question from Marc Anderson about using icons from external sources – specifically Font Awesome.

The good news is this is totally possible! In fact, I’ve just submitted a sample that addresses Marc’s use case of having a color-coded, custom icon display for a Gender column using Font Awesome icons:

screenshot

The bad news is this isn’t nearly as simple as just specifying the iconName attribute like you do with UI Fabric Icons (but it isn’t that hard either).

The basic idea

One of the awesome things about column formatting is the ability to use an inline SVG element as one of the elmType values. Inside you can add a path element and specify the d attribute.

However, one of the not so awesome things about column formatting is that that is currently about as fancy as you can get with SVGs. The biggest hurdle in this case is the lack of a viewbox attribute. So we’ll have to adjust our icon SVG to not rely on the viewbox for proper scaling and then extract the d attribute for use in our format.

It’s really not as scary as that might have sounded.

Once we have the path instructions for our icon(s) we can use them like any other value with conditional operators and more. In fact, we can even dynamically build those paths if we want to get crazy about it (In fact, this is exactly how the Donut wizard in Column Formatter works).

Get the SVG for an icon

Many icon providers will allow you to download the SVG version of an icon. Both Material icons and Font Awesome allow this and there are many more. You can even mix and match since you aren’t bringing in a dependency on the actual fonts, you’re just using the SVG for individual icons.

For this post, we’ll be using Font Awesome. Here’s how to get an SVG for one of their icons:

  1. From the Font Awesome site, find the icon you want to use in your format and click on it
  2. Click the Download SVG button:
    DownloadSVG
  3. If you haven’t paid for a pro license, you’ll be prompted with an attribution notice. Click Agree & Download the SVG and the file will either open in the browser (in which case, right-click and save) or download directly

Unlike traditional images, you won’t actually upload this file anywhere and you won’t be using it in the src tag of an img element. Instead, we’ll be pulling the instructions directly out of the file (which is actually an XML file).

Format & extract path

Unfortunately, Font Awesome icons rely on a viewbox attribute (like they should) and so they won’t scale properly without some manipulation since we can’t specify the viewbox. We’ll use a free, open-source tool to do this called Inkscape:

  1. Open the icon SVG in Inkscape
  2. We’ll adjust the page size to have the path coordinates drawing at a 1:1 scale instead of relying on the viewbox translation. So choose File > Document Properties to open the Document Properties dialog
  3. Under Custom Size, set the Width and Height both to 13px (or whatever size you are wanting, this is just the default size of icons in column formatting). The Viewbox should also have the same width and height:
    SVGDocumentProperties
  4. Close the Document Properties dialog
  5. That tiny square under your icon is the actual document, so let’s scale down our object to fit. Select the icon object.
  6. In the toolbar, click the lock next to the W (width) property to lock the icon’s ratio:
    LockRatio
  7. Set either the W or the H property (whichever is bigger) to 13
  8. Set both X and Y to 0
  9. You’ll probably want to zoom in now
  10. If it is square, skip to step 12. Otherwise, you’ll want to align the icon either horizontally or vertically as needed. You can do this using the Align and Distribute dialog. Choose Object > Align and Distribute
  11. In the Relative To dropdown select Page then click the Center on vertical axis button if your icon is tall (Y>W) or Center on horizontal axis button if your icon is fat (W>Y):
    AlignAndDistribute
  12. Save your SVG
  13. Open the SVG file in a text editor like VS Code
  14. Scroll down to the only path element (near the bottom) and copy everything in the d attribute:
    ExtractPath

Using the path in a format

Instead of a span with an iconName attribute, you’ll use an svg with a path and a d attribute. A quick example should help clear that up.

Here is a simple format that shows an icon along with the current field’s value. A span with an iconName attribute is used (along with some padding and color) for the icon and then another span to show the field’s text (gist here):

IconFormat

Here’s what that looks like using the fly icon from Font Awesome (gist here):

svgIconFormat

Here’s what’s different:

  • The icon span has been replaced with an svg element
  • We have to specify the height and width since SVG’s have a large default size
  • Instead of the color style attribute, we use fill
  • We add a child element of path and set it’s d attribute to a complicated value (pulled from the icon’s SVG file) instead of a simple icon name

So… not as easy, but this opens up tons of options!

Fortunately, conditionally selecting an icon stays relatively simple since column formatting always allows either an operation or a value. So, where you might have used a conditional statement for the iconName attribute, you can just do the same thing for the d attribute.

Here’s what that looks like in the generic-svgicon-format sample:

ConditionalD

The icons shown here and included in the gist code were adapted from Font Awesome which is available under the Creative Commons Attribution 4.0 International license.

What’s new in Column Formatter 1.2?

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 O365 Seattle!

Last week while attending the MVP Summit, I had the honor of presenting at the O365 Seattle meetup as part of their MVP night.

I presented O365 Column Formatting with Column Formatter. It seemed to resonate well and I think more people with take advantage of both O365 Column Formatting and the PnP Column Formatter.

O365SeattlePresentation
Photo by Tom Resing

There were other great presentations by Kevin Crossman and Seb Levert along with a great Q&A with a full panel of MVPs from across the globe.

MVP Panel
Photo by Tom Resing

It was a fantastic event and I was grateful to be a part of it. My only regret is that I was on an early flight out and had to skip SharePint. Thank you to the organizers, MVPs, and all the attendees!

Resources:

Thank you North American Collaboration Summit 2018!

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

 

Using SharePoint PnP PowerShell Modules Side-by-Side (2013, 2016, & Online)

Applies to SharePoint 2013, 2016, O365

Are you using SharePoint PnP PowerShell yet? Why not!?! Developers, IT Pros, and Power Users can all benefit from the SharePoint PnP PowerShell modules. The cmdlets wrap up a bunch of complex CSOM and REST calls into 280+ awesome commands. If you’re not using SharePoint PnP PowerShell you’re doing things on hard mode.

Installing SharePoint PnP PowerShell is super easy. You just choose your target version (2013, 2016, or Online) and install. If you’re on Windows 10 you can literally type Install-Module SharePointPnPPowerShellOnline into an administrator shell and you’re done.

But what if you’re like me and have multiple versions you need to target? I find myself needing to switch between SharePoint on premises and online all the time. Unfortunately the modules are often not cross-version compatible due to the different CSOM versions supported between the products. Something as simple as Get-PnPFolder against a 2013 site using the Online module won’t work and the errors aren’t always super obvious:

Error

For a while I’ve just used the Uninstall-Module command and just switched between them that way. This has struck me as dumb for a while now so I finally reached out to The Father himself, Erwin van Hunen, and he responded right away:

Tweet

Awesome! Here’s how to do that (with screenshots!):

Install All the Modules

Although you can install all the modules, you can only have 1 active within any given session. So if you want to switch modules (once you’ve already loaded one) you’ll need to close and reopen PowerShell.

Option 1 – SharePoint On-Premises as Default

If you install the modules using the PowerShell Gallery they will be installed into the default modules path. As a result, when you use a PnP PowerShell Command the first module will be auto loaded (but the other 2 won’t because of conflicts). This appears to be alphabetical. So if you installed all 3 then the default module will be 2013. If you want to use the Online module instead, you would simply run Import-Module SharePointPnPPowerShellOnline before running any PnP PowerShell Commands.

You can’t just run the simple install command for each module. You’ll end up with some version of this error on your second module:

ClobberError

You’ll need to use the -AllowClobber parameter:

Install

You can then check what versions you have installed using this command:

Get-Module SharePointPnPPowerShell* -ListAvailable | Select-Object Name,Version | Sort-Object Version -Descending

Now you can use any of the modules without having to uninstall/install first! By default you’ll be using 2013 (or 2016 if you skipped 2013) which may match your use case perfectly! You can always use the Import-Module command to target one of the other versions.

Option 2 – SharePoint Online as Default

To have the Online module be the one that is auto loaded when you use a PnP PowerShell Command but still have the option to load one of the on premises modules, you should only install the Online module through the PowerShell Gallery:

Install-OnlineOnly

You can then check what versions you have installed using this command to ensure you only have the Online module installed here:

Get-Module SharePointPnPPowerShell* -ListAvailable | Select-Object Name,Version | Sort-Object Version -Descending

To install the other module(s) you’ll use the Releases page to download the corresponding msi installers:

Releases

Just run these as normal to get these installed. Once the module(s) are installed, open System Properties from your control panel. Under the Advanced tab, click the Environment Variables… button. Under User variables, find the PSMODULEPATH variable. If the path(s) to the PnP PowerShell modules are the only values you can just delete it. Otherwise, you can edit it to remove those paths:

EnvironmentVariables

Now when you run a PnP PowerShell Command the Online module will be auto loaded (default). If you want to use one of the on premises modules instead, you have to run Import-Module PATHTOMODULE before running any PnP PowerShell Commands.

Unfortunately, the module path can be pretty long. For instance, here’s mine:

Import-Module C:\Users\ckent\AppData\Local\Apps\SharePointPnPPowerShell2013\Modules\SharePointPnPPowerShell2013

That’s not very convenient! Fortunately, the Windows PowerShell ISE provides snippets that can make it much simpler. You can create snippets using the New-IseSnippet command:

New-IseSnippet -Title " PnP2013" -Description "Imports the SharePointPnPPowerShell2013 Module" -Text "Import-Module $env:LOCALAPPDATA\Apps\SharePointPnPPowerShell2013\Modules\SharePointPnPPowerShell2013"

I put a space before the name so it would be at the top of the snippets. You can then access the snippet from either the script editor or the ISE prompt by pressing Ctrl-J:

Snippets

 

Now you can use the Online module by default but quickly load the on premises module as needed without having to uninstall/install all the time!

Thank you SPS St. Louis!

I had the honor of speaking at SharePoint Saturday St. Louis (in fact, I’m writing this from the speaker’s room). It was a great event!

JAZZ

My Sessions

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).

There were some people that had never even heard of PnP and others that were using at least some portion. Everyone was really engaged and we had a lot of great discussion. I love showing off all the cool stuff in PnP and watching people be really amazed about the tools and resources they didn’t even know were available to them.

I also presented Understanding SharePoint Framework Extensions. These slides are also below.

Tons of excitement for SPFx Extensions, although it’s clear that the story of when and where to use these isn’t well known. There were lots of great questions and I even found a way to sneak in a demo of Column Formatter (whoops?).

SPS St. Louis was a really great event and the organizers should be very pleased with how well everything came together. Thanks to all the sponsors, organizers, speakers, and attendees! See you next year!

Resources