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:

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.

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:

• How to set up development environment for SharePoint framework
• SharePoint Framework (SPFx) Extensions Application Customizer Example
• Create and Deploy SharePoint Framework (SPFx) extension field customizer
• Create and deploy SharePoint Framework (SPFx) listview command set extension
• cannot find module ‘@microsoft/sp-build-web’ SharePoint Framework (spfx)
• The api entry could not be loaded: node_modules/@microsoft/sp-webpart-workbench/lib/api/ in SharePoint Framework
• How to get user details using Microsoft Graph API in SPFx
• SharePoint online spfx script editor web part
• How to Send Email with Attachments using Graph API in SPFx (React JS)
• SPFx Application Customizer Example – An Analog Clock with React
• How to get user outlook messages using Microsoft graph api in SPFx with React JS
• How to display SharePoint list items in a table using SPFX
• How to use bootstrap in SPFx webpart
• Customize SharePoint Online site header and footer using SPFx Application Customizer
• How to create a New SPFx Web part in an existing project in SharePoint