Different property types on Sharepoint Framework

On our previous post we created a simple SPF webpart, with only text fields, the description and 2 possible numbers.

However in real life, we need more stuff, like checkboxes, dropdowns, toggle, multiple lines, etc.

In this section, I will show you the code to add these properties to the code, in future sections we will show how to create custom controls like date pickers, etc.

Web part property pane

The property pane is defined here in the propertyPaneSettings property is where you will need to define the property pane.

Once the properties are defined, you can then access them in your web part using the this.properties., as we do in the render method in the previous post.

 protected get propertyPaneSettings(): IPropertyPaneSettings {
  return {
    pages: [
      {
        header: {
          description: strings.PropertyPaneDescription
        },
        groups: [
          {
            groupName: strings.BasicGroupName,
            groupFields: [
            PropertyPaneTextField('Name', {
              label: 'Name'
            }),
            PropertyPaneTextField('Bio', {
              label: 'Multi-line Text Field',
              multiline: true
            }),
            PropertyPaneCheckbox('SPDeveloper', {
              text: 'Are you a sharepoint developer'
            }),
            PropertyPaneDropdown('LoveSP', {
              label: 'How much do you love sharepoint?',
              options: [
                { key: 'Too Much', text: 'Too Much' },
                { key: 'Not Much', text: 'Not Much' },
                { key: 'Almost Hate it', text: 'Almost Hate it' },
                { key: 'Definitely Hate it', text: 'Definitely Hate it' }
              ]}),
            PropertyPaneToggle('ReceiveEmails', {
              label: 'Do you want to receive emails?',
              onText: 'On',
              offText: 'Off'
            })
          ]
          }
        ]
      }
    ]
  };

Here we defined one multiline, one checkbox, dropdown, and also the toggle (boolean) property.

However, this is no enough, we need to imporrt these properties from the Framework itself, these are at the top of the file:

import {  
  BaseClientSideWebPart,
  IPropertyPaneSettings,
  IWebPartContext,
  PropertyPaneTextField,
  PropertyPaneCheckbox,
  PropertyPaneDropdown,
  PropertyPaneToggle
} from '@microsoft/sp-client-preview';

Now we need to add the types to IOurFirstSpfAppWebPartProps file:

export interface IPropertiesSampleWebPartProps {  
    Name: string;
    Bio: string;
    SPDeveloper: boolean;
    LoveSP: string;
    ReceiveEmails: boolean;
}

If you switch back to the main file, on the render method, we can access the new properties in the same way:

{this.properties.yourpropertynamehere}

Properties can also have default values, these default values are defined in the manifest.json file like this:

 "properties": {
        "Name": "PropertiesSample",
        "Bio": "Multi-line text field",
        "SPDeveloper": true,
        "LoveSP": "2",
        "ReceiveEmails": true
    }
Web part manifest

The manifest.json defines the properties of the webpart, lets review it completed.

{
  "$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",

  "id": "f61b54d7-9e1d-45f7-aaa8-e8c0982aefdc",
  "componentType": "WebPart",
  "version": "0.0.1",
  "manifestVersion": 2,

  "preconfiguredEntries": [{
    "groupId": "f61b54d7-9e1d-45f7-aaa8-e8c0982aefdc",
    "group": { "default": "Under Development" },
    "title": { "default": "PropertiesSample" },
    "description": { "default": "PropertiesSample description" },
    "officeFabricIconFontName": "Page",
    "properties": {
        "Name": "PropertiesSample",
        "Bio": "Multi-line text field",
        "SPDeveloper": true,
        "LoveSP": "2",
        "ReceiveEmails": true
    }
  }]
}

And finally the entire code of the most important file PropertiesSampleWebPart.ts:

import {  
  BaseClientSideWebPart,
  IPropertyPaneSettings,
  IWebPartContext,
  PropertyPaneTextField,
  PropertyPaneCheckbox,
  PropertyPaneDropdown,
  PropertyPaneToggle
} from '@microsoft/sp-client-preview';


import styles from './PropertiesSample.module.scss';  
import * as strings from 'propertiesSampleStrings';  
import { IPropertiesSampleWebPartProps } from './IPropertiesSampleWebPartProps';

export default class PropertiesSampleWebPart extends BaseClientSideWebPart<IPropertiesSampleWebPartProps> {

  public constructor(context: IWebPartContext) {
    super(context);
  }

  public render(): void {
    this.domElement.innerHTML = `
      <div class="${styles.propertiesSample}">
        <div class="${styles.container}">
          <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">
            <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
              <span class="ms-font-xl ms-fontColor-white">Sharepoint Questionnaire!</span>
              <p class="ms-font-l ms-fontColor-white">Customize SharePoint experiences using Web Parts.</p>
              <p class="ms-font-l ms-fontColor-white">Name: ${this.properties.Name}</p>
              <p class="ms-font-l ms-fontColor-white">Bio: ${this.properties.Bio}</p>
              <p class="ms-font-l ms-fontColor-white">Are you a Sharepoint Developer: ${this.properties.SPDeveloper}</p>
              <p class="ms-font-l ms-fontColor-white">How much you love Sharepoint: ${this.properties.LoveSP}</p>
              <p class="ms-font-l ms-fontColor-white">Do you want to receive emails: ${this.properties.ReceiveEmails}</p>
              <a href="https://github.com/SharePoint/sp-dev-docs/wiki" class="ms-Button ${styles.button}">
                <span class="ms-Button-label">Learn more</span>
              </a>
            </div>
          </div>
        </div>
      </div>`;
  }

 protected get propertyPaneSettings(): IPropertyPaneSettings {
  return {
    pages: [
      {
        header: {
          description: strings.PropertyPaneDescription
        },
        groups: [
          {
            groupName: strings.BasicGroupName,
            groupFields: [
            PropertyPaneTextField('Name', {
              label: 'Name'
            }),
            PropertyPaneTextField('Bio', {
              label: 'Multi-line Text Field',
              multiline: true
            }),
            PropertyPaneCheckbox('SPDeveloper', {
              text: 'Are you a sharepoint developer'
            }),
            PropertyPaneDropdown('LoveSP', {
              label: 'How much do you love sharepoint?',
              options: [
                { key: 'Too Much', text: 'Too Much' },
                { key: 'Not Much', text: 'Not Much' },
                { key: 'Almost Hate it', text: 'Almost Hate it' },
                { key: 'Definitely Hate it', text: 'Definitely Hate it' }
              ]}),
            PropertyPaneToggle('ReceiveEmails', {
              label: 'Do you want to receive emails?',
              onText: 'On',
              offText: 'Off'
            })
          ]
          }
        ]
      }
    ]
  };
}
}
End Result

In the next posts we will add custom property controls, and build newer stuff based on that new knowledge.