SPFx – Bind dropdown list from SharePoint list using PnP

In this SPFx tutorial, we will discuss how to bind dropdown list from a SharePoint Online list using react and PnP in the SharePoint Framework (SPFx).

SPFx – Bind dropdown list from SharePoint list using PnP

Here I have a SharePoint Online list like below:

SPFx Bind dropdown list from SharePoint list
SharePoint list

First, you can create an SPFx web part and you can choose to to react as the framework. You can follow the below article for SharePoint framework client web part example.

  1. Connect to a SharePoint List using SP PnP.
  2. Save all the list items on the array. Then Filter List items using category values.
  3. Display Category value on the title of dropdown
  4. Iterate the listitem and load on the dropdown values. Onclick of dropdown values, navigate to URL.
  5. Render the dropdown on div using append HTML.
  6. React elements are used to render on the webpart.
SPFx Bind dropdown list from SharePoint list using PnP
React/Typescript dropdown control

You can see the below code.

import * as React from 'react';
import * as ReactDoM from 'react-dom';
import "@pnp/polyfill-ie11";
import { SPComponentLoader } from '@microsoft/sp-loader';
import * as $ from 'jquery'; 
import { Spinner } from 'office-ui-fabric-react/lib/Spinner';

import {
    SPHttpClient,
    SPHttpClientResponse   
  } from '@microsoft/sp-http';

import { sp } from "@pnp/sp";
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";

import { IDrisCommServiceProps } from './IDrisCommServiceProps';

import { styled } from 'office-ui-fabric-react/lib/Utilities';
import styles from './DrisCommService.module.scss';


import Select from 'react-select';

var allitemResults = []; 
let arrtest = [];
let arrElements = [];
let arrResult =[];

require('./style/dropdown.css?rev=1');
export  interface IChoice{

}
export interface ITilesState {
    //items?:any;
    selectedOption?:string; 
    items:[ 
        { 
          "Title": "", 
          "URL": "", 
          "Category":""
        }]; 
  }
  

  export default  class Tile extends React.Component<IDrisCommServiceProps,ITilesState>{

    constructor(props: IDrisCommServiceProps){

        super(props);

        this.state = {

           
            items:[{
                "Title": "", 
                "URL": "", 
                "Category":""
            }]
        };

        /*
        sp.setup({
            ie11: true,
            //spfxContext: this.props.context,
            baseUrl: this.props.siteUrl
          });*/
          sp.setup({
            sp: {
              //  ie11: true,
              baseUrl: this.props.siteUrl
            },
          });
    }

        public render(): JSX.Element {
            return( 
                <div>
                <div className="d-wptitle">	 
                <span className="d-wptitle-text"> {this.props.description} </span> 
             </div>
        <div id="dpOuterDiv" className="app">
        <div id="dpnDiv" className="d-wpcontent">

        </div>
        </div>
        <div id="errordiv"></div>
        </div>
        );
    }
    public componentDidMount() { 
        this.getData(this.displayData);
    }


    getData(callback)
    {
        $("#errordiv").empty();
        try{
        sp.web.lists.getByTitle("RelatedLinks").items().then(result=>{
            if(result.length === 0)
            {
                $("#errordiv").append("No item");
            }
            else{
            result.forEach(element => {
                let url = element.URL;
                let title =element.Title;
                let category = element.Category;
                // get all category 
                
                arrtest.push(
                    element.Category
                   );
                   arrElements.push(
                      element.Category ,element.URL,element.Title 
                   );
            });
        }
        }).catch((error)=> {
            $("#errordiv").append(error.message);
            console.log("Error: ", error.message);
        });
        setTimeout(function() {
          //  console.log("first function executed");
            callback();
          }, 3000);

        }
        catch(e)
        {
        $("#errordiv").append(e.message);
        console.log("Error: ", e.message);
        }
    }


    displayData()
    {
        const distinctArray = arrtest.filter((n, i) => arrtest.indexOf(n) === i);
     
        distinctArray.forEach(element => {
           
            sp.web.lists.getByTitle("RelatedLinks").items.filter("Category eq '" + element + "'").top(50).get().then((items: any[]) => {
                if (items && items.length) {
                    
                    $("#dpnDiv").append(`<div class="d-wpcontent-title"  >${element}</div>`);
                    let html: string="";
                    
              
                   html += `<select id="dp_common" class="d-form-control"  onchange="window.open(this.options[this.selectedIndex].value);"> <option value="#">Choose One...</option>`;
                   
                   
                    items.forEach((item) => {
                    html += `
                        <option  data-url="${item.URL}"  value="${item.URL}">${item.Title}</option>`;
                    });
                    html += `</select>`;
    
                     $("#dpnDiv").append(html);
                     html = null;

                  
                }
               
            });
           
        });
        
    }
/*
    private listTitle = "RelatedLinks";
    
    public async getListItems(): Promise<IChoice[]> {
           let ChoicesCollection: IChoice[] = [];
           const items = await sp.web.lists
              .getByTitle(this.listTitle)
              .fields.getByInternalNameOrTitle('Choices')
              .select('Choices,ID')
              .get()
              .then((data) => {
                  ChoicesCollection.push({
                  Key: data.ID,
                  Choices: data.Choices
             });
    });
    console.log(ChoicesCollection);
    return new Promise<IChoice[]>(async resolve => {
        resolve(ChoicesCollection);
    });

    } */


  }

In this SharePoint tutorial, we learned how to bind a dropdown list in SharePoint framework (SPFx) using PnP and reactjs.

See also  Connect-PnPOnline : The term 'Connect-PnPOnline' is not recognized as the name of a cmdlet, function, script file, or operable program

You can check the following SPFx tutorial:

  • To many assumptions with this tutorial. Have a lot of errors that I do not know how to solve with the React Framework version of SPFx. Pasted the code into the .ts file in the src > webparts folder. But think there should be some adjustments to the config and other files to make this work.

    Please change the tutorial and explain everything that needs to be done to make this work – no matter how small or unimportant you may think it is. Show all the workings/steps….

  • >