Home

How to get the choices of a choice column?

%3CLINGO-SUB%20id%3D%22lingo-sub-499332%22%20slang%3D%22en-US%22%3EHow%20to%20get%20the%20choices%20of%20a%20choice%20column%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-499332%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20am%20trying%20to%20create%20a%20spfx%20web%20part%20that%20shows%20a%20dropown%20with%20the%20choices%20of%20a%20choice%20column.%3C%2FP%3E%3CP%3EI%20have%20a%20choice%20column%20with%20following%20choices%20value%3A%20choice%201%2C%20choice%202%2C%20choice%203.%3C%2FP%3E%3CP%3EWhat%20I%20want%20to%20do%20is%20using%20the%20Dropdown%20component%20from%20fabric%20ui%20show%20the%20value%20of%20the%20column%20as%20options%20and%20when%20the%20user%20choose%20one%20value%2C%20save%20it%20in%20the%20choice%20column%20of%20the%20list.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20tried%20by%20fetching%20the%20choices%20from%20the%20choice%20field%20like%20this%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CDIV%3E%3CPRE%3E%3CSPAN%3Eprivate%3C%2FSPAN%3E%20%3CSPAN%3ElistTitle%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3E%22GetChoices%22%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3Epublic%3C%2FSPAN%3E%20%3CSPAN%3Easync%3C%2FSPAN%3E%20%3CSPAN%3EgetListItems%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%3EIChoice%3C%2FSPAN%3E%3CSPAN%3E%5B%5D%26gt%3B%20%7B%3C%2FSPAN%3E%3CBR%20%2F%3E%20%20%20%20%20%20%20%3CSPAN%3Elet%3C%2FSPAN%3E%20%3CSPAN%3EChoicesCollection%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3EIChoice%3C%2FSPAN%3E%3CSPAN%3E%5B%5D%20%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%20%5B%5D%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%20%20%20%20%20%20%20%3CSPAN%3Econst%3C%2FSPAN%3E%20%3CSPAN%3Eitems%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3Eawait%3C%2FSPAN%3E%20%3CSPAN%3Esp%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eweb%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Elists%3C%2FSPAN%3E%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20%20%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EgetByTitle%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3ElistTitle%3C%2FSPAN%3E%3CSPAN%3E)%3C%2FSPAN%3E%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20%20%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Efields%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EgetByInternalNameOrTitle%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E'Choices'%3C%2FSPAN%3E%3CSPAN%3E)%3C%2FSPAN%3E%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20%20%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eselect%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E'Choices%2CID'%3C%2FSPAN%3E%3CSPAN%3E)%3C%2FSPAN%3E%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20%20%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eget%3C%2FSPAN%3E%3CSPAN%3E()%3C%2FSPAN%3E%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20%20%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Ethen%3C%2FSPAN%3E%3CSPAN%3E((%3C%2FSPAN%3E%3CSPAN%3Edata%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%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%3EChoicesCollection%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Epush%3C%2FSPAN%3E%3CSPAN%3E(%7B%3C%2FSPAN%3E%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%3EKey%3A%3C%2FSPAN%3E%20%3CSPAN%3Edata%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EID%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%3EChoices%3A%3C%2FSPAN%3E%20%3CSPAN%3Edata%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EChoices%3C%2FSPAN%3E%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20%3CSPAN%3E%7D)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%7D)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3Econsole%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Elog%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3EChoicesCollection%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3Ereturn%3C%2FSPAN%3E%20%3CSPAN%3Enew%3C%2FSPAN%3E%20%3CSPAN%3EPromise%3C%2FSPAN%3E%3CSPAN%3E%26lt%3B%3C%2FSPAN%3E%3CSPAN%3EIChoice%3C%2FSPAN%3E%3CSPAN%3E%5B%5D%26gt%3B(%3C%2FSPAN%3E%3CSPAN%3Easync%3C%2FSPAN%3E%20%3CSPAN%3Eresolve%3C%2FSPAN%3E%20%3CSPAN%3E%3D%26gt%3B%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3CBR%20%2F%3E%20%20%20%20%3CSPAN%3Eresolve%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3EChoicesCollection%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%7D)%3B%3C%2FSPAN%3E%3C%2FPRE%3E%3C%2FDIV%3E%3CP%3EBut%20something%20is%20wrong%20with%20this%20because%20the%20response%20of%20the%20console.log%20gives%20me%20two%20arrays%2C%20one%20for%20the%20choices%20text%20value%20and%20other%20one%20for%20the%20key%20values.%3C%2FP%3E%3CP%3EIn%20the%20image%20is%20inside%20the%20blue%20mark.%3C%2FP%3E%3CP%3EThe%20dropdown%20is%20getting%20the%20values%20from%20the%20text%20array%20but%20it%20is%20showing%20them%20in%20a%20single%20line.%3C%2FP%3E%3CP%3EIn%20the%20image%20is%20inside%20the%20red%20mark%20and%20the%20dropdown%20result%20is%20in%20the%20yellow%20mark.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EFor%20rending%20the%20values%20that%20I%20get%20from%20the%20choice%20field%20in%20the%20dropdown%20I%20am%20using%20this%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%3Eimport%20*%20as%20React%20from%20'react'%3B%3CBR%20%2F%3Eimport%20styles%20from%20'.%2FChoices.module.scss'%3B%3CBR%20%2F%3Eimport%20%7B%20IChoicesProps%20%7D%20from%20'.%2FIChoicesProps'%3B%3CBR%20%2F%3Eimport%20%7B%20escape%20%7D%20from%20'%40microsoft%2Fsp-lodash-subset'%3B%3CBR%20%2F%3Eimport%20%7B%20IChoice%20%7D%20from%20%22..%2F..%2F..%2Fdataprovider%2FContentDataProvider%22%3B%3CBR%20%2F%3Eimport%20%7B%20IChoiceState%20%7D%20from%20%22.%2FIChoicesState%22%3B%3CBR%20%2F%3Eimport%20%7B%20default%20as%20pnp%2C%20ItemAddResult%20%7D%20from%20%22sp-pnp-js%22%3B%3CBR%20%2F%3Eimport%20*%20as%20moment%20from%20'moment'%3B%3CBR%20%2F%3E%3CBR%20%2F%3Eimport%20%7B%20ListView%2C%20IViewField%2C%20GroupOrder%2C%20IGrouping%20%7D%20from%20%22%40pnp%2Fspfx-controls-react%2Flib%2FListView%22%3B%3CBR%20%2F%3E%3CBR%20%2F%3Eimport%20%7B%20Panel%2C%20PanelType%20%7D%20from%20'office-ui-fabric-react%2Flib%2FPanel'%3B%3CBR%20%2F%3Eimport%20%7B%20Dropdown%2C%20DropdownMenuItemType%2C%20IDropdownOption%2C%20IDropdownProps%20%7D%20from%20'office-ui-fabric-react%2Flib%2FDropdown'%3B%3CBR%20%2F%3Eimport%20%7B%20DefaultButton%2C%20PrimaryButton%2C%20IButtonProps%20%7D%20from%20'office-ui-fabric-react%2Flib%2FButton'%3B%3CBR%20%2F%3Eimport%20%7B%20Icon%20%7D%20from%20'office-ui-fabric-react%2Flib%2FIcon'%3B%3CBR%20%2F%3E%3CBR%20%2F%3Eexport%20default%20class%20Choices%20extends%20React.Component%3CICHOICESPROPS%3E%20%7B%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20constructor(props%3A%20IChoicesProps)%20%7B%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20super(props)%3B%3CBR%20%2F%3E%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.state%20%3D%20%7B%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20choices%3A%20%5B%5D%2C%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20choice%3A%20undefined%2C%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20choicesselectedItems%3A%20this._choices%2C%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20showPanel%3A%20false%2C%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20this._handleChoices%20%3D%20this._handleChoices.bind(this)%3B%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20%20%20%7D%3CBR%20%2F%3E%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20public%20componentDidMount()%3A%20void%20%7B%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20this.props.provider.getListItems().then((choicesselectedItems%3A%20IChoice%5B%5D)%20%3D%26gt%3B%20%7B%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20choicesselectedItems.map(item%20%3D%26gt%3B%20%7B%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this._choices.push(%7B%3CBR%20%2F%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%20key%3A%20item.Key%2C%3CBR%20%2F%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%20text%3A%20item.Choices%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.setState(%7B%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20choicesselectedItems%3A%20this._choices%2C%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%7D%3CBR%20%2F%3E%20%20%20%20%20%20%20%20private%20_choices%3A%20IDropdownOption%5B%5D%20%3D%20%5B%5D%3B%3CBR%20%2F%3E%3CBR%20%2F%3E%20%20%20%20%20%20%20public%20render()%3A%20React.ReactElement%3CICHOICESPROPS%3E%20%7B%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20%20const%20%7B%20choice%20%7D%20%3D%20this.state%3B%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20%20console.log(this.state.choicesselectedItems)%3B%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20%20return%20(%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CDIV%20classname%3D%22%7B%22%20styles.choices%3D%22%22%3E%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CDIV%20classname%3D%22%7B%22%20styles.container%3D%22%22%3E%3CBR%20%2F%3E%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%7B%22%20styles.row%3D%22%22%3E%3CBR%20%2F%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%3CDIV%20classname%3D%22%7B%22%20styles.column%3D%22%22%3E%3CBR%20%2F%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%3CDEFAULTBUTTON%3E%3CBR%20%2F%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%20data-automation-id%3D%22test%22%3CBR%20%2F%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%20text%3D%22Create%20new%20agreement%22%3CBR%20%2F%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%20onClick%3D%7Bthis._showPanel%7D%3CBR%20%2F%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%2F%26gt%3B%3CBR%20%2F%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%3CPANEL%3E%3CBR%20%2F%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%20isOpen%3D%7Bthis.state.showPanel%7D%3CBR%20%2F%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%20type%3D%7BPanelType.medium%7D%3CBR%20%2F%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%20onDismiss%3D%7Bthis._hidePanel%7D%3CBR%20%2F%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%20headerText%3D%22Create%20new%20agreement%22%3CBR%20%2F%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%20closeButtonAriaLabel%3D%22Close%22%3CBR%20%2F%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%20onRenderFooterContent%3D%7Bthis._onRenderFooterContent%7D%3CBR%20%2F%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%26gt%3B%3CBR%20%2F%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%3CDROPDOWN%3E%3CBR%20%2F%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%20placeHolder%3D%22Select%20agreement%20type%22%3CBR%20%2F%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%20label%3D%22Agreement%20type%22%3CBR%20%2F%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%20id%3D%22component%22%3CBR%20%2F%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%20selectedKey%3D%7Bchoice%20%3F%20choice.key%20%3A%20null%7D%3CBR%20%2F%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%20options%3D%7Bthis.state.choicesselectedItems%7D%3CBR%20%2F%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%20onChanged%3D%7Bthis._handleChoices%7D%3CBR%20%2F%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%20onRenderCaretDown%3D%7Bthis._onRenderCaretDown%7D%3CBR%20%2F%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%2F%26gt%3B%3CBR%20%2F%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%3C%2FDROPDOWN%3E%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FPANEL%3E%3C%2FDEFAULTBUTTON%3E%3C%2FDIV%3E%3CBR%20%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FDIV%3E%3CBR%20%2F%3E%20%20%20%20%20%20%3C%2FDIV%3E%3CBR%20%2F%3E%3C%2FDIV%3E%3CBR%20%2F%3E)%3B%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%3CBR%20%2F%3Eprivate%20_showPanel%20%3D%20()%20%3D%26gt%3B%20%7B%3CBR%20%2F%3Ethis.setState(%7B%20showPanel%3A%20true%20%7D)%3B%3CBR%20%2F%3E%7D%3B%3CBR%20%2F%3E%3CBR%20%2F%3Eprivate%20_hidePanel%20%3D%20()%20%3D%26gt%3B%20%7B%3CBR%20%2F%3Ethis.setState(%7B%20showPanel%3A%20false%20%7D)%3B%3CBR%20%2F%3E%7D%3B%3CBR%20%2F%3E%3CBR%20%2F%3Eprivate%20_handleChoices%20%3D%20(item%3A%20IDropdownOption)%3A%20void%20%3D%26gt%3B%20%7B%3CBR%20%2F%3E%20%20%20console.log('here%20is%20the%20things%20updating...'%20%2B%20item.key%20%2B%20'%20'%20%2B%20item.text)%3B%3CBR%20%2F%3E%20%20%20%20return%20this.setState(%7B%20choice%3A%20item%20%7D)%3B%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%3CBR%20%2F%3Eprivate%20_onRenderFooterContent%20%3D%20()%20%3D%26gt%3B%20%7B%3CBR%20%2F%3Ereturn%20(%3CBR%20%2F%3E%3CDIV%3E%3CBR%20%2F%3E%3CPRIMARYBUTTON%20onclick%3D%22%7Bthis._createItem%7D%22%20style%3D%22%7B%7B%22%3ESave%3C%2FPRIMARYBUTTON%3E%3CBR%20%2F%3E%3CDEFAULTBUTTON%20onclick%3D%22%7Bthis._hidePanel%7D%22%3ECancel%3C%2FDEFAULTBUTTON%3E%3CBR%20%2F%3E%3C%2FDIV%3E%3CBR%20%2F%3E)%3B%3CBR%20%2F%3E%7D%3B%3CBR%20%2F%3E%3CBR%20%2F%3Eprivate%20_createItem()%3A%20void%20%7B%3CBR%20%2F%3E%3CBR%20%2F%3Epnp.sp.web.lists.getByTitle(%22Agreement%20Database%22).items.add(%7B%3CBR%20%2F%3EChoices%3A%20this.state.choice.key%3CBR%20%2F%3E%7D)%3B%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%3CBR%20%2F%3Eprivate%20_onRenderCaretDown%20%3D%20(props%3A%20IDropdownProps)%3A%20JSX.Element%20%3D%26gt%3B%20%7B%3CBR%20%2F%3Ereturn%20%3CICON%20iconname%3D%22ChevronDown%22%3E%3C%2FICON%3E%3B%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%7D%3C%2FICHOICESPROPS%3E%3C%2FICHOICESPROPS%3E%3C%2FPRE%3E%3CP%3EWhich%20is%20the%20right%20way%20to%20fetch%20the%20choices%20values%2C%20show%20them%20in%20the%20dropdown%20and%20save%20the%20choosed%20value%20to%20in%20the%20list%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThis%20is%20a%20image%20from%20the%20list.%20The%20marked%20column%20is%20the%20choice%20column%20where%20the%20values%20for%20the%20dropdown%20resides%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F110939i475EDFE5E6D7A68C%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22list.PNG%22%20title%3D%22list.PNG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThis%20is%20the%20choice%20column%3A%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20362px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F110940i2DB6DED16592336F%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22Column.PNG%22%20title%3D%22Column.PNG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAnd%20this%20is%20what%20the%20console%20says%20and%20how%20the%20dropdown%20render%20the%20choices%3A%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F110941iFB32AEADE7700DA7%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22Capture.PNG%22%20title%3D%22Capture.PNG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EBest%20regards%3C%2FP%3E%3CP%3EAmerico%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-499332%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EPnP%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Americo Perez
Regular Contributor

Hi,

 

I am trying to create a spfx web part that shows a dropown with the choices of a choice column.

I have a choice column with following choices value: choice 1, choice 2, choice 3.

What I want to do is using the Dropdown component from fabric ui show the value of the column as options and when the user choose one value, save it in the choice column of the list.

 

I tried by fetching the choices from the choice field like this:

 

private listTitle = "GetChoices";
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);
});

But something is wrong with this because the response of the console.log gives me two arrays, one for the choices text value and other one for the key values.

In the image is inside the blue mark.

The dropdown is getting the values from the text array but it is showing them in a single line.

In the image is inside the red mark and the dropdown result is in the yellow mark.

 

For rending the values that I get from the choice field in the dropdown I am using this:

 

import * as React from 'react';
import styles from './Choices.module.scss';
import { IChoicesProps } from './IChoicesProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { IChoice } from "../../../dataprovider/ContentDataProvider";
import { IChoiceState } from "./IChoicesState";
import { default as pnp, ItemAddResult } from "sp-pnp-js";
import * as moment from 'moment';

import { ListView, IViewField, GroupOrder, IGrouping } from "@pnp/spfx-controls-react/lib/ListView";

import { Panel, PanelType } from 'office-ui-fabric-react/lib/Panel';
import { Dropdown, DropdownMenuItemType, IDropdownOption, IDropdownProps } from 'office-ui-fabric-react/lib/Dropdown';
import { DefaultButton, PrimaryButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
import { Icon } from 'office-ui-fabric-react/lib/Icon';

export default class Choices extends React.Component<IChoicesProps, IChoiceState> {
constructor(props: IChoicesProps) {
super(props);

this.state = {
choices: [],
choice: undefined,
choicesselectedItems: this._choices,
showPanel: false,
}
this._handleChoices = this._handleChoices.bind(this);
}

public componentDidMount(): void {
this.props.provider.getListItems().then((choicesselectedItems: IChoice[]) => {
choicesselectedItems.map(item => {
this._choices.push({
key: item.Key,
text: item.Choices
});
});
this.setState({
choicesselectedItems: this._choices,
});
});
}
private _choices: IDropdownOption[] = [];

public render(): React.ReactElement<IChoicesProps> {
const { choice } = this.state;
console.log(this.state.choicesselectedItems);
return (
<div className={ styles.choices }>
<div className={ styles.container }>
<div className={ styles.row }>
<div className={ styles.column }>
<DefaultButton
data-automation-id="test"
text="Create new agreement"
onClick={this._showPanel}
/>
<Panel
isOpen={this.state.showPanel}
type={PanelType.medium}
onDismiss={this._hidePanel}
headerText="Create new agreement"
closeButtonAriaLabel="Close"
onRenderFooterContent={this._onRenderFooterContent}
>
<Dropdown
placeHolder="Select agreement type"
label="Agreement type"
id="component"
selectedKey={choice ? choice.key : null}
options={this.state.choicesselectedItems}
onChanged={this._handleChoices}
onRenderCaretDown={this._onRenderCaretDown}
/>
</Panel>
</div>
</div>
</div>
</div>
);
}

private _showPanel = () => {
this.setState({ showPanel: true });
};

private _hidePanel = () => {
this.setState({ showPanel: false });
};

private _handleChoices = (item: IDropdownOption): void => {
console.log('here is the things updating...' + item.key + ' ' + item.text);
return this.setState({ choice: item });
}

private _onRenderFooterContent = () => {
return (
<div>
<PrimaryButton onClick={this._createItem} style={{ marginRight: '8px' }}>Save</PrimaryButton>
<DefaultButton onClick={this._hidePanel}>Cancel</DefaultButton>
</div>
);
};

private _createItem(): void {

pnp.sp.web.lists.getByTitle("Agreement Database").items.add({
Choices: this.state.choice.key
});
}

private _onRenderCaretDown = (props: IDropdownProps): JSX.Element => {
return <Icon iconName="ChevronDown" />;
}
}

Which is the right way to fetch the choices values, show them in the dropdown and save the choosed value to in the list?

 

This is a image from the list. The marked column is the choice column where the values for the dropdown resides:

 

list.PNG

 

This is the choice column:

Column.PNG

 

And this is what the console says and how the dropdown render the choices:

Capture.PNG

 

Best regards

Americo