SOLVED

Using dataprovider in SPFX app customizer?

%3CLINGO-SUB%20id%3D%22lingo-sub-328520%22%20slang%3D%22en-US%22%3EUsing%20dataprovider%20in%20SPFX%20app%20customizer%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-328520%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20a%20app%20customizer%20that%20shows%20a%20footer%20and%20in%20this%20footer%20there%20is%20a%20dropdown%20component%20that%20should%20get%20data%20from%20a%20sharepoint%20list.%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20dropdown%20component%20is%20the%20same%20that%20you%20can%20find%20in%20the%20microsoft%20fabric%20ui%20page%3A%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fen-us%2Ffabric%23%2Fcomponents%2Fdropdown%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%22%3EDropdown%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWhat%20I%20don't%20know%20is%20whow%20to%20create%20a%20dataprovider%20to%20fill%20the%20options%20property%20of%20the%20Dropdown%20component.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20took%20a%20look%20tho%20this%20sample%20%3A%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fspfx%2Fweb-parts%2Fget-started%2Fconnect-to-sharepoint%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%22%3Econnect%20to%20sharepoint%3C%2FA%3E%26nbsp%3Bwhere%20I%20can%20see%20how%20to%20use%26nbsp%3B%20mockupdata%20and%20loop%20through%20item%20with%20a%20forEach.%20The%20problem%20is%20that%20sample%20shows%20how%20to%20create%20a%20list%20and%20what%20I%20need%20is%20fill%20the%20options%20property%20of%20the%20Dropdown.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThis%20is%20how%20my%20code%20looks%20right%20now%3A%26nbsp%3B%3C%2FP%3E%3CP%3EFooterApplicationCustomizer.ts%3C%2FP%3E%3CDIV%3E%3CPRE%3E%3CSPAN%3Eimport%3C%2FSPAN%3E%20%3CSPAN%3E*%3C%2FSPAN%3E%20%3CSPAN%3Eas%3C%2FSPAN%3E%20%3CSPAN%3EReact%3C%2FSPAN%3E%20%3CSPAN%3Efrom%3C%2FSPAN%3E%20%3CSPAN%3E'react'%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3Eimport%3C%2FSPAN%3E%20%3CSPAN%3E*%3C%2FSPAN%3E%20%3CSPAN%3Eas%3C%2FSPAN%3E%20%3CSPAN%3EReactDOM%3C%2FSPAN%3E%20%3CSPAN%3Efrom%3C%2FSPAN%3E%20%3CSPAN%3E'react-dom'%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3Eimport%3C%2FSPAN%3E%3CSPAN%3E%20%7B%20%3C%2FSPAN%3E%3CSPAN%3Eoverride%3C%2FSPAN%3E%3CSPAN%3E%20%7D%20%3C%2FSPAN%3E%3CSPAN%3Efrom%3C%2FSPAN%3E%20%3CSPAN%3E'%40microsoft%2Fdecorators'%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3Eimport%3C%2FSPAN%3E%3CSPAN%3E%20%7B%20%3C%2FSPAN%3E%3CSPAN%3ELog%3C%2FSPAN%3E%3CSPAN%3E%20%7D%20%3C%2FSPAN%3E%3CSPAN%3Efrom%3C%2FSPAN%3E%20%3CSPAN%3E'%40microsoft%2Fsp-core-library'%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3Eimport%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20BaseApplicationCustomizer%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3EPlaceholderContent%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3EPlaceholderName%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%7D%20%3C%2FSPAN%3E%3CSPAN%3Efrom%3C%2FSPAN%3E%20%3CSPAN%3E'%40microsoft%2Fsp-application-base'%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3Eimport%3C%2FSPAN%3E%20%3CSPAN%3E*%3C%2FSPAN%3E%20%3CSPAN%3Eas%3C%2FSPAN%3E%20%3CSPAN%3Estrings%3C%2FSPAN%3E%20%3CSPAN%3Efrom%3C%2FSPAN%3E%20%3CSPAN%3E'FooterApplicationCustomizerStrings'%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3Eimport%3C%2FSPAN%3E%20%3CSPAN%3EFooter%3C%2FSPAN%3E%20%3CSPAN%3Efrom%3C%2FSPAN%3E%20%3CSPAN%3E'.%2Fcomponents%2FFooter'%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3Econst%3C%2FSPAN%3E%20%3CSPAN%3ELOG_SOURCE%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3Estring%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3E'FooterApplicationCustomizer'%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3Eexport%3C%2FSPAN%3E%20%3CSPAN%3Einterface%3C%2FSPAN%3E%20%3CSPAN%3EIFooterApplicationCustomizerProperties%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3Eexport%3C%2FSPAN%3E%20%3CSPAN%3Edefault%3C%2FSPAN%3E%20%3CSPAN%3Eclass%3C%2FSPAN%3E%20%3CSPAN%3EFooterApplicationCustomizer%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20extends%3C%2FSPAN%3E%20%3CSPAN%3EBaseApplicationCustomizer%3C%2FSPAN%3E%3CSPAN%3E%26lt%3B%3C%2FSPAN%3E%3CSPAN%3EIFooterApplicationCustomizerProperties%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%20%7B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%40%3C%2FSPAN%3E%3CSPAN%3Eoverride%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20public%3C%2FSPAN%3E%20%3CSPAN%3EonInit%3C%2FSPAN%3E%3CSPAN%3E()%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3EPromise%3C%2FSPAN%3E%3CSPAN%3E%26lt%3B%3C%2FSPAN%3E%3CSPAN%3Evoid%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%20%7B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20Log%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Einfo%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3ELOG_SOURCE%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3E%60Initialized%20%3C%2FSPAN%3E%3CSPAN%3E%24%7B%3C%2FSPAN%3E%3CSPAN%3Estrings%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3ETitle%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CSPAN%3E%60%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20let%3C%2FSPAN%3E%20%3CSPAN%3Eplaceholder%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3EPlaceholderContent%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20placeholder%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Econtext%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EplaceholderProvider%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EtryCreateContent%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3EPlaceholderName%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EBottom%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20const%3C%2FSPAN%3E%20%3CSPAN%3Eelem%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3EReact%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EcreateElement%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3EFooter%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20ReactDOM%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Erender%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3Eelem%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3Eplaceholder%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EdomElement%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20return%3C%2FSPAN%3E%20%3CSPAN%3EPromise%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eresolve%3C%2FSPAN%3E%3CSPAN%3E()%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FPRE%3E%3CP%3EThis%20is%20the%20Footer%20component%3A%20For%20this%20I%20have%20two%20versions%20and%20I%20don't%20know%20which%20one%20is%20better%20to%20use%3A%26nbsp%3B%3C%2FP%3E%3CP%3EV1%3A%26nbsp%3B%3C%2FP%3E%3CDIV%3E%3CPRE%3E%3CSPAN%3Eimport%3C%2FSPAN%3E%20%3CSPAN%3E*%3C%2FSPAN%3E%20%3CSPAN%3Eas%3C%2FSPAN%3E%20%3CSPAN%3EReact%3C%2FSPAN%3E%20%3CSPAN%3Efrom%3C%2FSPAN%3E%20%3CSPAN%3E'react'%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3Eimport%3C%2FSPAN%3E%3CSPAN%3E%20%7B%20%3C%2FSPAN%3E%3CSPAN%3EDropdown%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3EDropdownMenuItemType%3C%2FSPAN%3E%3CSPAN%3E%20%7D%20%3C%2FSPAN%3E%3CSPAN%3Efrom%3C%2FSPAN%3E%20%3CSPAN%3E%22office-ui-fabric-react%2Flib%2FDropdown%22%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3Eimport%3C%2FSPAN%3E%20%3CSPAN%3Estyles%3C%2FSPAN%3E%20%3CSPAN%3Efrom%3C%2FSPAN%3E%20%3CSPAN%3E'.%2FFooter.module.scss'%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3Econst%3C%2FSPAN%3E%20%3CSPAN%3Efooter%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%20(%3C%2FSPAN%3E%3CSPAN%3Eprops%3C%2FSPAN%3E%3CSPAN%3E)%20%3C%2FSPAN%3E%3CSPAN%3E%3D%26gt%3B%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20return%3C%2FSPAN%3E%3CSPAN%3E%20(%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%3C%2FSPAN%3E%3CSPAN%3Ediv%3C%2FSPAN%3E%20%3CSPAN%3EclassName%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7B%3C%2FSPAN%3E%3CSPAN%3Estyles%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Efooter%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3CBR%20%2F%3E%3C%2FSPAN%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%3C%2FSPAN%3E%3CSPAN%3Ediv%3C%2FSPAN%3E%20%3CSPAN%3EclassName%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7B%3C%2FSPAN%3E%3CSPAN%3Estyles%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Emain%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%3C%2FSPAN%3E%3CSPAN%3Ediv%3C%2FSPAN%3E%20%3CSPAN%3EclassName%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%22ms-Grid%22%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%3C%2FSPAN%3E%3CSPAN%3Ediv%3C%2FSPAN%3E%20%3CSPAN%3EclassName%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%22ms-Grid-row%22%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%3C%2FSPAN%3E%3CSPAN%3Ediv%3C%2FSPAN%3E%20%3CSPAN%3EclassName%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%22ms-Grid-col%20ms-sm6%20ms-md8%20ms-lg10%22%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%3C%2FSPAN%3E%3CSPAN%3Ep%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CSPAN%3Eother%20text%3C%2FSPAN%3E%3CSPAN%3E%3CSPAN%3Ep%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%3Ediv%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%3C%2FSPAN%3E%3CSPAN%3Ediv%3C%2FSPAN%3E%20%3CSPAN%3EclassName%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%22ms-Grid-col%20ms-sm6%20ms-md4%20ms-lg2%22%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%3C%2FSPAN%3E%3CSPAN%3EDropdown%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20placeHolder%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%22select%20an%20option%22%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20options%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7B%3C%2FSPAN%3E%3CSPAN%3E%5B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20%3C%2FSPAN%3E%3CSPAN%3Ekey%3A%3C%2FSPAN%3E%20%3CSPAN%3E'Header'%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3Etext%3A%3C%2FSPAN%3E%20%3CSPAN%3E'Actions'%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3EitemType%3A%3C%2FSPAN%3E%20%3CSPAN%3EDropdownMenuItemType%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EHeader%3C%2FSPAN%3E%3CSPAN%3E%20%7D%2C%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20%3C%2FSPAN%3E%3CSPAN%3Ekey%3A%3C%2FSPAN%3E%20%3CSPAN%3E'A'%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3Etext%3A%3C%2FSPAN%3E%20%3CSPAN%3E'Option%20a'%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3Etitle%3A%3C%2FSPAN%3E%20%3CSPAN%3E'I%20am%20option%20a.'%3C%2FSPAN%3E%3CSPAN%3E%20%7D%2C%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20%3C%2FSPAN%3E%3CSPAN%3Ekey%3A%3C%2FSPAN%3E%20%3CSPAN%3E'B'%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3Etext%3A%3C%2FSPAN%3E%20%3CSPAN%3E'Option%20b'%3C%2FSPAN%3E%3CSPAN%3E%20%7D%2C%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20%3C%2FSPAN%3E%3CSPAN%3Ekey%3A%3C%2FSPAN%3E%20%3CSPAN%3E'C'%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3Etext%3A%3C%2FSPAN%3E%20%3CSPAN%3E'Option%20c'%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3Edisabled%3A%3C%2FSPAN%3E%20%3CSPAN%3Etrue%3C%2FSPAN%3E%3CSPAN%3E%20%7D%2C%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20%3C%2FSPAN%3E%3CSPAN%3Ekey%3A%3C%2FSPAN%3E%20%3CSPAN%3E'D'%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3Etext%3A%3C%2FSPAN%3E%20%3CSPAN%3E'Option%20d'%3C%2FSPAN%3E%3CSPAN%3E%20%7D%2C%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%3Ediv%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%3Ediv%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%3Ediv%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%3CSPAN%3Ediv%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%3CSPAN%3Ediv%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20)%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3Eexport%3C%2FSPAN%3E%20%3CSPAN%3Edefault%3C%2FSPAN%3E%20%3CSPAN%3Efooter%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FPRE%3E%3CP%3EV2%3A%3C%2FP%3E%3CDIV%3E%3CPRE%3E%3CSPAN%3Eimport%20*%20as%20React%20from%20'react'%3B%3CBR%20%2F%3Eimport%20%7B%20Dropdown%2C%20DropdownMenuItemType%20%7D%20from%20%22office-ui-fabric-react%2Flib%2FDropdown%22%3B%3CBR%20%2F%3Eimport%20styles%20from%20'.%2FFooter.module.scss'%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3Eexport%20class%20Footer%20extends%20React.Component%26lt%3B%7B%7D%2C%20%7B%7D%26gt%3B%20%7B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20constructor(props%3A%20%7B%7D)%20%7B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20super(props)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%7D%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20public%20render()%3A%20JSX.Element%20%7B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20(%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CDIV%20classname%3D%22%7Bstyles.footer%7D%22%3E%3C%2FDIV%3E%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CDIV%20classname%3D%22%7Bstyles.main%7D%22%3E%3CBR%20%2F%3E%3C%2FDIV%3E%3C%2FSPAN%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CDIV%20classname%3D%22ms-Grid%22%3E%3C%2FDIV%3E%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CDIV%20classname%3D%22ms-Grid-row%22%3E%3C%2FDIV%3E%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CDIV%20classname%3D%22ms-Grid-col%20ms-sm6%20ms-md8%20ms-lg10%22%3E%3CBR%20%2F%3E%3C%2FDIV%3E%3C%2FSPAN%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CP%3EOther%20text%3C%2FP%3E%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FSPAN%3E%3C%2FPRE%3E%3C%2FDIV%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CDIV%20classname%3D%22ms-Grid-col%20ms-sm6%20ms-md4%20ms-lg2%22%3E%3C%2FDIV%3E%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CDROPDOWN%3E%3C%2FDROPDOWN%3E%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20placeHolder%3D%22select%20a%20option%22%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20options%3D%7B%5B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20key%3A%20'Header'%2C%20text%3A%20'Actions'%2C%20itemType%3A%20DropdownMenuItemType.Header%20%7D%2C%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20key%3A%20'A'%2C%20text%3A%20'Option%20a'%2C%20title%3A%20'I%20am%20option%20a.'%20%7D%2C%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20key%3A%20'B'%2C%20text%3A%20'Option%20b'%20%7D%2C%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20key%3A%20'C'%2C%20text%3A%20'Option%20c'%20%7D%2C%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20key%3A%20'D'%2C%20text%3A%20'Option%20d'%20%7D%2C%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20key%3A%20'E'%2C%20text%3A%20'Option%20e'%20%7D%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%7D%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%26gt%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FSPAN%3E%3C%2FDIV%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FSPAN%3E%3C%2FDIV%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E)%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%7D%3CBR%20%2F%3E%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20appreciate%20any%20help!%3C%2FP%3E%3CP%3EBest%20regards%3C%2FP%3E%3CP%3EAmerico%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-328520%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-329607%22%20slang%3D%22en-US%22%3ERe%3A%20Using%20dataprovider%20in%20SPFX%20app%20customizer%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-329607%22%20slang%3D%22en-US%22%3E%3CP%3EThanks!%3C%2FP%3E%3CP%3EThe%20listItemPicker%20doesn't%20fetch%20with%20the%20customer%20requirement%20but%20in%20the%20same%20page%20there%20is%20a%20ListPicker%20that%20I%20will%20give%20it%20a%20try.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%20ofr%20the%20link.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ERegards%3C%2FP%3E%3CP%3EAmerico%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-329507%22%20slang%3D%22en-US%22%3ERe%3A%20Using%20dataprovider%20in%20SPFX%20app%20customizer%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-329507%22%20slang%3D%22en-US%22%3E%3CP%3EI%20would%20suggest%20taking%20a%20look%20at%20the%20PnP%20SPFx%20Controls.%20They%20have%20a%20ListItemPicker%20control%20that%20does%20this%20for%20you.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fsharepoint.github.io%2Fsp-dev-fx-controls-react%2Fcontrols%2FListItemPicker%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fsharepoint.github.io%2Fsp-dev-fx-controls-react%2Fcontrols%2FListItemPicker%2F%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Regular Contributor

