Forum Discussion
Newbie-stuck on Taxonomy in a form.
I'm pretty novice at programming in general, but this has been kicking my butt for 4 days now. I am trying to create a form that can attach a file, upload it to a document library, and update the metadata. The issue is that two of the fields are managed metadata... so I found the PnP Taxonomy Picker... I got it working, but I don't know how to take that data and update the field in the document library... I found this: Convert PnP TaxonomyPicker selection to update value - M365 Dev Blog (m365-dev.com)
...but I really can't figure out how to implement it in my code:
import * as React from 'react';
import styles from './UsaCitizenshipForm.module.scss';
import { IUsaCitizenshipFormProps,IPlayWithTaxonomyState } from './IUsaCitizenshipFormProps';
// import "@pnp/polyfill-ie11";
import { sp } from '@pnp/sp';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import { TaxonomyPicker, IPickerTerms } from "@pnp/spfx-controls-react/lib/TaxonomyPicker";
import { ListView, IViewField, SelectionMode } from "@pnp/spfx-controls-react/lib/ListView";
//import { escape } from '@microsoft/sp-lodash-subset'
const termsViewFields: IViewField[] = [
{
name: "key",
displayName: "Key",
sorting: true,
minWidth: 250,
},
{
name: "name",
displayName: "Name",
sorting: true,
minWidth: 150,
},
{
name: "path",
displayName: "Path",
sorting: true,
minWidth: 250,
},
{
name: "termSet",
displayName: "Term Set ID",
sorting: true,
minWidth: 250,
}
];
export default class UsaCitizenshipForm extends React.Component<IUsaCitizenshipFormProps, IPlayWithTaxonomyState> {
constructor(props: IUsaCitizenshipFormProps) {
super(props);
this.state = {
documentType: undefined,
dateToReview: '',
department: undefined,
successMessage: '',
terms: undefined
};
this.filesave = this.filesave.bind(this);
this.handleChange = this.handleChange.bind(this);
// this.handleDisabilityImpairment = this.handleDisabilityImpairment.bind(this);
this.resetForm = this.resetForm.bind(this);
this.validateForm = this.validateForm.bind(this);
}
// handle validation for candidateName Field
private validateForm() {
const { department } = this.state;
if (!department) {
alert('Please fill in all the required fields.');
return false;
}
return true;
}
// reset the field to initial state
private resetForm() {
const successMessage = this.state.successMessage; // store the success message
this.setState({
//documentType: '',
dateToReview: '',
//department: ''
});
const fileInput = document.getElementById('newfile') as HTMLInputElement;
if (fileInput) {
fileInput.value = '';
}
this.setState({ successMessage }); // set the success message back after resetting the form
}
//handle field submission
private async filesave() {
if (!this.validateForm()) {
return;
}
const myfile = (document.querySelector("#newfile") as HTMLInputElement).files[0];
const folderUrl = "/sites/MySite/Shared Documents";
const fileUrl = `${folderUrl}/${myfile.name}`;
try {
// Try to get the file by its server-relative URL
console.log("Trying to get the file by its server relative URL")
await sp.web.getFileByServerRelativeUrl(fileUrl).get();
alert(`File "${myfile.name}" already exists in the folder "${folderUrl}".`);
} catch (error) {
if (error.status === 404) {
if (myfile.size <= 10486760) {
sp.web.getFolderByServerRelativeUrl(folderUrl)
.files.addUsingPath(myfile.name, myfile)
.then(({ file }) => file.getItem()).then((item: any) => {
console.log("File Uploaded");
//f.file.getItem().then(item => {
return item.update({
//Title: "Metadata Updated",
DocType: this.state.documentType,
ReviewDate: this.state.dateToReview,
//Department: this.state.department,
}).then((myupdate: any) => {
console.log(myupdate);
console.log("Metadata Updated");
this.setState({ successMessage: 'Data saved successfully.' });
this.resetForm();
});
}).catch(console.log);
} else {
sp.web.getFolderByServerRelativeUrl(folderUrl)
.files.addUsingPath(myfile.name, myfile)
.then(({ file }) => file.getItem()).then((item: any) => {
console.log("File Uploaded");
return item.update({
//Title: "Metadata Updated",
DocType: this.state.documentType,
ReviewDate: this.state.dateToReview,
//Department: this.state.department,
}).then((myupdate: any) => {
console.log(myupdate);
console.log("Metadata Updated");
this.setState({ successMessage: 'Data saved successfully.' });
this.resetForm();
});
}).catch(console.log);
}
} else {
console.log(`Error while getting the file "${myfile.name}" at "${fileUrl}":`, error);
}
}
}
private handleChange(event: any) {
const target = event.target;
const value = target.value;
const name = target.name;
this.setState({
[name]: value
});
}
public render(): React.ReactElement<IUsaCitizenshipFormProps> {
const {
isDarkTheme,
hasTeamsContext,
userDisplayName
} = this.props;
const { successMessage } = this.state;
const {
terms
} = this.state;
return (
<section className={`${styles.usaCitizenshipForm} ${hasTeamsContext ? styles.teams : ''}`}>
<div className={styles.welcome}>
<img alt="" src={isDarkTheme ? require('../assets/welcome-dark.png') : require('../assets/welcome-light.png')} className={styles.welcomeImage} />
<h2>Hello, {userDisplayName}!</h2>
<h1 className='text-center fs-2 text-primary'>Upload Form</h1><br/>
{successMessage && <p className='fs-5 fw-semibold text-success'>{successMessage}</p>}
</div>
<div>
<h3>Here is the PnP Taxonomy Picker contol in action!</h3>
<div>
<TaxonomyPicker allowMultipleSelections={true}
termsetNameOrID="Department"
panelTitle="Select Department"
label="Department Picker"
context={this.props.context as any}
onChange={this.onTaxonomyPickerChange}
isTermSetSelectable={false} />
</div>
{/* Date Of Birth */}
<div className="form-group">
<label htmlFor="dateToReview" className="fs-6">Date to Review:</label>
<input type="date" className="form-control" id="dateToReview" name="dateToReview" value={this.state.dateToReview} onChange={this.handleChange} />
</div>
{/* Upload file */}
<div className="mb-3">
<label htmlFor="formFile" className="form-label fs-6">Upload Identity Proof:</label><br />
<input className="form-control" type="file" name="myFile" id="newfile"></input>
</div>
<div>
<button className="btn btn-primary" type='submit' onClick={this.filesave}>
Submit
</button>
</div>
{ terms && terms.length > 0 ?
<div>
<h3>Here are the selected terms:</h3>
<div>
<ListView
items={terms}
viewFields={termsViewFields}
compact={true}
selectionMode={SelectionMode.none}
showFilter={false}
stickyHeader={true} />
</div>
</div>
: null
}
</div>
</section>
);
}
private onTaxonomyPickerChange = (terms : IPickerTerms) => {
this.setState({
terms: terms
});
}
}
No RepliesBe the first to reply
