Customizing SharePoint Framework Web Part Properties - Part Three

Updated: Apr 30, 2019

Introduction

In this article, you will learn how to manage multiple pages on the SharePoint Framework web part "Properties" pane. You will also see different fields or properties getting appended to the Properties pane.

In my previous articles, I have introduced the custom properties and explained check box field properties sample on SharePoint Framework (SPFx) web part.

In my SPFx article series, you can learn about SPFx introduction, prerequisites, steps for setting up the environment, and developing and testing the web parts using the local environments.

In the previous article sample, you will have seen descriptions and check box fields added to the properties pane on a single page. Here you can see them separated on multiple pages. I will be using the samples from the previous article.


In this sample, the web part property pane contains two pages. 

  • The first page contains the text and label fields.

  • The second page contains the check box fields. 


Components

propertyPaneSettings method holds the basic pane structure where it defines the basic definition for the web part properties. Basically, in the property definition file, pane page contains the following components.

  • Header Contains the description property about the page.

  • Groups Multiple groups with each group having multiple properties.

  • Group Contains the group name and the properties. The properties can be anything like label, description, check box, drop down, etc. 


Pages

In the first page of property pane, let us show two groups. 

  • The first group contains a set of text field properties.

  • The second group contains the label property, which shows the static text. 

In the second page of property pane, let us define one group.

  • The group contains the check box fields.

The below structure shows the first page of the properties pane which has a header and groups attached with multiple properties. At the bottom of the screen, you can see the pagination option.



Implementation

Let us look at the implementation. The property pane method which needs to be included in the web part file is shown below. It shows two pages with necessary headers and groups. The group contains the properties.

  1. protected get propertyPaneSettings(): IPropertyPaneSettings {  

  2. return {      

  3. pages: [        {          

  4. header: {            

  5. description: strings.PropertyPaneDescription,          

  6. },          

  7. groups: [            {              

  8. groupName: strings.BasicInfo,              

  9. groupFields: [                

  10. PropertyPaneTextField('title', {                  

  11. label: strings.TitleFieldLabel                

  12. }),                

  13. PropertyPaneTextField('description', {                  

  14. label: strings.DescriptionFieldLabel                

  15. })              

  16. ]            

  17. },            

  18. {              

  19. groupName: "Static Info",              

  20. groupFields:              

  21. [                

  22. PropertyPaneLabel('About', {                    

  23. text:'Users can edit this web part and provide necessary inputs using the properties pane'               

  24. })              

  25. ]            

  26. }           

  27. ]        

  28. },        

  29. {          

  30. header: {            

  31. description: strings.PropertyPaneDescription          

  32. },          

  33. groups: [            {              

  34. groupName: "Optional Fields",              

  35. groupFields: [                

  36. PropertyPaneCheckbox('checkboxProperty1',{                  

  37. isChecked:false,                 

  38.  isEnabled:true,                  

  39. text: this.checkboxProperty1                

  40. }),                

  41. PropertyPaneCheckbox('checkboxProperty2',{                  

  42. isChecked:false,                  

  43. isEnabled:true,                  

  44. text: this.checkboxProperty2                

  45. })              

  46. ]            

  47. }          

  48. ]        

  49. }      

  50. ]    

  51. };  

  52. }  

The custom implementation or logic is included in the custom methods of web part file.


IListItemsFormWebPartProps.ts file

The properties are defined using IListItemsFormWebPartProps.ts file.

  1. export interface IListItemsFormWebPartProps {    

  2. description: string;    

  3. checkboxProperty1: string;    

  4. checkboxProperty2: string;  

  5. }  


mystrings.d.ts File

  1. declare interface IListItemsFormStrings {    

  2. PropertyPaneDescription: string;    

  3. BasicGroupName: string;    

  4. DescriptionFieldLabel: string;    

  5. TitleFieldLabel: string;    

  6. BasicInfo: string;  

  7. }  

  8. declare module 'listItemsFormStrings' {  

  9. const strings: IListItemsFormStrings;  

  10. export = strings;  

  11. }  

en-us.js File

  1. define([], function() {   return {   "PropertyPaneDescription": "Config Web Part",   "BasicGroupName": "Group Name",   "DescriptionFieldLabel": "Description Field",   "BasicInfo": "Basic Information"   }  });  

ListItemsForm.module.scss File

The necessary style content is present inside ListItemsForm.module.scss file. Refer to my previous article.


ListItemsFormWebPart.ts File

