Connected SharePoint Framework Web Parts Using Dynamic Data

Using the dynamic data capability, you can connect SharePoint Framework client-side web parts and extensions to each other and exchange information between the components.
Official documentation contains great example on how to connect web parts using DynamicProperty web part properties that can consume values from other web part, or, generally, data source.
In my case I want to connect web parts in "old-school" way - with events firing and handling. Moreover, I want "receiver" web part to handle event from multiple "senders".
This blog post is based on Page Sections Navigation sample from SPFx web parts samples repository.


SharePoint Framework 1.8 Has Been Released!

Today the SharePoint Framework 1.8 has been released!
Why is that important and excited? Because this version makes SPFx a little bit more than just a framework for SharePoint development. Because now SPFx can be used to implement Microsoft Teams configurable Tabs!
This functionality was in preview since v 1.7.0 but now it's GA-d with some changes in comparison with preview version:

  1. You can configure if the web part is available as a standard web part, as a tab in Teams, or as an "App part". This configuration is done in web part's manifest file using supportedHost property:
      "supportedHosts": ["SharePointWebPart", "TeamsTab", "SharePointFullPage"]
  2. Now developer doesn't need to manually create .zip archive and deploy it to Teams app catalog. This step is automated using "Sync to Teams" ribbon button in SharePoint App Catalog:
  3. Web part's Property Pane can be launched at any time from Team Tab's menu.
Besides of SPFx in Teams there are other cool new features and improvements:
  • App part pages - new page layout with locked UI that can contain single web part. Basically, these are SPAs... in SharePoint way. This is configured for the web part using supportedHosts property mentioned above
  • Support of TypeScript 2.x and 3.x. Until now SPFx supported TypeScript 2.x only. But now, if needed, developers can use TypeScript 3.x with such new features as project references, tuples in REST parameters, unknown type, and others. You can read more about TypeScript release notes in TypeScript handbook
  • Web part variant themeing in SharePoint modern pages - now web parts can use ThemeProvider and render their background based on theme and section's color instead of default white background. Use "supportsThemeVariants": true in web part's manifest to enable this feature
  • Library Components (Preview) - ability to create components' libraries to be referenced by other SPFx projects
  • .. other improvements that are subjectively less important
Here are some helpful links about SPFx v1.8: Enjoy new round of improvements from SharePoint Dev team!

That's all for today!
Have fun!


text-decoration is not Exposed to Children

Quick notice for myself and all others who will struggle with the issue that text-decoration CSS property is not exposed to child elements.
It might be because of the position value of the children. If it's set to absolute or fixed then parent value of text-decoration will not take effect on such children.
That's it for today!
Have fun!


System.Uri and Site.OpenWeb

Often we're in a situation when we need to get a server relative url from absolute url.
One of the easiest ways to do that in C# is to use System.Uri object like that:
public static string GetRelativeUrl(string absoluteUrl)
  return new Uri(absoluteUrl).AbsolutePath;
One thing we should remember about this method is: System.Url automatically escapes the url. As a result, as example, https://tenant.sharepoint.com/sites/mysite/Site With Spaces will be replaced with https://tenant.sharepoint.com/sites/mysite/Site%20With%20Spaces, and AbsolutePath will return /sites/mysite/Site%20With%20Spaces.
And that's critical for SharePoint. If you provide escaped server relative url to Site.OpenWeb (or SPSite.OpenWeb for server OM) you'll get File not found exception for CSOM and something like There is no Web named for Server Object Model.
To avoid that and still use System.Uri I would recommend to use Uri.UnescapeDataString static method:
public static string GetRelativeUrl(string absoluteUrl)
  return Uri.UnescapeDataString(new Uri(absoluteUrl).AbsolutePath);
It will revert back the escaping.
Hope that would help!
That's it for today!
Have fun!


Add Google Charts into SharePoint Framework Web Part

This post is based on the question in sp-dev-docs repo.
The question is how can we render a Google Charts in SPFx web part.
Actually, it's pretty easy thing to do.


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?


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!