Latest SharePoint Framework topics

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. Essentially the OP was stuck on how to use ReactJS in a SharePoint Framework Extension that by default doesn’t give you an option for using a framework. In general for basic scenarios you probably wouldn’t need a framework so I totally understand why that’s the case, however, sometimes you want to do more and so this demo will show you how. [Continue Reading]

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. [Continue Reading]

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. Then, Elio’s variation highlights other things to check like what Hub Site do I belong to and what UI language does this page support and how those things might impact the transition with relation to the application customizer. This post is going to take that one step further and address page transition between sites where one site might include the application customizer and the other might not. This is all in reference to the Multilingual Pages solution that lives in the SP-Dev-Solutions repo. This is a 400 level blog post so I’m not going to reiterate what Velin and Elio already did in their posts. Instead, I encourage you to pause here and go read their posts and then come back to continue on the journey. [Continue Reading]

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. [Continue Reading]

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. It turns out that if your folder structure is more complicated, and your package.json file is in a sub folder below your .git folder the tags won’t get created automatically, although all the other aspects of the solution work fine. [Continue Reading]

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. [Continue Reading]

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. Basically, the Page Router is the mechanism by which pages are rendered in SharePoint. In the most basic terms a component sits between you and a page refresh providing logic to how much and when parts of the page need to be loaded. What that means for you is that when you are trying to load a SharePoint page the router steps in and “decides” how it will be rendered and because of this the target attribute is ignored. [Continue Reading]

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. For programmatic support, the documentation provides a solution but as it turns out that implementation is misleading. I was finding that my nav items that needed to execute a bit of code would sometimes execute that code twice. As it turns out I wasn’t using it right, so let me help clarify by showing you what I found. [Continue Reading]

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). Bob German has also done several blog posts on the lessons learned, you can start reading them at Bob German’s Vantage Point. [Continue Reading]

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… [Continue Reading]