Article
0 comment

PnP SPFx generator 1.6 released – A release to make your developer and team leads life easier

Without a doubt, the SharePoint Framework is one of the most successful adoptions and customisation models that has ever found its way into SharePoint, and there are reasons for this.

Over the past years, I talked and worked together with many developers that haven’t ever touched SharePoint before or found its way into this Application.

Many of those had a background in C# while, especially for a branding project, was more living in the web world. The overall feedback was that it is this kind of development unique in many ways.

[Read more]

Article
0 comment

PnP/SPFx 1.6.0-beta1 published – StyleLint, Webpack Bundle Analyzer, Jest Testing and more

Today I published the first beta version of the upcoming PnP/SFPx version 1.6.0. It is the most significant releases since the launch of the Angular Elements support for SPFx.

@pnp/spfx-beta1

Instead of adding new frameworks at the moment this release focuses more on your development workflow. There are updates included that helps you to write cleaner code, reduce bundle sizes and last but not least helps you on testing your ReactJS projects.

[Read more]

Article
0 comment

Kick-start SPFx build chain on any file change

Whenever you save a TypeScript file in your SPFx project, the build chain creates a new build and refreshes the local workbench automatically.

There are some situations you like to have this support for other asset or frameworks too. In most cases with the PnP/SPFx generator, we need to force a build when a Handlebar or VueJS file get saved.

So the goal is to hijack the build process and add some custom file watch based on the requirement of the framework or file. Why file? Imagine you have an SVG file in your solution. The expected outcome is that you see the changes immediately in your browser.

The key word to this is watch. It requires a custom file extension watch that than trigger the build.

[Read more]

Article
0 comment

PnP/SPFx Version 1.3.0 released – Check your project version on the fly

Right before the launch of the first version of PnP/SPFx I had a longer chat with a friend of mine Thomas Goelles, and he pointed out that it is great to be able to re-run the generator to add more web parts using a specific version of a framework. There was one fact that we haven’t thought about or maybe overlooked. What happens when the current project setup does not support the required version yet?

Evergreen SPFx project - Version 1.3.0 relased

The previous version had merely a blocking mechanism implemented that checked if the current project was created using version 1.6.

[Read more]

Article
0 comment

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
0 comment

A bash on Windows and the new SharePoint Framework

a-bash-on-windows

You might have heard the Unix Bash Shell is now coming to Windows. To be more specific a whole Linux sub system based on the Ubuntu distribution comes to Windows. This addition to Windows was announce at this years Build Conference and I knew exactly how this would match to my clients and other people in the SharePoint Community. Especially with the new SharePoint Framework you should know this option because it makes many things easier using NodeJS on Windows.

[Read more]

Article
0 comment

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:

Article
0 comment

The not so responsive new Office 365 suite bar

Many people recently discovered a new enhancement in Office 365 and especially SharePoint. The suite bar is now responsive if “First Release” option on your tenant is activated.

Responsive Office 365 suite bar rendered on mobile device

Responsive Office 365 suite bar rendered on mobile device

The first people that blogged about this responsive improvement were Wesley Hackett and Marc D. Anderson.
The current implementation works well on desktop but not on mobile devices.

Why it doesn’t make your Office 365 / SharePoint responsive?

Actually the current suite bar lacks of one important thing. The viewport meta tag is currently not implemented in SharePoint or Delve. This tag is responsible to render the page correctly. The display of modern devices has a higher pixel density than the normal desktop computer. The viewport meta tag helps the browser to scale web sites properly. Is this html tag missing in the header of the html document the website will be rendered as a desktop version, but everything is tiny and unreadable unless you pinch and zoom.
If you have a new Lumia 950 for example the pixel density is 314 pixels per inch. Desktop monitor in reality has pixel densities beyond 72 pixels per inch but thus the actual base size your browser renders the web site. All CSS values are calculated based on this.

On mobile devices without a proper viewport meta tag the web site will look like the desktop version, but really tiny and therefore unusable.
This brings us back to the new shiny responsive suite bar. A good example when a web site wasn’t tested on a real device. Works perfectly on a desktop browser but not on mobile. Someone might have forgotten to include the view port on the master page. On my phone, SharePoint will be rendered like this.

Suite bar rendered on mobile device

Suite bar rendered on mobile device

As mentioned earlier, it is currently only available for first release subscriptions. So currently nothing to worry about. I hope this will be fixed in the final release and we currently see an early beta version of the suite bar.
Where can the problem be spotted. Simply everywhere in Office 365. Here is a detailed list:

  • Missing viewport meta tag
    • SharePoint
    • Delve
  • With viewport but not responsive design
    • Outlook
    • Calendar

Outlook and Calendar use device detection. Some sort of Device channel to work responsive.
The only first an real native responsive apps are currently Sway and blog post on Delve. Both are equipped with a correct viewport.

Final thoughts

The new suite bar gives a nice outlook on coming up design features. I expect to see more improvement in the near future. Currently, SharePoint in Office 365 and SharePoint 2016 is built upon XHTML 1.0 and not HTML 5. Once the doctype have been converted an all functions work on HTML5 I guess we will see more adoptions to come out faster and more reliable.

From my perspective the new suite bar is a fast shot. I also have concerns about the usability. On mobile the waffle aka app launcher is hidden behind the three dots in the suite bar. To switch between SharePoint and Mail or Calendar users have to tap twice. This forces to learn user a new behavior because the app launcher was one of the essential improvements recently.
On the tablet devices the app launcher is jumping from left to right. This is actually a no-go. User will get confused. A small resize of the window is enough to show this effect. You don’t even have to be on a tablet device.

If you think about to change the master page of SharePoint to make this work. In Office 365 editing the master page is not recommended to do so. I guess this issue will be fixed by Microsoft sooner or later.
In case of a publishing page SEO meta tag injection can be use to add a proper meta tag. For a javascript based solution to add the viewport meta check out the solution provided on OfficeDev Pattern & Practices.

If you have other concerns, feel free to comment on this blog post.