Hi,

 

I have a app customizer that shows a footer and in this footer there is a dropdown component that should get data from a sharepoint list. 

The dropdown component is the same that you can find in the microsoft fabric ui page: Dropdown

 

What I don't know is whow to create a dataprovider to fill the options property of the Dropdown component. 

 

I took a look tho this sample : connect to sharepoint where I can see how to use  mockupdata and loop through item with a forEach. The problem is that sample shows how to create a list and what I need is fill the options property of the Dropdown. 

 

This is how my code looks right now: 

FooterApplicationCustomizer.ts

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { override } from '@microsoft/decorators';
import { Log } from '@microsoft/sp-core-library';
import {
BaseApplicationCustomizer, PlaceholderContent, PlaceholderName
} from '@microsoft/sp-application-base';
import * as strings from 'FooterApplicationCustomizerStrings';
import Footer from './components/Footer';

const LOG_SOURCE: string = 'FooterApplicationCustomizer';

export interface IFooterApplicationCustomizerProperties {
}

export default class FooterApplicationCustomizer
extends BaseApplicationCustomizer<IFooterApplicationCustomizerProperties> {
@override
public onInit(): Promise<void> {
Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
let placeholder: PlaceholderContent;
placeholder = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Bottom);
const elem = React.createElement(Footer);
ReactDOM.render(elem, placeholder.domElement);
return Promise.resolve();
}
}

