spfx webparts – PnP Modern Search Issue

I have downloaded the latest package (.sspkg) for PnP Modern Search and uploaded it on to SharePoint online. I have configured it and it works well on my end. Another user is getting this issue:

(SPLoaderError.loadComponentError) There was a network problem. This may be a problem with the HTTPS certificate. Make sure you have the right certificate.

Is there a way to correct this issue?

spfx webparts – SPO permissions for web-part page that uses restricted lists and libraries

I have created a web-part page containing a web-part that reads, updates and deletes items from lists and libraries. I have created a group and linked it to a custom permission level that has the following permissions:

  • Add Items
  • Edit Items
  • Delete Items
  • View Items
  • View Application Pages
  • View Pages
  • Open

I have then added a generic user account to this group. The idea is that anyone using this account can use the web-part page to access/manage the information. This works as designed.

The problem however, is that the user could just as well access Site Contents, or SomeList/AllItems.aspx, SomeLibrary/AllItems.aspx and manipulate the information without having to use the web-part. I would like to restrict this access.

So are there ways by which I could allow a web-part to access/manipulate the underlying lists and libraries but restrict the user using the web-part from doing so as well as from accessing the Site Contents?

Thank you in advance.

javascript – SPFx – Update a calculated column formula

I am trying to use this.context.spHttpClient.post() to update a calculated column formula in my SPFx WebPart.

I get a status code of 400 with the error message: “The parameter __metadata does not exist in method GetByTitle.”

I have created the following function to perform this operation:

