Apr 09 2019 04:26 AM
Hi
I am building an web part in sharepoin online that render data from a list.
All the rendering is working fine, now I want to go to the next level and allow the user create new items direct from the web part.
For that I am using the Panel component that render a serie of text and dropdown components.
Beside that I have a method that create the new item in the list.
what I need help with is find the way to pass the data that the user write to the method that create the item.
This is how the panel looks like:
<Panel
isOpen={this.state.showPanel}
type={PanelType.medium}
onDismiss={this._hidePanel}
headerText="Create new agreement"
closeButtonAriaLabel="Close"
onRenderFooterContent={this._onRenderFooterContent}
>
<div>
<Label>Customer Agreement Nr:</Label>
<TextField underlined placeholder="Enter a number" />
<Dropdown
placeholder="Select an option"
label="Agreement type"
options={[
{ key: 'CustomerAgreement', text: 'Customer Agreement' },
{ key: 'PartnerAgreement', text: 'Partner Agreement' },
{ key: 'SubcontractorAgreement', text: 'Subcontractor Agreement' },
]}
onRenderCaretDown={this._onRenderCaretDown} />
</div>
</Panel>
private _onRenderFooterContent = () => {
return (
<div>
<PrimaryButton onClick={this._showPanel} style={{ marginRight: '8px' }}>
Save
</PrimaryButton>
<DefaultButton onClick={this._hidePanel}>Cancel</DefaultButton>
</div>
);
};
private _createItem(): void {
sp.web.lists.getByTitle('Agreement Database').items.add({
'Title': `From form`
}).then((result: ItemAddResult): void => {
const item: IList = result.data as IList;
console.log(`Item created: '${item.Title}'` );
}, (error: any): void => {
console.log('Error: ' + error);
});
}
So my question is how can I pass the text written by the user in the textfield component or the value choosed in the dropdown component to the _createItem() method?
Best regards
Americo
Apr 09 2019 12:47 PM
@Americo Perez You would need to maintain the values of the options inside the state of your react component. Create an object on your state to store the values of the store, and update those values using events when a user makes changes to the form.
Here is a post around this
https://www.codementor.io/blizzerand/building-forms-using-react-everything-you-need-to-know-iz3eyoq4...
Apr 10 2019 11:13 PM