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 },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 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)?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>`; }
