SPFx Command Set Dialogs without DOM Manipulation using hTWOo React

htwoo-dialogs-command.png Preview Image

In my last post I announced the implementation of the native html dialog element in hTWOo-Core and the corresponding component in the hTWOo-React library. hTWOo is a pure html and css implementation of Microsoft Fluent Design. hTWOo-React is a ReactJS wrapper for hTWOo-Core. This post started with a question posted in sp-dev-docs that Stefan Bauer pointed out to me. It’s a really good question and I felt like others might benefit. [Read More]

Console Log Better Practices with PnPjs V3

header.png Preview Image

I was recently asked by a conference attendee to help him understand when to use the @pnp/logging package that we ship with PnPjs. This is an excellent question, and I’ve addressed it somewhat before in a previous post called Resolve to Log. All of the guidance I included about the package in that post still applies, however the examples references V2 of the library. To recap there is the ability to create a ConsoleLogger, a FunctionalLogger, or a custom listener class and then register that listener to the PnPjs timeline via the PnPLogging behavior. [Read More]

SharePoint Framework Application Customizer Cross-Site Page Loading

AppCustCrossSite_lg.png Preview Image

I suspect, like Elio Struyf and Velin Georgiev before him, we’re all suffering from PTSD trying to properly load an application customizer into modern pages. It all started with an issue posted in the sp-dev-docs repo that was about partial page load across site collections but devolved into and issue with the OnInit function firing multiple times. Velin’s post describing his solution to the issue starts with a masterful breakdown of the page loading cycle and his need to track page hits. [Read More]

Using CSS Variables to Morph Your SPFx Design at Run Time

CSSVariables_lg.png Preview Image

I learned about CSS Variables from Stefan Bauer and his post CSS Variables support for SPFx projects through spfx-uifabric-themes. In a nutshell, this npm package, which I’ve started using regularly, transforms the current theme colors available to the SPFx web part into variables that can be used within your SCSS/CSS files. This intrigued me as it’s a native browser capability that’s been around since 2015 and because it means that you can affect the styling at run-time vs build-time… which translated means that lots of things you would normally think you’d need script for you can now do with a crafty use of CSS and some variables. [Read More]

Tip: How to use 'npm version' to create a version tag for your source code

TipNavComponent_lg.jpeg Preview Image

I love the new feature I picked up from my friend Stefan Bauer about using npm version to upgrade the version of your SPFx solution. It has made working as an individual and as a team contributor so much easier because it becomes obvious in your repositories history when versions of the project we’re created and by whom. I was struggling though because some of my more complicated projects, although set up the same way, were functioning with the exception that the git tags were not getting being created. [Read More]

Resolve to Log

PnPLogging_lg.png Preview Image

This post has been updated in a more recent post Console Log Better Practices with PnPjs V3. My Sympraxis partner Marc Anderson mentioned that we’ve been talking about PnPJS packages for SharePoint Framework a lot lately and called out that I would be blogging about utilizing the logging package in his post Using PnPJS and Async/Await to Really Simplify Your API Calls. If you haven’t checked it out and aren’t using PnPJS and the Async/Await method instead of Promises in your SharePoint Framework solutions, you should give it a read. [Read More]

SPFx Anchor Tags - Hitting the Target

SPFxAnchorTags_lg.jpeg Preview Image

If you’re developing SharePoint Framework web parts you may have run across an issue whereby your anchor tags will not honor the target=”_blank” attribute allowing you to open a url in a new browser tab. The issue manifests itself only when your goal is to open another SharePoint page from a SharePoint page, i.e. the href is in the SharePoint domain. The reason for this is SharePoint’s built in but rather complex Page Router. [Read More]

Tip: Implementing 'Nav' Office Fabric UI React Component

TipNavComponent_lg.jpeg Preview Image

This post is meant to be a quick supplement to the documentation provided by Microsoft around the Nav component of the Fluent UI. This Nav component gives you a control that you either create URL links or maybe more commonly, support navigation via code. For general links, where the URL is either a route or some other page, the implementation of the INavLinkGroup[] and INavLink is quite straight forward, just provide a Key, Name, and URL with a couple other optional parameters. [Read More]

Creating a property pane for editing items in your SPFx web parts

SPFXPropPane_featured.png Preview Image

It’s a great privilege and great fun to work with the exceptional team at Shire now part of Takeda that’s building a bleeding edge intranet to support their now 24,000 employees and growing. The team is exploring some very new territory and learning a lot along the way. During last weeks webinar, Microsoft’s Mark Kashman promised we’d post some of the lessons learned in the project. It’s my pleasure to share with the greater world a tidbit of that knowledge in the form of how to create a property pane for an individual item, not just the web part using the SharePoint Framework (SPFx). [Read More]

Enter key gone bad

This morning I had an issue trying to implement a Phone Directory on a client’s home page. The UI incorporated a First Name and a Last Name input box and a “Go” button. But as we all know, users like to hit Enter, and we all want to try and support the best user experiences we can. However, SharePoint’s default implementation of the Enter key can sometimes put the page in edit mode… [Read More]