This is the Footer component: For this I have two versions and I don't know which one is better to use: 

V1: 

import * as React from 'react';
import { Dropdown, DropdownMenuItemType } from "office-ui-fabric-react/lib/Dropdown";
import styles from './Footer.module.scss';
const footer = (props) => {
return (
<div className={styles.footer}>
<div className={styles.main}>
<div className="ms-Grid">
<div className="ms-Grid-row">
<div className="ms-Grid-col ms-sm6 ms-md8 ms-lg10">
<p>other text</p>
</div>
<div className="ms-Grid-col ms-sm6 ms-md4 ms-lg2">
<Dropdown
placeHolder="select an option"
options={[
{ key: 'Header', text: 'Actions', itemType: DropdownMenuItemType.Header },
{ key: 'A', text: 'Option a', title: 'I am option a.' },
{ key: 'B', text: 'Option b' },
{ key: 'C', text: 'Option c', disabled: true },
{ key: 'D', text: 'Option d' },
]}
/>
</div>
</div>
</div>
</div>
</div>

)

}

export default footer;

V2:

import * as React from 'react';
import { Dropdown, DropdownMenuItemType } from "office-ui-fabric-react/lib/Dropdown";
import styles from './Footer.module.scss';


export class Footer extends React.Component<{}, {}> {
constructor(props: {}) {
super(props);
}

public render(): JSX.Element {
return (
<div className={styles.footer}>
<div className={styles.main}>
<div className="ms-Grid">
<div className="ms-Grid-row">
<div className="ms-Grid-col ms-sm6 ms-md8 ms-lg10">
<p>Other text</p>
</div>
<div className="ms-Grid-col ms-sm6 ms-md4 ms-lg2">
<Dropdown
placeHolder="select a option"
options={[
{ key: 'Header', text: 'Actions', itemType: DropdownMenuItemType.Header },
{ key: 'A', text: 'Option a', title: 'I am option a.' },
{ key: 'B', text: 'Option b' },
{ key: 'C', text: 'Option c' },
{ key: 'D', text: 'Option d' },
{ key: 'E', text: 'Option e' }
]}
/>
</div>
</div>
</div>
</div>
</div>
)
}
}

 

I appreciate any help!

Best regards

Americo

2 Replies
Highlighted
Solution

I would suggest taking a look at the PnP SPFx Controls. They have a ListItemPicker control that does this for you.

 

https://sharepoint.github.io/sp-dev-fx-controls-react/controls/ListItemPicker/

 

 

Highlighted

Thanks!

The listItemPicker doesn't fetch with the customer requirement but in the same page there is a ListPicker that I will give it a try.

 

Thanks ofr the link.

 

Regards

Americo