11/08/2018

How to Add Folders and Files into Master Page Gallery on Modern Team Sites

Sometimes, especially when developing custom SharePoint Add-ins, we want to host assets (JavaScript, CSS, etc.) in Master Page Gallery.
This is a pretty standard approach that allows to reference the same resources from sub sites (I know that sub sites are now evil =)) but store everything in one place on root level of the site collection.
Note: it is not necessary to host your assets in Master Page Gallery, it is one of the options. So, take it in mind, that you can use other options as well. But what if we want to use that approach with Modern Team Sites?

10/31/2018

How the versioning works in SharePoint Framework solutions

This post is a sum up of the conversation held in Twitter regarding versioning of your SharePoint Framework solutions.
In package-solution.json file of the SPFx project there is a property version
The description from the currently tells us that:
Optionally, you may also specify a version number in the format "X.X.X.X", which is used to identify various versions of the package when upgrading.

But it doesn't explain what is actually affected by the version update.
So, here is how it actually works:
  • First of all, all the assets (JavaScript files, CSS, images, etc.) are automatically updated as soon as new version has been added to the App Catalog. You don't need to update the app on all of your sites.
  • If you're using Feature Framework and Feature declarations in your solution then these are the resources that need the actual App update.
This situation may lead to confusion but it is what it is.
And actually it makes sense for two reasons:
  1. As an app should be installed to every site (meaning every root site and if needed - every sub site) separately, it's really difficult to go through all the sites and update the app. So, automatic update is a good decision.
  2. Why this "automatic" update isn't applicable to Feature Framework? Because new version of features content (like fields, content types, etc.) could contain breaking changes and it's better to be aware of it. And anyway SharePoint Dev team does not recommend to use Feature Framework in your solutions at all. =)
Here is also a PnP Shorts video that describes how to update the SPFx solution.
Hopefully, this information will be helpful.

Have fun!

9/26/2018

How to: Set List/Document Library View Page as Modern Team Site Welcome Page (Homepage)

When you need to change the Home Page of Modern Team Site in SharePoint Online it's pretty easy to do through UI.
Just go to the Pages library, open context menu for the page you want to make a homepage and select "Make homepage"

But what if the page you want to make a homepage is a Document Library or List View Page that is, obviously, not presented in the Pages library?

9/17/2018

Using Vue.js in SharePoint Framework Applications. Part V: Use React Components inside Vue.js Solution

This is the fifth post about SharePoint Framework and Vue.js. In this post I want to show how to use React components inside Vue.js-based SharePoint Framework solutions.

List of posts:
  1. Whats and Whys
  2. Default SPFx web part using Vue.js
  3. Yeoman generator with Vue support
  4. Web Part Property Pane Control
  5. Use React Components inside Vue.js Solution (this post)
Code: https://github.com/AJIXuMuK/vuejs/tree/master/react-in-vue.

9/06/2018

Using Vue.js in SharePoint Framework Applications. Part IV: Web Part Property Pane Control

This is the fourth post about SharePoint Framework and Vue.js. In this post I want to go through the process of creation custom Property Pane control using Vue.js.

List of posts:
  1. Whats and Whys
  2. Default SPFx web part using Vue.js
  3. Yeoman generator with Vue support
  4. Web Part Property Pane Control (this post)
  5. Use React Components inside Vue.js Solution
Code: https://github.com/AJIXuMuK/vuejs/tree/master/proppane-control.

8/07/2018

Yeoman Generator With Vue Support Update: Extensions Support!

UPDATE: the generator has been included into @pnp/spfx generator. Please use this one for the latest version.

In Using Vue.js in SharePoint Framework Applications. Part III: Yeoman Generator with Vue Support I announced that I've published a Yeoman generator for SharePoint Framework solutions with Vue.js support.
The initial version of the generator supported SPFx web parts only. There was no way to create SPFx extensions using the generator.
Today I happy to announce that Extensions support has been added to the generator!
Now you can select any of the available types of SPFx projects.
NPM package: generator-vuespfx
GitHub repo: https://github.com/AJIXuMuK/generator-vuespfx
Wiki: Wiki

8/03/2018

Term Store and Ampersand (&) Issue

When working with Term Store take into consideration that SharePoint for some reason replaces ampersand character & (code 38) with ampersand character & (code 65286) in the label. The bad thing is that if you create a Term with the name with & you won't be able to change it back from symbol 65286 to symbol 38 as default label of the term can't be modified.
Simple way to play with it:

  1. Create new term "Wood & Fire"
  2. Copy the default label text
  3. Paste the value as string into browser console and run call charCodeAt(5): "Wood & Fire".charCodeAt(5)
  4. The result will be 65286 instead of 38
I tested the behavior on O365, SP 2016 and SP2013 - all the same.

Have fun!