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.

You can check the following SPFx tutorial:

>