SPFx - PropertyPane Custom Controls - page 3

Going back to the helloworld project, let's import the numberPicker control.
We will use the relative path to the module and I choose the numberPicker parent's folder to scaffold a fresh helloworld template.
  • In the HelloWorlWebPart.ts import the module
import {NumberPicker} from '../../../../numberPicker/numberPicker';

  • Let's define a property called picker 

export interface IHelloWorldWebPartProps {
  description: string;
  picker:number;
}

  • On the render function let's print the picker property. Add this line to the domElement's innerHtml
<p class="${ styles.description }">Picker:${this.properties.picker||1}</p>

  • Finally, create a new instance of the numberPicker on the propertyPaneConfiguration
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                }),
                new NumberPicker("picker", {
                  applyOnClick: false,
                  deferredValidationTime: 0,
                  label: "Picker",
                  description: "This is the number picker control",
                  max:100,
                  min:1,
                  properties: this.properties
                })
              ]
            }
          ]
        }
      ]
    };
  }

Now, just run gulp serve and test the control on the property pane.

I don't go further with technical details of this control. I made this approach because I think is easy to understand. Even if you are not an expert on interface implementations, you can use this structure to define any kind of controls. Just take a special attention to the NumberPickerFieldProp interface. This is the public interface that you will use on the property pane configuration and where you define the parameters of the control. Then, just implement the onRender flow, you have access to the control's parameters on the this.config object. You should also give special attention to the changeCallback function that is used to perform the property changes. This will trigger a new webpart render with the new value of the property.

I hope this helps you to build your own reusable control. Just make sure you build a structure similar to the one's used in this tutorial, define your control's properties, behaviour and styles. That should be simple!


GitHub Project

Example of two number pickers

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