The ListItemsFormWebPart.ts file contains the implementation part. 


  1. import {    

  2. BaseClientSideWebPart,    

  3. IPropertyPaneSettings,    

  4. IWebPartContext,    

  5. PropertyPaneTextField,    

  6. PropertyPaneCheckbox,    

  7. PropertyPaneLabel  } 

  8. from '@microsoft/sp-client-preview';  

  9. import styles from './ListItemsForm.module.scss';  

  10. import * as strings from 'listItemsFormStrings'; 

  11.  import { IListItemsFormWebPartProps } from './IListItemsFormWebPartProps';  

  12. export interface spListItems{    

  13. value: spListItem[]  }  

  14. export interface spListItem{    

  15. Title: string;    id: string;    Created: string;    Author: {      

  16. Title: string;    

  17. };  

  18. }  

  19. export default class ListItemsFormWebPart 

  20. extends BaseClientSideWebPart<IListItemsFormWebPartProps> {  

  21. private listName: string = "";  

  22. private checkboxProperty1: string = "Created";  

  23. private checkboxProperty2: string = "Author";  

  24. public constructor(context: IWebPartContext) {  

  25. super(context);    }  

  26. public render(): void {  

  27. // Render the items in tabular format

  28. this.domElement.innerHTML = <div class="${styles.listItemsForm}">          

  29. <div class="${styles.Table}">            

  30. <div class="${styles.Heading}">              

  31. <div class="${styles.Cell}">Title</div>            

  32. </div>          

  33. </div>        

  34. </div>`;  

  35. this.listName = "TestList";  

  36. this.LoadData();    }  

  37. private LoadData(): void{       

  38. let url: string = this.context.pageContext.web.absoluteUrl + "/_api/web/lists/getbytitle('"+this.listName+"')/items?$select=Title";  

  39. // If Created Time check box option is selected

  40. if(this.properties.checkboxProperty1){        

  41. url += ",Created";  

  42. // Column header for Created Time field

  43. this.domElement.querySelector("."+styles.Heading).innerHTML +=`<div class="${styles.Cell}">Created</div>`;      

  44. }  

  45. // If Author check box option is selected

  46. if(this.properties.checkboxProperty2)

  47. {        

  48. url += ",Author/Title&$expand=Author";  

  49. // Column header for Author field

  50. this.domElement.querySelector("."+styles.Heading).innerHTML +=`<div class="${styles.Cell}">Author</div>`;      

  51. }  

  52. this.GetListData(url).then((response)=>{  

  53. // Render the data in the web part

  54. this.RenderListData(response.value);      

  55. });    

  56. }  

  57. private GetListData(url: string): Promise<spListItems>{  

  58. // Retrieves data from SP list

  59. return this.context.httpClient.get(url).then((response: Response)=>{  

  60. return response.json();      

  61. });    

  62. }  

  63. private RenderListData(listItems: spListItem[]): void{      

  64. let itemsHtml: string = "";  

  65. // Displays the values in table rows     

  66. listItems.forEach((listItem: spListItem)=>

  67. {        

  68. let itemTimeStr: string = listItem.Created;        

  69. let itemTime: Date = new Date(itemTimeStr);        

  70. itemsHtml += `<div class="${styles.Row}">`;       

  71.  itemsHtml += `<div class="${styles.Cell}">

  72. <p>${listItem.Title}</p></div>`;  

  73. if(this.properties.checkboxProperty1)

  74. {          

  75. itemsHtml += `<div class="${styles.Cell}"><p>${listItem.Created}</p></div>`;        

  76. }  

  77. if(this.properties.checkboxProperty2){          

  78. itemsHtml += `<div class="${styles.Cell}">

  79. <p>${listItem.Author.Title}</p></div>`;        

  80. }        

  81.  itemsHtml += `</div>`;      

  82. });  

  83. this.domElement.querySelector("."+styles.Table).innerHTML +=itemsHtml;    }  

  84. protected get propertyPaneSettings(): IPropertyPaneSettings {  

  85. return {        

  86. pages: [          {            

  87. header: {              

  88. description: strings.PropertyPaneDescription,            

  89. },            

  90. groups: [              {                

  91. groupName: strings.BasicInfo,                

  92. groupFields: [                  

  93. PropertyPaneTextField('title', {                    

  94. label: strings.TitleFieldLabel                  

  95. }),                  

  96. PropertyPaneTextField('description', {                    

  97. label: strings.DescriptionFieldLabel                  

  98. })                

  99. ]              

  100. },             

  101.  {                

  102. groupName: "Static Info",                

  103. groupFields:                

  104. [                  

  105. PropertyPaneLabel('About', {                      

  106. text:'Users can edit this web part and provide necessary inputs using the properties pane'                 

  107. })                ]              

  108. }             

  109. ]          },          {            

  110. header: {              

  111. description: strings.PropertyPaneDescription            

  112. },            

  113. groups: [              {                

  114. groupName: "Optional Fields",                

  115. groupFields: [                  

  116. PropertyPaneCheckbox('checkboxProperty1',

  117. {                    

  118. isChecked:false,                    

  119. isEnabled:true,                    

  120. text: this.checkboxProperty1                  

  121. }),                  

  122. PropertyPaneCheckbox('checkboxProperty2',

  123. {                    

  124. isChecked:false,                    

  125. isEnabled:true,                    

  126. text: this.checkboxProperty2                  

  127. })                

  128. ]              

  129. }            

  130. ]         

  131.  }        

  132. ]      

  133. };    

  134. }  

  135. }  

Note

The web part needs to be deployed to the site and added to the page. In my previous article, you can see the steps for deployment.


Screenshots

The following screenshot shows the web part page with first page of the web part property pane.



The following screenshot shows the web part page with second page of the web part property pane. 


Summary

Thus, you have learned how to manage multiple pages on the SharePoint Framework web part Properties pane with different fields or properties.


What Next? In the next article, you will learn about working with adding other custom properties that are available to the properties pane.