In this article you learn how to leverage the recently lauched hTWOo in an SharePoint Franemwork ReactJS web part.
this.domElement is your new document object in SPFx web parts development
You are familiar with the JavaScript method like ‘document.getElementByID’. Since HTML5 the Document Object Model has more to offer than return an element by its ID on a document.
I case of web part development you should forget that the document object inside and HTML exists instead you should request HTML elements differently.
PnP/SPFx 1.4.0 – Angular Elements and SPFx is here
It’s been a while since Rob Wormald from Google introduced the first web part using Angular Elements. Last week a new version 1.4.0 of the PnP SPFx Yeoman generator was released.
How to copy files from src to lib folder in SPFx?
Sometimes there is the requirement to move files from your source code directory to the lib folder. These files can be images, JSON files or any imaginable asset that is not recognised by the build chain of SPFx.
There are two ways to achieve this one. One used gulp the other gets accomplished through the configuration of a copy-static-assets.json
. Let me explain these to methods what scenarios suites best in which case.
New extension to SPFx for VueJS: PnP/SPFx generator v1.2.0
I firmly believe that the Yeoman generator provided by Microsoft is a great tool. It serves all the capabilities to create new web parts, extensions and customisations in the future. With the current support of ReactJS, Knockout and bare-bone HTML version, you have three great possibilities.
This PnP/SPFx generator project goes beyond these possibilities and supports enhanced functionalities. A way to add additional capabilities in the future not even for new frameworks and libraries on the market. It also helps organisations to defined their development standards.
5 facts every SharePoint developer should know on the new PNP/SPFx 1.1.0 release
Time is running fast. It is more than a week ago since the first release of the Pattern and Practices open source community generator was released. After one week we already have a new release ready for you that makes it even easier for you to get started your development.
Here are five things that make your life easier.
The Community SPFx generator – The ideas, the patterns and possibilities
I am pretty excited that finally the first version of the open source community driven SPFx generator has been released last Thursday and publicly announced and is part of the SharePoint / Office 365 Pattern and Practices Personally, for me, it was a great journey to bring this to life in collaboration with Microsoft engineering.
It was a longer journey than expected but there were some considerations and decisions to make to have a solid fundament for future improvements and to allow fast and easy integrations.
Custom SPFx generator: Make Yarn your default package manager
The most straightforward example to make you familiar with how to create a custom SPFx Yeoman generator is to use Yarn instead of NPM as your default package manager. The approach to change the default package manager is simple, and many people already use it as there default package managing solution.
So, instead of adding the ‘–skip-install’ option whenever you start a new project just add this option to a generator.
The first step is, as always, to create a new NPM package.
Major CSS Class changes in Communication Site and Workbench
Last weekend I had the opportunity to speak at SharePoint Saturday Helsinki organised by Jussi Roine and Jussi Mori. With more than 170 attendees and 20 speakers, it was the best place to be in Helsinki on this Saturday.
While I was checking my demos for my session, I recognised a problem that currently exists on the Online Workbench for SPFx. The demo based on my blog post on how to make your web parts responsive to the parent container. In this blog post, I make use of the Office UI Fabric grid system class names and colour the content of the web part differently according to the parent container. A method beneficial to support the responsive flow of web parts and to improve the user experience.