private _setCalculatedColumn(ListURL: string, ListTitle: string): void{
    const body: ISPHttpClientOptions = {
        body: `{'__metadata':{'type':'SP.FieldCalculated'},'Formula':'(my new formula)'}`

        ListURL + `/_api/web/Lists/GetByTitle('`+ ListTitle +`')/Fields/GetByTitle('AutoTaskDueDate')`, 
        .then((response: SPHttpClientResponse) => {
            console.log(`Status code: ${response.status}`);
            console.log(`Status text: ${response.statusText}`);

            //response.json() returns a promise so you get access to the json in the resolve callback.
            response.json().then((responseJSON: JSON) => {

I have found an example using Microsoft Flow but that is the closest I can find to updating a formula via a POST request.

I have changed around the body string and get a similar error message.


sharepoint online – object Object error in SPfx

Trying below code to read Sitecolumn but getting value as (object Object) OnClick Function


              public render(): React.ReactElement<IAutomationProps> 
                return (
                  <div style={divStyle} >

                    aria-label={items.RatingCount} styles={cardStyles} 
                    <DocumentCardImage height={150} imageFit={ImageFit.cover} imageSrc={items.Picture? items.Picture("Url") : ''} />
                      <DocumentCardTitle title={items.Title} shouldTruncate />
                       <label >{items.RatingCount}</label>
                  </DocumentCard> );

pnp – How can we call oneDrive data into SPFx webpart, which is hosted in SharePoint site?

Yes you can get the data from onedrive into SPFx, you can try graph API
Below link will help you getting started.

If you want to explore what all can be achieved with Graph API below link will list APIs

ex. To get All items you have “/drive/items/{item-id}”

You will need to have proper premissions for your code to access graph API in SPFx.

sharepoint online – SPFX application extension to redirect user to home page if User doesn’t has appropriate permission

Stack Exchange Network

Stack Exchange network consists of 177 Q&A communities including Stack Overflow, the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Visit Stack Exchange

javascript – Add Dynamic Property Panes to SPFX

I know this has been asked 1000 times, but i’ve tried everything in the first 2 pages of google so i’ve decided to come to you guys for help.

I’m trying to create some dynamically added property panes.
I’ll have a column (on my sharepoint webpart) with a few tiles. I want to add different options for those tiles and i want to add the ability to add a tile with a button in the property pane.
I’ve tried with arrays and such, but thats not the point.

I’m working on SPFX 1.6.0 with React (15.6 i think its the latest for spfx)

The point is i am unable to add a propertypane dynamically. I checked out this code -> https://www.c-sharpcorner.com/article/render-spfx-properties-pane-based-on-list-data/

And came up with a little test:

let myArray : any;
myArray.push(PropertyPaneTextField(someID.toString(), {  
                label: someLabel

And then in my

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {

I added something like this ->

    return {
      pages: (
          header: {
            description: strings.PropertyPaneDescription
          groups: (
              groupName: strings.BasicGroupName,
              groupFields: (
              {.....BUTTON HERE....},

Once again, this is not the actual code!

The error that comes up in my console is something like “can’t get ‘type’ of undefined’. But i am console logging the array and some objects do exist in it…

I’ll update my question tomorrow with the actual code from my webpart, but it was so damn frustrating that i had to ask.

Thanks in advance.

EDIT: Adding the actual code below ->

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {

const displayApps = () => {
  var self = this;
  if (this.properties.itemArray === undefined) {
    this.properties.itemArray = ();
  if (this.properties.itemArray.length > 0) {
    for (let x = 0; x < this.properties.itemArray.length; x++) {
      return this.properties.itemArray(x);
  else {
    return (this.properties.itemArray.push(PropertyPaneTextField('0', {
      label: "First App"

And for displaying i’m trying ->

          groupFields: (
            PropertyFieldButtonWithCallout('addAppsButton', {
              calloutTrigger: CalloutTriggers.Click,
              key: 'buttonWithCalloutFieldId',
              calloutContent: React.createElement('p', {}, 'Tests connection to the database with the parameters listed above'),
              calloutWidth: 150,
              text: 'Add App',
              onClick: () => { addApps(); }

If i add the array directly it won’t be able to display all PropertyPanes that are saved in it (sine it will be an array of object i assume it needs a foreach or a for loop).

EDIT2: Ok so i’ve got rid of the “undefined” problem. This is my array ->

enter image description here

My webpart has no errors, but no PropertyPaneTextField is displayed either.
I even tried an onclick function to refresh the pane by using this.context.propertyPane.refresh();

If i use the array with a target ex: myArray(0) i do see a field.
How were other people able to simply drop the array of object inside groupFields and have it render all of them? Every example that i’ve looked at does that. They create an array by using :any and array.push and then add it to groupFields.

I am on SPFX 1.6.0. Is there a different way to do t now or what am i missing?

sharepoint enterprise – Update List Item SPfx not working

Below is the code, which is not working, shows below error

An unexpected ‘PrimitiveValue’ node was found when reading from the JSON reader. A ‘StartObject’ node was expected.

 const body: string = {
                    '__metadata': { 'type': 'SP.Data.InputsListItem' }, 'IsMapped': true
        headers: {
          'Accept': 'application/json;odata=nometadata',
          'Content-type': 'application/json;odata=verbose',
          'odata-version': '',
          'IF-MATCH': '*',
          'X-HTTP-Method': 'MERGE'
        body: JSON.stringify(body)
  .then((response: SPHttpClientResponse): void => {
      status: `Item with ID: ${latestItemId} successfully updated`,
      items: ()
  }, (error: any): void => {
      status: `Error updating item: ${error}`,
      items: ()

sharepoint online – What is the use of WebPartContext in SPFx?

I am writing an SPfx, I have used React, PNPJS. I created a service class, which will be responsible to communicate with Sharepoint. Below is the snippet of the code.

export class service implements ICrudService {
getListName: string;
private _listItems: IListItems() = ();

constructor( listName: string) {
    this.getListName = listName;
     sp.setup({ //this is line 1
        spfxContext: context, //this is line 2

     });// this is line 3

async UpdateDataToList(_items: IListItems) {
    let items: any() = ();
    this.GetDataById(_items.ID).then((i) => {
        items = i;


Previously, I was passing my web part context in the service constructor, and the code seems to be working fine.

const (_service) = React.useState(new service(props.context, props.listName));

I remove the context from service above, (//this is line 1 to this is line 3) and modified my service call accordingly,

const (_service) = React.useState(new service(props.listName));

Strangely, this code is still working fine and I am able to do the CRUD operations. My question is, what is the use of WebPartContext? Why do I care about it? can I omit it? Or If I use REST API, then only I need the context? Please Clarify.