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:

Join me at Kansas City SharePoint Saturday on September 16th!

I will be presenting 10 Ways SharePoint Online Will Benefit Your Intranet on Saturday, September 16th, 2017 in Kansas City as part of SPS Kansas City!

There are 20 different sessions across 5 tracks presented by some great speakers and MVPs. All of that for the low low price of free!

1400-hero-kansas-city-mo-dusk-city-view-imgcache-rev1394030674270-web-1400-720

My session:

While many companies have already initiated transformation around their products and customers, that same level of transformation is often not happening around employees. Yet increasing employee productivity can come with an enormous ROI, by streamlining collaboration, reducing the amount of time employees search for content, eliminating manual tasks, and creating faster decision-making that leads to more agile employees and companies.

Discover how you can build a Digital Workspace for your employees by utilizing Office 365 and SharePoint Online to take your Intranet to the next level. By moving to the cloud, we’ll cover how your organization can start delivering more value at an even lower cost. Whether you’re considering a full migration to SharePoint Online or looking at a hybrid scenario, this session will help you envision an even more powerful Intranet for your company.

Key Takeaways:

  • Keep your team connected
    • Access your Intranet from any location and any device, with the ability to also include external parties. Keep information at the fingertips of your employees
  • Embrace an Agile Environment
    • Capitalize on regularly scheduled enhancements to the platform, as well as powerful development capabilities, such as the SharePoint Framework, Microsoft Graph API, PowerApps, and Flow
  • Safe and Secure
    • Discover how SharePoint Online meets security and compliance requirements in even the most demanding environments, while also providing a high level of reliability

What are you waiting for? Go get Registered!

SPFx Extension Toastr Notifications Demo

Applies To: SharePoint Framework

I had the honor of taking part in the PnP JS SIG call (Patterns and Practices JavaScript Special Interest Group) earlier today. On the call I was able to demo a sample I contributed for the SharePoint Framework Extensions called jQuery-Application-Toastr.

You can find a great write-up of the call on the Tech Community. You can also just watch the video directly on YouTube. You can even watch it right here, conveniently queued up to my demo, wowee!

Here are some related links:

Scroll SharePoint Search Results Back to the Top on Paging

Applies To: SharePoint 2013+

By default, when you click on a different page using SharePoint’s Search Results web part’s paging links (shown underneath the search results) the next page of results is shown but you remain at the bottom of the page. This is super dumb.

Paging

This is really easy to fix and requires no custom code at all! There is a property (not exposed in the UI for some reason) called ScrollToTopOnRedraw that is False by default.

To apply this setting to your Search Results web part, simply export the web part. You can do this by choosing to Edit the page and choosing Export… in the web part dropdown menu:

ExportWP

Now, open the .webpart file in a text editor like Notepad and do a quick find for ScrollToTopOnRedraw. Then change the value from False to True and save the file:

ScrcollToTopOnRedraw

Now, choose Delete in that same web part dropdown menu on the current Search Results web part. Then click the Add a Web Part button. Choose Upload a Web Part under the list of categories, then click Choose File and pick the .webpart file we saved a minute ago. Finally click the Upload button:

UploadWebPart

You’ll probably be asked if you want to leave the site. It’s safe to choose Leave.

Click the Add a Web Part button again. Choose the Imported Web Parts category and find your newly uploaded Search Results web part and click Add. You’ll likely have to update the Refinement Target for any refinement web parts on the page as well.

Now, when you page results you’ll be taken back to the top of the results each time!

Thank You SPS Charlotte!

This weekend I had the honor of speaking at SharePoint Saturday Charlotte. Great attendance, great speakers, great sponsors, and great organizers! I had a fantastic time and I heard a lot of very positive feedback from attendees. SPSCLT 2017 was a huge success and I’m grateful I got to be a part of it.

SPSCLT17 Speakers
SPS CLT 2017 Speakers at TopGolf

Here’s a video of me hitting a golf ball for maybe the third time in my life. Behold my glory:

My Session

I presented Understanding SharePoint Framework Extensions. You can find the slides and a link to the samples demonstrated below. Here’s the outline:

  • SharePoint Development: A Brief History
  • Modern Pages
  • An Introduction to the SharePoint Framework
    • Client-side Web Parts
    • Tool Comparison
    • The SharePoint Workbench
    • Key npm and Gulp Tasks
    • Hello World Demo
  • SPFx Extensions: Extending Modern Pages
    • Types of SPFx Extensions
    • Current Extension Limitations
    • SPFx Extension Demos
  • SharePoint Patterns & Practices
    • What’s in PnP (Selective Highlights)
    • Staying Up to Date with PnP

