Article
1. October 2018
0 comment
by Stefan Bauer

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.

[Read more]

Article
17. September 2018
0 comment
by Stefan Bauer

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.

[Read more]

Article
20. December 2017
3 comments
by Stefan Bauer

How to use Bootstrap in SharePoint Framework projects

Many developers in the past have use Frameworks such as Bootstrap or Zurb’s Foundation, and from a pure developer perspective, it is clear why to use them. There is yet Office UI Fabric around, but with every new framework, you need to learn those frameworks specifics.

Because it is and was so famous for the use of SharePoint web parts you might like to update some of your existing web parts to the modern experience. Whatever the reason is might by you use it; there are some things to know before such framework can be embedded safely in SharePoint Framework projects.

[Read more]

Article
11. December 2017
0 comment
by Stefan Bauer

How to make your web parts responsive to the parent container

The modern experience is responsive by default, but it doesn’t mean that your web part will be. Especially with the new team sites and communication sites, the behaviour of web parts is as tricky as it ever was. Office UI Fabric doesn’t help you to achieve a significant user experience because it is out of their scope and offers only smaller components or full-page scoped methods, but nothing in between as needed as in web parts.

The surrounding design of a web part, for example, is defined by Office UI Fabric and even the grid system is provided by that toolkit.
When you write a web part, you might worry more about how the same web part behaves in different containers already defined by the overall page design in SharePoint.

Time to show you a trick how this container pages optimisation is possible in the SharePoint Framework and show the basics.

[Read more]

Article
14. December 2016
4 comments
by Stefan Bauer

How to handle automatic CSS class renaming in SPFx

The new SharePoint Framework has a safety net when you develop and style your components. Whenever you write a new style sheet class this will be picked up by a SASS preprocessor that first compiles the SASS file and then applies a special random string to the class name.
This should theoretically avoid that two web parts have conflicting style sheet classes. If one web part uses the style sheet class ‘item’ and another web part uses the same class name. The last web part embedded on the page will win the battle how the item should look like. Through this renaming you make sure that every web part has an individual definition of the item. In general this is a good behavior.
On the other hand, you have frameworks or Office UI Fabric where those classes won’t be renamed.
There are also some negative impacts caused by that method and there is also an easy way to disable this renaming of style sheet classes. If you do so, then you need to be aware of certain things on how to make your styles available exclusively just for your web part.

[Read more]

Article
17. May 2016
5 comments
by Stefan Bauer

Style Guide generator for SharePoint and Office 365 Development released

We are currently at the dawn of a new age in web development. Future web developments will be based on components not on frameworks anymore. While the browser support for web components lacks in Microsoft Edge, Firefox or Safari. We can already start to think differently when we develop any solution for the web.
To add my part to build new web applications and web design based on components I created a style guide application for SharePoint and Office 365. Also can share with you links where you can buy Mac Office, if you’re a fan of Apple (saveonit.com, etc).

[Read more]

Article
25. April 2016
0 comment
by Stefan Bauer

PNP Web Cast on Office Quick Contact Sample is now live

Last week the great opportunity to record a pattern and practices web cast together with Vesa Juvonen and Waldek Mastykarz on our Office Quick Contact Sample. Check out the official announcement post on the Office Pattern and Practices Blog.

The presentation can be found on the Office Pattern and Practices.

Additional resources: