SharePoint Framework (SPFx) - Adding dynamic values in (SPFx) webpart properties

Hi Friends,

We usually have to add the dynamic values to the web part properties. In this blog I will be showcasing the how you can add the dynamic values to the web part properties.



In this blog I will showcasing how you can fill in the drop-down values with the Title of the lists. All the lists will be fetched and then will be added to one of the web part properties. On selection of the drop-down you can see the list selected.

Step 1 : Create an empty SharePoint project

To learn how to create SharePoint Framework Project you can refer to my previous post Setup your new SPFx Project. If you have not setup your environment you can refer my blog  3 Steps to Setup your SharePoint Framework Environment.
In my case I have crated

  • Project with the name " spfx-dynamic-values-in-web-part-properties"
  • WebPart with the name " demoDynamicValuesInWebPartProperties"

Step 2: Install supported packages

For the ease of development I will be deploying some supportive package to my solution. Execute the below command to install SPFxHelper package. To know more about this package read  SharePoint Framework Helper.

npm install spfxhelper

Step 3: Start Coding

  • Open he typescript file of your web part in my case it is with the name " DemoDynamicValuesInWebPartPropertiesWebPart.ts"
  • Now import the SPFxHelper package within your solution and add SPCommonOperations class. We will be using this class to fetch the records from SharePoint.

import  { SPCommonOperations } from   'spfxhelper' ;
  • Add the following classes in your already added package to add the drop-down

import  {
 BaseClientSideWebPart,
 IPropertyPaneConfiguration,
 PropertyPaneTextField,
 IPropertyPaneDropdownOption,
 PropertyPaneDropdown
} from   '@microsoft/sp-webpart-base' ;
  • Add the " selectedList" in your webpartProps interface and remove the default prop.

export   interface   IDemoDynamicValuesInWebPartPropertiesWebPartProps  {
 selectedList : string ;
}
  • Declare an array of type " IPropertyPaneDropDownOption" so that we can have all the values in this array.

private  ddlListOptions :   IPropertyPaneDropdownOption [] =  [];
  • Also declare an boolean variable, so we will be able to know if the values are fetched then do not re-fetch them.

private  receivedLists :   boolean   =   false ;
  • Update the render method to show the selected option.

  public   render () :   void  {
    const  element :   React . ReactElement < IDemoDynamicValuesInWebPartPropertiesProps  > =  React. createElement (
     DemoDynamicValuesInWebPartProperties,
     {
       description: this .properties.selectedList
     }
   );
   ReactDom. render (element, this .domElement);
 }
  • I am a lazy guy so I always create properties if i have to use the same in more than 1 place and luckily it is also a recommended way of doing
  • So I have create 2 properties to get the webUrl and the object of SPCommonOperations class

  /** Property to get the current web URL **/
  private   get   webUrl () :   string  {
    return   this .context.pageContext.web.absoluteUrl;
 }
  /** Property to get the SPCommonOperations object, which will help in fetching values **/
  private   get   oSPCommonOps () :   SPCommonOperations  {
    return  SPCommonOperations. getInstance ( this .context.spHttpClient as   any , this .webUrl);
 }
  • Create a new method to fetch all the lists from the SharePoint site

  /** Method to get all the lists from SharePoint */
  private   get   getAllLists () :   Promise < IPropertyPaneDropdownOption []> {
    // Initialize the variable to geather all values
    let  options :   IPropertyPaneDropdownOption [] =  [];
    // Call the method to fetch record from SharePoint based on query
    return   this .oSPCommonOps. queryGETResquest ( ` ${ this .webUrl } /_api/web/lists` ). then ( response   =>  {
      // Check if the response is success ?
      if  (response.ok) {
        // Iterate over each response and get the title to fill in as ddl options
       response.result.value. forEach ( item   =>  {
         options. push ({ key: item.Title, text: item.Title });
       });
        // return the fetched records
        return   Promise . resolve (options);
     }
   });
 }
  • Update the getPropertyPaneConfiguration method to get the values of the lists.

// Check if the values are recieved
  if  ( ! this .receivedLists) {
    // Call the method to get all the lists Titles
    this .getAllLists. then ( resp => {
      // Fill the values in the variable assigned
      this .ddlListOptions =  resp;
      // update the flag so it is not called again
      this .receivedLists = true ;
      // Refresh the property pane, to reflect the changes
      this .context.propertyPane. refresh ();
   });
 }
  • Add the PropertyPaneDropDown control to the webpart properties

  PropertyPaneDropdown ( 'selectedList' ,{
   label: `select list` ,
   options: this .ddlListOptions
 })
  • Compile and execute the code, you'll be able to get all the lists in the drop-down in webpart properties.

