Webpart list property using PNPJS
I am writing a simple web part. It takes a property of "List". The user will pick the list from a dropdown. I am using the tutorial found here: https://www.sharepointnutsandbolts.com/2016/09/sharepoint-framework-spfx-web-part-properties-dynamic-dropdown.html I have the following function that uses PNPJS to return an array of the lists on the site. protected fetchLists(): Array<IPropertyPaneDropdownOption> { let options: Array<IPropertyPaneDropdownOption> = new Array<IPropertyPaneDropdownOption>(); sp.web.lists.select('ID', 'Title', 'DefaultViewUrl').get().then(function(data) { for (let i = 0; i < data.length; i++) { if (data[i].DefaultViewUrl.includes('/Lists/')) { options.push({ key: data[i].Title, text: data[i].Title, }); } }) console.log(options); }); return options; } The above function is called in the getPropertyPaneConfiguration with the line: let lists: Array<IPropertyPaneDropdownOption> = this.fetchLists(); protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration { let lists: Array<IPropertyPaneDropdownOption> = this.fetchLists(); return { pages: [ { header: { description: this.description }, groups: [ { groupName: 'Properties', groupFields: [ PropertyPaneDropdown('list', { label: 'List', options: lists }), PropertyPaneTextField('field', { label: 'Field' }) ] } ] } ] } } The problem is the sp.web.lists... call is seen by the editor as not ways returning a value. I have tried to use the .then(function() {}) to return the array but the IDE still says not all paths return a value. How can I satisfy the IDE and still always get a return array (even if it is empty)?Getting error when updating multi-value metadata field
I am using PnPJS 2.3.0 updated code to update multi-value metadata field : await list.items.getById(itemId).update({ "My_x0020_Metadata_x0020_2": "-1#;Accountant|70edea16-6811-4e4f-ac27-8f1c567ad01e;#-1#;Designer|302dcafd-c992-4688-9f56-5e30c7e74b86;#-1#;Developer|7a139032-0898-4268-8917-64db96397d43;#-1#;Director|f1764c7b-f8b9-4fc0-a061-5f9403382311;#" }); Another code also : await list.items.getById(itemId).update({ "My_x0020_Metadata_x0020_2": "Accountant|70edea16-6811-4e4f-ac27-8f1c567ad01e;Designer|302dcafd-c992-4688-9f56-5e30c7e74b86;Developer|7a139032-0898-4268-8917-64db96397d43;Director|f1764c7b-f8b9-4fc0-a061-5f9403382311;" }); it is throwing error : error Error: Error making HttpClient request in queryable [400] ::> {"odata.error":{"code":"-1, Microsoft.SharePoint.Client.InvalidClientQueryException","message":{"lang":"en-US","value":"An unexpected 'PrimitiveValue' node was found when reading from the JSON reader. A 'StartObject' node was expected."}}} Thanks, Gaurav Goyal
Webpart not rendering filePicked utliizing PnP FilePicker
Hello, I am using SPfx PnP FilePicker property control. When I check the Edge developer tools, I can see the image being saved to SPO, but the image does not render within the webpart. Is there anyway someone can see if I am implementing something wrongly? Thank you! public render(): React.ReactElement<ICallingCardsProps> { const thumbRend = "https://media.akamai.odsp.cdn.office.net/uksouth1-mediap.svc.ms/transform/thumbnail?provider=url&inputFormat=jpg&docid="; let arr = this.props.CallingCards || []; if (this.props.CallingCards && this.props.CallingCards.length > 0) { var contacts = arr.map(el => <div className={`${styles.tile}`}> <div className={`${styles.galleryframe}`}> <img className={`${styles.galleryimg}`} key={el} src={el.filePicker.fileNameWithoutExtension == '' ? el.filePicker.fileAbsoluteUrl : ''} /> <div key={el}>{el.Name}</div> <div key={el}>{el.Email}</div> <div key={el}>{el.PhoneNumber}</div> </div> </div> ) } else { return ( <div className={`${styles.welcome}`}>Use property pane to create new Contact Cards!</div> ) } return ( <body style={{ height: '225px' }}> <div className={`${styles.grid}`}> {contacts} </div> </body> ); } private async uploadFiles(fileContent, fileName, FolderPath) { try { if (fileContent.size <= 10485760) { // small upload let result = await this.sp.web.getFolderByServerRelativePath(FolderPath).files.addUsingPath(FolderPath, fileContent.type, { Overwrite: true }); console.log(result); } else { // large upload let result = await this.sp.web.getFolderByServerRelativePath(FolderPath).files.addChunked(FolderPath, fileContent.type, data => { console.log(`progress`); }, true); } } catch (err) { // (error handling removed for simplicity) return Promise.resolve(false); } } { id: "filePicker", title: "Select File", type: CustomCollectionFieldType.custom, onCustomRender: (field, value, onUpdate, item, itemId, onError) => { return ( React.createElement(FilePicker, { key: itemId, context: this.context, buttonLabel: "Select File", onChange: async (filesPicked: IFilePickerResult[]) => { for (const filePicked of filesPicked) { const filePickedContent = await filePicked.downloadFileContent(); const folderPath = await filePicked.fileAbsoluteUrl this.uploadFiles(filePickedContent, filePicked.fileName, folderPath); console.log('onChange....', filesPicked) } }, onSave: async (filesPicked: IFilePickerResult[]) => { for (const filePicked of filesPicked) { const filePickedContent = await filePicked.downloadFileContent(); const folderPath = await filePicked.fileAbsoluteUrl this.uploadFiles(filePickedContent, filePicked.fileName, folderPath); } console.log('onSave....', filesPicked) } }) ); }, required: true },Why isn't the pnpjs sp object loading
Below is my code. It is not throwing any errors but the "sp" object is consistently empty. What am I doing wrong? import { sp } from "@pnp/sp"; export default class SharePointListWebPart extends BaseClientSideWebPart<ISharePointListWebPartProps> { protected onInit(): Promise<void> { return super.onInit().then (_ => { sp.setup({ spfxContext: this.context }); }); } public render(): void { let html = ''; console.log("Start"); console.log(sp); sp.web.lists.getByTitle('Staff').get().then(function(data){ for (var i = 0; i < data.length; i++) { console.log(data[i]); } }).catch(function(data){ console.log(data); }); console.log("End"); this.domElement.innerHTML = ` <div class="${ styles.sharePointList }"> ${ html } </div>`; }
