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:
This is the choice column:
And this is what the console says and how the dropdown render the choices:
Best regards
Americo