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!
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.
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:
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:
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:
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!
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.
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).
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!
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!
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!
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.
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:
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:
As soon as you save and go back to your file you’ll see the magic applied:
Wowee! Now I can get back to manually editing exported web parts! yay?
The Chris Kent 