Demo Troubles

Prior to SPS I noticed that there were some changes in my developer tenant that required some adjustments of the List Driven Placeholders sample. Specifically, the placeholders seemed to be switching from PageHeader to Top and from PageFooter to Bottom. This was pretty easy to work around, but I reached out via the issues list since I was nervous other changes were on their way.

Vesa reached out immediately and let me know I was “in slightly dangerous waters” and suggested I take screenshots just in case. I followed his advice (glad I did!) and even included his response in the slides as my official disclaimer, haha.

Needless to say, I was a little nervous and checked the demos constantly including 30 minutes before my session. Everything was working! However, during the actual session I received a lot of errors. I remember saying that I thought there might be some errors but that I had expected them on the site not during my gulp serve command. Perhaps I should’ve listened to myself.

Unfortunately, I let confirmation bias and the nerves of speaking overrule my troubleshooting skills. I assumed the dreaded breaking changes had gotten me! In reality, I hadn’t stopped my last gulp serve command from showing the hello world web part. A really simple and (normally) obvious mistake.

Fortunately, I was able to show the screenshots as Vesa had suggested and things worked out fine. I regret that I gave the impression that SPFx Extensions were temporarily broken. I’m also sorry my audience didn’t get to see the samples in their full glory (screenshots work, but aren’t as cool as seeing it actually do the magic).

Resources

You can find my slides here: Understanding SPFx Extensions – SPSCLT17

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

Samples Demoed:

 

Despite my demo hiccup, things still went really well. It was a great day for the SharePoint community and the SPSCLT organizers should be very proud. Thanks Charlotte – see you next year!

Join me at Charlotte SharePoint Saturday on August 26th!

I will be presenting Understanding SharePoint Framework Extensions on Saturday, August 26th, 2017 in Charlotte, NC as part of SPS Charlotte!

I’m sure you’ll all attend just for my session – but stay for everything else. Just look at this lineup!

SPSCLT

Andrew Connell will be delivering the keynote, Where are We and Where are We Going?

My session is at 11:15 am and will focus is on understanding how the SharePoint Framework (SPFx) and the Extensions fit within the historical and modern approaches to SharePoint development. The goal is for attendees to know what SPFx is and when to use it, how the extensions fit in the framework, and to know where to go to get additional details. This session is perfect for power users, managers, and developers new to SPFx.

After my session, stick around for the unofficial “Part 2” at 2:15 pm, Andrew Connell’s Modern UI Extensions with the SharePoint Framework – Command Sets, Application, and Field Customizers where he’ll be providing additional depth, details, and demos.

After attending these 2 sessions you should have everything you need to dive into SPFx extensions just in time for the upcoming Release Candidate 1 and General Availability coming later this year!

Adjusting VS Code Language Associations

Applies To: Visual Studio Code

Have you ever opened a file in VS Code and there was no magic highlighting? Your first response is likely to weep and curse the heavens. Fortunately, the heavens have heard your cries and you can quickly fix things with just a couple of settings tweaks.

PlainText
Plain Text!!? That is clearly the incredibly popular webpart file type!!

This can happen if you decided to use your own proprietary filetype for some standard format (like XML) or more likely you are trying to open someone else’s proprietary filetype for some standard format (like XML).

All you need to do is clue VS Code into how it should treat those types of files. This is done in your user settings. To open your settings just hit Ctrl+[Comma] or you can open them from the File > Preferences > Settings menu option.

The setting we are looking for is files.associations. You can find this by typing it in the Search Settings box. To edit the setting, just click the pencil icon next to it and choose Copy to settings. This will copy the setting over to your user settings file where you can add your values:

SettingCopy

Each association is just a key/value pair. You can have as many of these as you like (just separate them with a comma). The key is a glob pattern that will match on the full filename. If you include a / then it will actually match on the full file path. For simple file extensions matches, just use a wildcard (*) followed by the extension.  Here’s what mine looks like for .webpart files:

association

As soon as you save and go back to your file you’ll see the magic applied:

MagicColors
Wowee! Now I can get back to manually editing exported web parts! yay?

You can read more about how all this works here.

Also, for those that didn’t spot it above, my pretty colors are from the Blackboard theme.