Posts

Handling theme changes on a MS Teams Tab WebPart

Using the latest SPFx version is possible to deploy a WebPart and Sync it with Microsoft Teams. In this article I am not going to show how to do it , but I leave some tips on how to prepare the WebPart to support theme colors on SharePoint and Teams Tab environments. The Microsoft Teams environment has three different themes the user can choose from. The available themes are: . Default (Light) . Dark . High Contrast Since those themes are a user's choice, using the Site Collection's theme colors chosen by the administrator is not useful to a Teams Tab Environment. In fact, it may lead to an unpleasant experience to the end user. Let's say the user is using the MS Teams App with a dark theme but the site collection has a light theme applied. The result is a WebPart being rendered using a light pallete inside a dark environment. So, if you're planning to migrate a SPFx WebPart to Microsoft Teams there are some steps that you should consider to handle the them

Sharing Dynamic Data between WebParts

Image
Sharing data between WebParts it's a very cool feature of the SharePoint Framework. When I tried this feature, the first thing that came to my mind was to build a dashboard that looks like a PowerBI report. The idea is to have one host WebPart that connects to a data source and provides an interface to filter the data. The client WebParts get the filtered data from the host and show interactive charts. Everytime the user change the filters, the charts automatically show the new values. With this approach, there is only one connection to the data source (e.g. a SharePoint List) and we can fill the page with many instances of the client WebPart that consume the data from the host. In this project, I tried to make a generic solution that can be used with many business rules. The trick is to make use of denormalized data. In fact, the more redundant the data is, more flexibility we can get from it. So, this project consists on two WebParts. One of them will be the h

Property Pane dynamic fields

Image
In most cases, we need to dynamically build the Property Pane based on some logics. Let's say we want to show some options only if some other property is chosen. In this article I show how to append a group of properties based on some logics. Let's say we want to show some information of a company's members. We want to choose a department, then a group of members that belong to that department and choose some of them's location. We can build a Property Pane Group that dynamically changes it's content. In this example, there is a function that returns an IPropertyPaneGroup object. That object contains an array of IPropertyPaneField objects. Inside the function we can implement all the logics to decide which fields we want to show and it's behaviours. In a helloworld project, we create the following function: private getConditionalGroup() : IPropertyPaneGroup{ let groupFields : Array<IPropertyPaneField<any>> = n

Delete Pending API Permission Requests

Let's say you have a lot of pending API permission requests on your tenant and you want to delete them all. On your tenant's SharePoint Admin portal you can do it but there are two problems: a) You have to do it manually, one by one. b) If you have more than 100 pending requests, you only have access to the first 100. Everytime you delete one request, you have to refresh the page to have access to newer requests. Let's say you have deployed several times a WebPart and you have more than 1000 pending requests. That's a big problem! A fast way to solve it is to use a simple PowerShell script. Delete All Pending Requests $Url = Read-Host -Prompt 'Input your tenant admin URL (e.g. https://mytenant-admin.sharepoint.com)' Connect-SPOService -Url $Url do{     $requests = Get-SPOTenantServicePrincipalPermissionRequests     foreach ($req in $requests ){         if ($req -ne $null)         {             Deny-SPOTenantServicePrincipalPermissionRequest -

Build a custom control for the Property Pane

In this article, I create a modular and reusable control for the Property Pane. I don't use react but, if you want to use it, the approach is similar. In the example, I build a number picker component. Read the tutorial  here .