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

Smart stupid web parts with SharePoint Framework – Part 1

When you write a new web part with the SharePoint Framework you might create a genius web part, where all the business logic is compiled into your web part. This approach makes sense when the web part is an isolated piece of work.

Image with text saying Smart stupid web parts with SharePoint Framework

Sometimes you like to write pretty simple web parts that only access a backend or third-party API from somewhere on the Interweb. In this case, you can write all the data access inside your web part. Give the user the option to store APP Key, APP Secret and particular access token directly in the web part. Might pre-populate some of those properties of with your company-wide secrets and API keys too.

[Read more]

Article
0 comment

Communication Sites: Workaround for missing page layout option

Microsoft recently released the new Communication Site template. It is a great first look into a new way to publish web content in SharePoint only.
Sadly some important features are missing yet in the first version of this new site template. One of such things is the creation of new content pages based on templates.
When you like to create two pages that should look identical, but with different content, all web parts need to be placed in the same order as you have added them previously.
Luckily there is a workaround to the missing page layouts.

[Read more]

Article
0 comment

Alternative to innerHTML in SharePoint Framework web parts

When you create a new project without any framework, the default web part content in the code will be added through innerHTML.
Technically there is nothing wrong with this approach, but you might run into a problem when you add more content to the web part afterward using the same method. In this case, the previously added content will be overwritten.


To avoid this behavior, you can use jQuery and the ‘append‘ or ‘prepend‘ methods to add your content. It works well but requires an external library.
Instead of using jQuery, there is a native method in the document object model of HTML available.

[Read more]

Article
0 comment

Use custom gulp tasks in the new SharePoint Framework

This was actually the first question I asked after the new framework has been released. Since then there has been an ongoing discussion on that issue.
When you created a new project using a yeoman generator you’d expect a proper gulp/grunt/whatsoever file that list all the task required to build and develop the project.
When you open the gulp file of the new SharePoint Framework you see just the following lines of code.

The rest of the SharePoint framework is well hidden and deeply nested inside the node_modules folders. Theoretically, you can whatever you like in this folder, but your changes will get lost whenever fresh version will be checkout out form the source control and/or npm install will be exited, upgrade your project to the newest drop of the SharePoint Framework or install an updated version of any package. The node_modules folder is the _layouts folder of the new SharePoint Framework but you can be sure that files in there will be always replaced.
My mate Waldek wrote a great blog post on how to extend the SharePoint Framework with a custom build task.
I think his article is suitable for a deep integration in the SharePoint Framework. From my point of view, it solves a problem that exists because of the Framework.
I working with yeoman generators for more than two years now and I’ve never seen a gulp implementation that only contains of a simple function call. The new SharePoint Framework follows in this case a pretty uncommon approach. I was clueless for a while.
In SPFX everything is built on gulp and it turn’s out that adding a custom gulp task is much simpler than I have expected. However, sometimes it is hard to see the forest for the trees.
Let me explain how to accomplish the same thing Waldek describe just by standard gulp methods but first let me explain some basics.

[Read more]

Article
0 comment

Remove empty dlls from Sandbox Solutions

On July 29 Microsoft announced that they will completely remove of code-base sandboxed solution support in Office 365.
The main problem is that many of those SharePoint solutions just deploy XML based artifacts but no binary code.
Nevertheless I think many of those sandbox solutions deploy an empty dll to Office 365 especially when they are developed in Visual Studio.
This unwanted dll can be simply avoided directly through the correct configuration of your Visual Studio.

[Read more]

Article
0 comment

Web Components: A look into the future of web development and maybe SharePoint

Let’s take a look in the future of web development and the upcoming new web standard called web components. In the future everybody can introduce, enhance the document object model through custom elements or change the behavior of existing HTML elements.
Let me give you a brief overview what the actual ingredients of web components are and how this will improve how you write your code in the future. You will also find some wild guesses on the new SharePoint Framework.
[Read more]

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.