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!

7/01/2018

Using Vue.js in SharePoint Framework Applications. Part III: Yeoman Generator with Vue Support

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

This is the third post about SharePoint Framework and Vue.js. In this post I want to announce a Yeoman generator for SPFx web part with Vue.js support.

List of posts:
  1. Whats and Whys
  2. Default SPFx web part using Vue.js
  3. Yeoman generator with Vue support (this post)
  4. Web Part Property Pane Control
  5. Use React Components inside Vue.js Solution

5/16/2018

Using Vue.js in SharePoint Framework Applications. Part II: Default SPFx web part using Vue.js

This is the second post about SharePoint Framework and Vue.js. In this post I'm going to implement basic Client-Side Web Part using Vue.js - basically, "wrap" the markup from Web Part template project with Vue.js component.
List of posts:
  1. Whats and Whys
  2. Default SPFx web part using Vue.js (this post)
  3. Yeoman Generator with Vue Support
  4. Web Part Property Pane Control
  5. Use React Components inside Vue.js Solution

5/05/2018

Thank you SPS Chicago Suburbs!

Hey SPS Chicago Suburbs people!
Thank you so much to all of you!
Thanks to the organizers and the sponsors for making this great event. And for inviting me to speak!
Thanks to all attendees for coming instead of going outside (the weather is really great today)!
The slides of my presentation are available here
And the code is located here

4/28/2018

How To: Easily Update Managed Metadata Field Value (... and others) via REST API/PnPJS

It's a short post that describes how to easily update Managed Metadata Field value using SharePoint REST API or PnPJS.

4/16/2018

Using Vue.js in SharePoint Framework Applications. Part I: Whats and Whys

This is the first post of a series where I'm planning to describe how to use Vue.js in SharePoint Framework apps.
In this post I want to provide a small introduction to Vue.js as well as describe the next parts and what to expect.
List of posts:
  1. Whats and Whys (this post)
  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

4/14/2018

Thanks Office 365 Saturday Vancouver!

Today was a great day on Office 365 Saturday Vancouver!
Greatly organized, great sponsors, speakers and, of course, attendees!




The slides are available here
The code for Field Customizer demo is available here

Thanks for attending and have fun!

3/05/2018

Logically Structure Localizable Strings in SharePoint Framework Solutions

In large projects there are a lot of texts that should be localized. And it might be a mess to manage them all if they are just plainly added in a single resources file.
That's why I want to discuss how we can logically structure resources (strings) in SPFx solutions.

2/06/2018

How to change your name (Display Name) in Office 365 Suite Bar and Profile

Today I was trying to change my name displayed in Office 365 suite bar and when viewing the profile.
And as it often happens simple things lead to difficult solutions.

1/31/2018

Use OOB Fields Experience in SPFx Field Customizer

I'm happy to announce that SharePoint Framework React Controls package starting v1.2.0 includes Field Controls - a set of React components that can be used in Field Customizer to render field's content similarly to OOB experience.
Main features of the controls:
  • OOB fields experience for different types of fields (Text, Title, Urls, Lookups, etc.)
  • "Factory" helper to select proper Field Control based on field's type
  • Ability to provide custom CSS classes and styles to the Field Control
  • It's open source

1/18/2018

Reverting Back Custom Site Column Definition

Sometimes it happens that the site column that was provision from a custom feature has been changed via code or using UI. In that case the column will receive a new version and will be untied for the feature.
And if later on you try to update the field from feature definition it won't work.
So let's look how to fix that situation.

1/13/2018

Thank you, SharePoint Saturday San Diego!

Today I had a great time on SharePoint Saturday San Diego.
Great speakers lineup, excellent sponsorship, awesome organization of the event.

Here is a link for the slides from my session "SharePoint Framework Extensions as a Future of SharePoint Framework": future-of-sharepoint-dev-spfx-extensions
Please, feel free to leave a comment if you have any questions regarding SPFx development.

Have fun!