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.


Comments

Post a Comment

Popular posts from this blog

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...
Read more

Handling theme changes on a MS Teams Tab WebPart

-
Image
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...
Read more

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...
Read more