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 },
How to create custom section layout options for SharePoint online modern site pages?
Hello Everyone, SharePoint provides default layout options below as mentioned in the screenshot. How can we create custom section layout options as per our needs? If there are any ways to create custom section layout options then please let me know your thoughts on the same. Can anyone help me with the same? Thanks
Code changes done in spfx react webpart doesn't reflect when tested using hosted workbench
Hi All, I have downloaded the spfx react webpart code from our team's GitHub repository and extracted into the location in my local machine , where Node JS [v10.24.1]and SharePoint generator [v1.11.0] are installed. I tested the code by running "gulp serve" and it works properly in hosted workbench. But when I make changes in the code, even the text output changes, then save it and test it similarly in Hosted workbench , by running "gulp build " and then " gulp serve" , I can't see the changes in the same webpart in the hosted workbench. My teammate tried the same process in her local machine, but in her case, it worked and changes were reflecting. Can anyone help me understand why this issue might be happening in my case? and how it can be resolved?
Fetch Data from on premise Database, SQL, Oracle, or SAP for SPFx adaptive card Extension
I am trying to achieve. looking for is how to retrieve and store data on a database system deployed on-premise, such as an SQL server, Oracle Database, or SAP solution which has its own database through the custom Viva Connections ACE(Adaptive Card Extension) card which I am trying to create. To give you an idea an example a customer has a locally deployed Leave Management solution that uses a local database let's say as an example an Oracle database. I am trying to connect the ACE card to that database to display the Leave information for an Employee in the card which will be added to the Viva connections Dashboard inside Microsoft Teams. And also the employee should be able to create new leave requests through the ACE card from Viva Connections inside Microsoft Teams.
how to get SP site contents list ?but getting blank values from SP in SPFX webpart
Hi Team, I am trying to get SP Site contents list (Get SP lists) using React component framework but getting blank Please find the below code file //this is WebPart Render method File public render(): void { const element: React.ReactElement<IGetSpListsProps> = React.createElement( GetSpLists, { description: this.properties.description, websiteUrl: this.context.pageContext.web.absoluteUrl }); ReactDom.render(element, this.domElement); } //Component Interface file export interface IGetSpListsProps { description: string; websiteUrl: string; } //Component TSX file export interface IGetSpListsState{ sitecontents: [{"Lists":""}] } export default class GetSpLists extends React.Component<IGetSpListsProps, IGetSpListsState> { static siteurl:string =""; //static member variable public constructor (props :IGetSpListsProps, state:IGetSpListsState ){ super(props); this.state={sitecontents: [{"Lists":""}]}; GetSpLists.siteurl=this.props.websiteUrl; } public componentDidMount() { let reactcontexthandiler= this; jquery.ajax({ url: `${GetSpLists.siteurl}/_api/web/lists?select=Title&$filter=Hidden eq true`, type:"GET", headers:{'Accept': 'application/json;odata=verbose;'}, success : function (resultData){ reactcontexthandiler.setState({sitecontents: resultData.d.results}); }, error: function (jqXHR, textStatus, errorthrown){ } }); } public render(): React.ReactElement<IGetSpListsProps> { return ( <div> <ol> { this.state.sitecontents.map(function(mylists,mylistitemkey){ return( <li> <span>{mylists.Lists}</span> </li>); }) } </ol> </div> );}} Please find the output which it shows for the above piece of code please assist me why it shows blankSharePoint List Item Person field only returns FieldId and FieldStringId
I have a list with a few columns that are Person columns. Below is a snippet without a select nor expand: const newHires = this._sp.web.lists.getById(${listId}).items<ListItem[]>(); const resolvedTasks = Promise.resolve(newHires); Two of my Person fields are called Manager and Dude. As you'll see from the screenshot, I only get DudeId and DudeStringId (ditto for Manager field). When I try the following: const newHires = this._sp.web.lists.getById(`${listId}`).items.select("Manager/Email").expand("Manager")<ListItem[]>(); I get the following 400 error: "odata.error":{"code":"-1, Microsoft.SharePoint.SPException","message":{"lang":"en-US","value":"The query to field 'Manager' is not valid. The $select query string must specify the target fields and the $expand query string must contains Manager." I've also checked in the library settings that the field name is indeed Manager.searching an External user in People picker and starting an invitation
I want to write code to search for non-existing external user email for next step giving me this email as suggestion for sending them an invitation. for example, there is a functionality by Standard SharePoint (the picture below) when you want to share the SharePoint site with some non- existing external user (OOB UI)
