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.
SharePointWidgets.com - Populating dynamic values 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

Post a Comment

Popular posts from this blog

Rename Folder using Microsoft Flow / Power Automate in a Document Library in SharePoint Online

Image
Hi Friends, Today blog is about renaming the folder in the document library using the MS FLOW or MS Power Automate. When I started working on this it seems to be an easy job, but if you look into the connectors you'll find it really difficult as there is no straight forwards connector to do the job. Issues encountered If you try using the " Get Folder Metadata " connector, you'll not be able to get the ID of the folder as it is returning as the negative value. If you get the ID somehow and try to update the folder name using the " Update File Properties " connector, you'll end up renaming only the title of the folder, but it will still have the old name as the display name which in case is again a failure. There is no other connector which can be utilized to achieve the task of renaming the folder in a document library directly. Solution The solution is a simple three-step (at least in this example). Step 1: Initialize variables In case you are computing...
Read more

Power Automate: Rename file in SharePoint Online

Image
  We often get to change the name of the file, so in this article, I will explain how to rename the file in SharePoint Online using Microsoft Power Automate. Below is the file which I will be renaming. Step 1: Get the file properties We only need to have the SharePoint item id, for which we want to rename the file Step 2: Update the File Name Add the "Send an HTTP request to SharePoint" connector, and update the following properties Method : POST Uri : _api/web/lists/GetByTitle(' <LIBRARY TITLE> ')/items( <ITEM ID> )/ValidateUpdateListItem Body: {     "formValues" :[         {             "FieldName" : "FileLeafRef" ,             "FieldValue" : "<New File Name>"         }     ] } Execute the flow, and the file will be renamed Happy Automating..!! #PowerAutomate #SharePointWidgets #Microsoft
Read more

Power Automate: How to Add "New Line" to the text in SharePoint multiline text field

Image
  Q. How to add "New Line", while adding the text to the SharePoint multiline text field?  A . In order to add the new line while adding a text to the multiline SharePoint field, I will demonstrate the simplest approach. Although you can find multiple approaches, but this one seems to be very easy and quick. You need to append the below expression to the text to make it to the new line: decodeUriComponent('%0A') If you are adding any array, then join the array using this expression or if you are building this string, then append this expression to the string. Step 1:  Add a variable and add the below expression (Write the code under the Expression tab) STEP 2: This is how your variable will look like      STEP 3: Output of the Address columns which is of Type Multiline text field Happy Coding..!! #Microsft #SharePointWidgets #PowerAutomate
Read more