Hi, I'm Elio Struyf — an Solutions Architect passionate about creating innovative solutions and sharing knowledge with the developer community. With expertise in Microsoft 365, Azure, End-to-End testing, and Developer Tooling, and Productivity. I help teams build better software and deliver exceptional results.
WHAT A YEAR! This year was a personal rollercoaster. I would have never thought 2019 would be so hard, fun, crazy, and filled with a lot of life lessons. Show image Rollercoaster What happened in
On SharePoint modern pages, you can set the focal point of the header image. Having this kind of control is excellent for creating compelling pages. Show image Header image with focal point What if you
Version 1.16.0 of the SharePoint Framework React Controls (@pnp/spfx-controls-react) has been released. This is an open source library that shares a set of reusable React controls, which can be used in your SharePoint Framework solutions. This release includes the following changes: Enhancements FilePicker: Fixes for OneDrive CORS issues #407 ListItemPicker: added new control property filter #392 allowing to use context from any type of SPFx
A couple of months ago, I moved a couple of my projects to make use of the library component in SharePoint Framework. The library component allows you to share common logic between your projects. Sharing code through your projects is having many benefits like smaller bundle sizes, more comfortable to fix bugs, no code duplication, … Information: Official documentation of the
Version 1.15.0 of the SharePoint Framework React Controls (@pnp/spfx-controls-react) has been released. This is an open source library that shares a set of reusable React controls, which can be used in your SharePoint Framework solutions. This release includes the following changes: New control(s) FilePicker: New control added to the library #366 GridLayout: New control added to the library #350 Carousel: New control added to the
Once again an article about navigation events. This time it has nothing to do with checks you need to implement to know when or to which page you navigated. This time it is about canceling/aborting API calls which your browser performs while navigating to another page. Most likely you can cancel these calls because they do no longer matter for
SharePoint Framework builds very fast on new projects, but once you start adding more components or functionality, the builds quickly get slower. In our codebase, we tried to split up projects as much as possible, so that fewer components need to be built during your development cycle. As much as it helps with some projects, we still have two slow
Some time ago I wrote about things to check in your SharePoint Framework application customizer for making sure it behaves correctly on navigation events. This included checks to see if you navigated to another page, different hub site and site with another language. In most cases, these are the checks that you want to put in place, to make sure that
One of the things hardest things when creating and maintaining a product is localization. It requires a lot of testing, validation and follow-up. In SharePoint Framework projects it is no different, maybe even a bit harder, as the localization files are created per component. This means that you might have to take care of duplicate localization keys and labels. Back in
After almost three years, I finally made my over to a static site generated by Hugo. From the moment I started blogging in 2010, I used Wordpress. Wordpress was the best option back then. As the hosting company which I used only supported PHP, and I also got into coding by learning PHP when I was a student. Over the years,
It appears that some time ago (weeks/months), the unique ID of a SharePoint homepage is not unique anymore and is shared with other homepages pages in your environment. The problem occurs when creating new SharePoint sites. Once the site has been created, it will most likely share the same ID with a couple of other homepages. Info: This issue let me
When setting up a portal on SharePoint Online these days, you most likely will do it with a hub site driven approach. With hub sites, you have one root site collection, which can be seen as the parent, and all children are associated with it. Show image
Version 1.14.0 of the SharePoint Framework React Controls (@pnp/spfx-controls-react) has been released. This is an open source library that shares a set of reusable React controls, which can be used in your SharePoint Framework solutions. This release includes the following changes: Enhancements German translations added for attachment and RichText controls #333 SecurityTrimmedControl: Added a wrapper className property for the parent element #325 ListPicker: Add ability
Version 1.16.0 of the SharePoint Framework Property Controls (@pnp/spfx-property-controls) has been released. This is an open source library that shares a set of reusable property pane controls, which can be used in your SharePoint Framework solutions. This release includes the following changes: Enhancements PropertyFieldCollectionData: Add the ability for field validation to the custom fields #187 PropertyFieldCollectionData: Ability to provide custom labels for the save
When you need to support multiple languages for your SharePoint Framework solutions. It can be a hassle that you have to maintain each and every localization per component in their related loc folder. Official localization documentation: localize SharePoint Framework client-side web parts. Show image
This will be a quick tip about a styling issue with the application customizers. If you are building application customizers that render something in the available top or bottom zones. It is recommended to add your own font styles. This might sound weird, but when you don’t do this, you might end up with styling differences between your pages. Here is
When building a SharePoint Framework solution which includes application customizers. One of the important things about their functionality is how they behave during navigation events/page transitions. These days in modern SharePoint most of the page transitions are achieved from the client-side, which means that it does not fully reload the page, but only partially. Which is much faster, but can cause
A while ago I wrote an article about how you can quickly test and debug your SharePoint Framework code when it is already deployed on an environment. I use this technique quite a lot as I mostly work with application customizers. Info: Testing and debugging your SPFx solutions in production without causing any impact I use this technique quite a lot as
Version 1.13.2 of the SharePoint Framework React Controls (@pnp/spfx-controls-react) has been released. This is an open source library that shares a set of reusable React controls, which can be used in your SharePoint Framework solutions. This release includes the following changes: Enhancements Improvements to the Lithuanian localization #285 Fixes IFrameDialog: dimensions issue #303 DateTimePicker: IE11 layout issue #301 FileTypeIcon: Only displays PDF’s in SPFx 1.8.2 #300 FieldNameRenderer: Fails
Version 1.15.0 of the SharePoint Framework Property Controls (@pnp/spfx-property-controls) has been released. This is an open source library that shares a set of reusable property pane controls, which can be used in your SharePoint Framework solutions. This release includes the following changes: Enhancements PropertyFieldCollectionData: Add a property to be able to set a custom class on the collection data panel #180 PropertyFieldListPicker: Added listsToExclude
Version 1.13.1 of the SharePoint Framework React Controls (@pnp/spfx-controls-react) has been released. This is an open source library that shares a set of reusable React controls, which can be used in your SharePoint Framework solutions. This release includes the following changes: Fixes WebPartTitle: Fix for className property which is not defined #281 RichText: Fix issue where control turns drop-downs black #279 Contributions This release wouldn’t be
Version 1.13.0 of the SharePoint Framework React Controls (@pnp/spfx-controls-react) has been released. This is an open source library that shares a set of reusable React controls, which can be used in your SharePoint Framework solutions. This release includes the following changes: New control(s) Progress: New control added #230 DateTimePicker: New control added #21 RichText: New control added #20 Enhancements SecurityTrimmedControl: Support for item and folder permission checks
Since the release of SharePoint Framework 1.8.0, you will gain control over which TypeScript version to run in the build process. Until the release of 1.8.0 version, we were always tight to TypeScript version 2.4.2. There was no way to change this, as it was part of the internal SPFx build engine, but this has changed. In SPFx 1.8.0, you can now
A new version of SharePoint Framework was just released and one of the great things is that some of the dependencies were bumped. In version SPFx version 1.8.0, TypeScript was updated to 2.7.2 and React to 16.7.0. The React version is not even so old; it was released in December 2018 and comes with some handy features like lazy loading
When developing solutions with SharePoint Framework it can happen that you need to navigate to another page from code. Normally in JavaScript or TypeScript this is very easy. All you have to do is set the new location like this: location.href = "<your-url>"; When you do this in SharePoint Framework, it has the side effect that it fully reloads the page
Version 1.12.0 of the SharePoint Framework React Controls (@pnp/spfx-controls-react) has been released. This is an open source library that shares a set of reusable React controls, which can be used in your SharePoint Framework solutions. This release includes the following changes: New control(s) ListItemAttachments: New control added #177 IFramePanel: New control added #226 Enhancements Added Russian localization #214 TaxonomyPicker: Ability to specify term actions #237 Fixes TaxonomyPicker: Terms are
Something that is giving me some trouble for a long time is that the SharePoint Framework build process treads warnings as errors in production builds (when the —ship flag is present). Let’s start by giving some background information. During bundling/packaging of your SharePoint Framework solution, you could see two types of messages: Warnings Errors
Version 1.14.1 of the SharePoint Framework Property Controls (@pnp/spfx-property-controls) has been released. This is an open source library that shares a set of reusable property pane controls, which can be used in your SharePoint Framework solutions. This release includes the following changes: Fixes TaxonomyPicker: Terms are sorted incorrectly under the wrong parent #153 EnterpriseTermPicker: Terms are sorted incorrectly under the wrong parent #156 Try it
When building custom gulp tasks in your SharePoint Framework solutions, it might be handy to log as the default build system does. More information about building custom gulp tasks can be found here: Integrate gulp tasks in SharePoint Framework toolchain When you would use the default console.log, console.warn,** **or console.error methods like this: They will just log as follows:
If you are working on a SharePoint Framework solution which has to support multiple languages. You will already know that the localized labels are created in localization (resource) files which are “just” JavaScript files. There is actually nothing wrong with this approach in SharePoint Framework, although you could experience some issues with it. Info: More information about localizing web part contents
Azure Functions are a great and easy way for implementing and automating tasks for your SharePoint Online environment. You could use it for various tasks like implementing scheduled jobs (timer jobs), elevating permissions via an API call to fetch/create data, … Starting to create new Azure Functions is simple with the Azure Functions project template in Visual Studio.
Version 1.14.0 of the SharePoint Framework Property Controls (@pnp/spfx-property-controls) has been released. This is an open source library that shares a set of reusable property pane controls, which can be used in your SharePoint Framework solutions. This release includes the following changes: New control(s) PropertyFieldEnterpriseTermPicker: New control to load term sets by using @pnp/pnpjs #70 #120 Enhancements PropertyFieldCollectionData: Setting to specify if item creation is
Let's build together
Manage content in VS Code
Present from VS Code
