Getting Related Team Information from Private Channel in SPFx MS Teams App

Just two weeks ago during MS Ignite Microsoft Teams team has announced Private channels - one of the most asked features.
So, a bit of technical details. Each private channel is a separate SharePoint site collection with a unique site template and no group assigned.
We can discuss a lot if it's good decision or not.
But in this post I want to focus on a specific problem I experienced while developing SPFx solution for MS Teams.


Hope to See You at SPTechCon Boston!

I'm thrilled to be selected as a speaker for SPTechCon Boston this year!
This is a great event with a lot of excellent speakers who really know what their topics!
I will present 2 sessions:

  • Develop Once, Use Twice - SharePoint Framework in Microsoft Teams - Tuesday, August 27, 1:15 PM, Constitution B
  • SharePoint Online Customization Toolset - Wednesday, August 28, 1:45 PM, Constitution B
I'll also take part in great Expert Panel How We Keep Up With Changes in Microsoft 365 Ecosystem on Tuesday, August 27 at 9:45 held by Matt Wade. Other participants are: 
So, please, join me on this event!
There is still time to register... And you can use code TerentievB19 to save $200!


Step by Step: Configure Bot to Work in Teams and with Microsoft Graph

This blog post is a step-by-step instruction on how to create a Bot from scratch using Microsoft Bot Framework v4, configure it to work with Microsoft Teams, and authenticate it to make Microsoft Graph requests.
There are a lot of resources around bots, authentication in bots and Microsoft Teams (and I'll list resources at the end of the post). But during my investigation I couldn't find an example or an article that walks through all 3 topics at the same time. And especially "from scratch" which is important if you want to understand the technology and the flow.
So this post is kind of a cheat sheet for myself, and hopefully for others.
All the steps described are for Bot Framework v4 and ASP.NET Core.
Code is available here.
Keep in mind that except of code there are different configurations to be done in Azure and MS Teams.
So, it might worth reading the post.


React Templates Using SPFx Library Components. Part II. Implementation.

In the first post we've already discussed the objective, as well as basics, or strategy, of how to create fully functional React templates (with props, events handling etc.) and dynamically load them using new SharePoint Framework project type - Library Component.
This post covers implementation details: main web part, dynamic template factory loading, and library component with alternative UI.
If you don't want to read the post - the code is available here. Feel free to use it in any way you want.


React Templates Using SPFx Library Components. Part I. Basics.

Templating is a pretty powerful approach to provide extensibility to a project/component/library. It can be used to deliver different behaviors and/or look and feel to different customers, or provide extendable open-source libraries.
There are a lot of template libraries out there that can be used in your project. One of the most popular is Handlebars.js. The problem with these libraries is that in most cases they provide you an ability to define "static" content (basically, HTML and CSS). And if you want to include some actionable content (e.g. handle events from outside the template, etc.) - it might be either tricky or impossible.
In the next several blog posts I want to showcase how to create fully functional React templates (with props, events handling etc.) and dynamically load them using new SharePoint Framework project type - Library Component.
Technically, this approach can be exposed to non-SPFx projects as well, but it is not the purpose of this blog posts series.
If you don't want to read the posts - the code is available here. Feel free to use it in any way you want.


Remember: Web GUID is NOT UNIQUE

It may seem weird, but yes - SharePoint Web GUID is not unique across the tenant/farm. And it has never been.
It is unique only inside a site collection.
It can be confusing (everyone knows what acronym means), most of us probably has never noticed that... But it is what it is.
And you'll probably notice it more often with fast site creation for modern Team and Comm sites in SharePoint Online.
So remember that fact... and modify your code if it based on assumption that the Guid is unique.
Few more words by Wictor Wilen: http://www.wictorwilen.se/when-a-guid-is-not-really-unique-i-m-looking-at-you-sharepoint

That's all for today!
Have fun!


MS Graph, Events, and Time Zones in SPFx

Working with time zones is always a mess, whatever language, technology stack or environment you're in. There are always different issues on how to convert dates, get correct time zone and so on.
Currently I'm working on SPFx solution that should create an event in Outlook calendar.
User should be able to select date, time, and time zone of the event.
Time zone selection dropdown should display friendly names like that:

And the dropdown initial selection should be based on browser's (computer) time zone.
Below I'm providing some thoughts on the implementation, unfortunately without final solution for now. All the thoughts are based on the SPFx stack.


MS Graph: Get DriveItem by File Absolute Url

Microsoft Graph allows to work with OneDrive files and SharePoint documents using DriveItem resource type. Using this entity you can read information about a file, such as size, content, file type, and so on (here is a link to the resource type documentation).
You can get DriveItem object from a specific Drive, Site, Group, or user's connected OneDrive. But for all of these operations you need to know identifiers of parent resources, e.g. drive id, or site id (documentation on how to get drive item).
But what if the file is located in a custom document library, in a subfolder, and on a subsite? And you have only absolute url for the document, like https://your-tenant.sharepoint.com/sites/your-site/your-subsite/DocLibrary/subfolder/file.ext?


Workaround. SharePoint App Catalog: Sync to Teams button doesn't work.

Currently "Sync to Teams" button in SharePoint App Catalog doesn't work or works unstable.
Here is a related issue
As a result, if you create a new SPFx project based on v1.8 you will not be able to add it to Teams organizational store.
You will still be able to do that if you create your own Team's app manifest (it was generated by Yeoman SPFx generator v1.7.1) and create a .zip archive to contain this manifest and icons from teams folder.
As the manifest file is no longer generated I decided to provide its content here.


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.