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>
Here is the method that render the Save and cancel controllers of the panel:
private _onRenderFooterContent = () => {
return (
<div>
<PrimaryButton onClick={this._showPanel} style={{ marginRight: '8px' }}>
Save
</PrimaryButton>
<DefaultButton onClick={this._hidePanel}>Cancel</DefaultButton>
</div>
);
};
and this is the one that create the item in the list:
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