Full code file (find sample code here)


import   *   as  React from   'react' ;
import   *   as  ReactDom from   'react-dom' ;
import  { Version } from   '@microsoft/sp-core-library' ;
import  {
 BaseClientSideWebPart,
 IPropertyPaneConfiguration,
 PropertyPaneTextField,
 IPropertyPaneDropdownOption,
 PropertyPaneDropdown
} from   '@microsoft/sp-webpart-base' ;
import  { SPCommonOperations } from   'spfxhelper' ;
import   *   as  strings from   'DemoDynamicValuesInWebPartPropertiesWebPartStrings' ;
import  DemoDynamicValuesInWebPartProperties from   './components/DemoDynamicValuesInWebPartProperties' ;
import  { IDemoDynamicValuesInWebPartPropertiesProps } from   './components/IDemoDynamicValuesInWebPartPropertiesProps' ;
export   interface   IDemoDynamicValuesInWebPartPropertiesWebPartProps  {
 selectedList : string ;
}
export   default   class   DemoDynamicValuesInWebPartPropertiesWebPart   extends   BaseClientSideWebPart < IDemoDynamicValuesInWebPartPropertiesWebPartProps > {
  // Property that will hold all the options value
  private  ddlListOptions :   IPropertyPaneDropdownOption [] =  [];
  // Property that will be used flag if all the values are filled
  private  receivedLists :   boolean   =   false ;
 
  public   render () :   void  {
    const  element :   React . ReactElement < IDemoDynamicValuesInWebPartPropertiesProps  > =  React. createElement (
     DemoDynamicValuesInWebPartProperties,
     {
       description: this .properties.selectedList
     }
   );
   ReactDom. render (element, this .domElement);
 }
  /** Property to get the current web URL **/
  private   get   webUrl () :   string  {
    return   this .context.pageContext.web.absoluteUrl;
 }
  /** Property to get the SPCommonOperations object, which will help in fetching values **/
  private   get   oSPCommonOps () :   SPCommonOperations  {
    return  SPCommonOperations. getInstance ( this .context.spHttpClient as   any , this .webUrl);
 }
  protected   get   dataVersion () :   Version  {
    return  Version. parse ( '1.0' );
 }
  /** Method to get all the lists from SharePoint */
  private   get   getAllLists () :   Promise < IPropertyPaneDropdownOption []> {
    // Initialize the variable to geather all values
    let  options :   IPropertyPaneDropdownOption [] =  [];
    // Call the method to fetch record from SharePoint based on query
    return   this .oSPCommonOps. queryGETResquest ( ` ${ this .webUrl } /_api/web/lists` ). then ( response   =>  {
      // Check if the response is success ?
      if  (response.ok) {
        // Iterate over each response and get the title to fill in as ddl options
       response.result.value. forEach ( item   =>  {
         options. push ({ key: item.Title, text: item.Title });
       });
        // return the fetched records
        return   Promise . resolve (options);
     }
   });
 }
  protected   getPropertyPaneConfiguration () :   IPropertyPaneConfiguration  {
    // Check if the values are recieved
    if  ( ! this .receivedLists) {
      // Call the method to get all the lists Titles
      this .getAllLists. then ( resp => {
        // Fill the values in the variable assigned
        this .ddlListOptions =  resp;
        // update the flag so it is not called again
        this .receivedLists = true ;
        // Refresh the property pane, to reflect the changes
        this .context.propertyPane. refresh ();
     });
   }
    return  {
     pages: [
       {
         header: {
           description: `Demo By Sumit Kanchan`
         },
         groups: [
           {
             groupName: 'Demo for Dynamic values in Web Part Properties' ,
             groupFields: [
                PropertyPaneDropdown ( 'selectedList' ,{
                 label: `select list` ,
                 options: this .ddlListOptions
               })
             ]
           }
         ]
       }
     ]
   };
 }
}

Happy Coding
-Sumit Kanchan

Comments

  1. Thank you Sumit for sharing this wonderful example.

    ReplyDelete

Post a Comment

Popular posts from this blog

SharePoint Framework (SPFx) : Cascade dropdown in webpart properties

Checking user permission in SharePoint Framework (SPFx) webpart

SharePoint Image Gallery