react – SPFX MSGraphClient – Cannot read property & # 39; id & # 39; from undefined

I have this problem calling recent and shared OneDrive files using MS Graph Client in my modern webpart

Type of error not captured (in promise): property cannot be read & # 39; id & # 39; from undefined

I get the answer ok

using & # 39; / me / drive / sharedWithMe & # 39; and & # 39; / me / drive / Recent & # 39;
if only console.log is your identifier lists.
It occurs when pushing the identification in the array of elements.

works fine with & # 39; / me / drive / root / children & # 39; and if I send a unit id and item id, for example & # 39; / drives / {drive-id} / items / {item_id} / children & # 39;

if (response) {
    console.log(response)
    response.value.map((item: any) => {
       console.log(item.id)
       items.push({
          key:item.id
          ...
       });
    });
}

I tried

var i:any;
var item:any;
for (i in response.value) {
   item=response.value(i);
   console.log(item.id)
   items.push({
        key:item.id
        ...
   });
}

Any ideas?

email – getClient () undefined in the SPFx React component

I am currently creating an application that should send messages from a SharePoint Framework application with React using Microsoft Graph.

I have a problem with the getClient method in my React component but not in the webpart.ts file because it works perfectly fine.

Here is a screenshot of the errors I get in the console when I click send message:
Error message in the console log

Here I will send my code.
Sendmail.tsx

import * as React from 'react';
import styles from './Sendmail.module.scss';
import { ISendmailProps } from './ISendmailProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { EmailForm } from './EmailForm'

export default class Sendmail extends React.Component {
  public render(): React.ReactElement {
    return (
      
Welcome to SharePoint messenger!
); } }

ISendmailProps.ts

import { WebPartContext } from "@microsoft/sp-webpart-base";
import { MSGraphClientFactory, MSGraphClient } from '@microsoft/sp-http';
export interface ISendmailProps {
  description: string;
  //spfxContext: WebPartContext;
  msGraphClientFactory: MSGraphClientFactory;
}

export interface ISendmailState {
  emailTo: string;
  emailCC?: string;

  subject: string;
  message: string;
}

SendmailWebPart.ts (Here I have an interaction with MSGraph and getClient works perfectly well here):

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
  BaseClientSideWebPart,
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-webpart-base';

import * as strings from 'SendmailWebPartStrings';
import Sendmail from './components/Sendmail';
import { ISendmailProps } from './components/ISendmailProps';

import { MSGraphClientFactory, MSGraphClient } from '@microsoft/sp-http';

export interface ISendmailWebPartProps {
  description: string;
}

export default class SendmailWebPart extends BaseClientSideWebPart {

  public render(): void {
    const element: React.ReactElement = React.createElement(
      Sendmail,
      {
        description: this.properties.description,
        //spfxContext: this.context,
        msGraphClientFactory: this.context.msGraphClientFactory
      }
    );

    this.context.msGraphClientFactory
        .getClient()
        .then((client: MSGraphClient): void => {
            client
              .api('/me/displayName')
              .get((error, response: any, rawResponse?: any) => {
                console.log("Any Graph Response? " + JSON.stringify(response));

              })
        });


    ReactDom.render(element, this.domElement);
  }

  protected onDispose(): void {
    ReactDom.unmountComponentAtNode(this.domElement);
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: (
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: (
            {
              groupName: strings.BasicGroupName,
              groupFields: (
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              )
            }
          )
        }
      )
    };
  }
}

And finally this is where I get the error for getClient () when I try to interact with MSGraph.

EmailForm.tsx:

import * as React from 'react';
import styles from './Sendmail.module.scss';
import { ISendmailProps, ISendmailState } from './ISendmailProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { TextField, PrimaryButton, autobind } from 'office-ui-fabric-react';
import { MSGraphClientFactory, MSGraphClient } from '@microsoft/sp-http';
import { ServiceKey } from '@microsoft/sp-core-library';
import { ISendmailWebPartProps } from '../SendmailWebPart';


export class EmailForm extends React.Component{
    /**
     *
     */
    constructor(props) {
        super(props);
        this.state = {
            emailTo: 'dddddddddd.cx',
            subject: 'dsdsd',
            message: 'dsdsdsdsdcdcdcdcdcdcdc'
        }
    }

    //Render Email. Show the attributes
        public render(): React.ReactElement {
            return(
                
{this._sendEmail(event)} } />
) } //Method private _handleMailTo(e) { this.setState({ emailTo: e.target.value, }); } private _handleSubject(e) { this.setState({ subject: e.target.value }); } private _handleMessage(e) { this.setState({ message: e.target.value }); } //Send Email @autobind private async _sendEmail(event){ alert("Email Sent!"); console.log(this.state.emailTo); console.log(this.state.subject); console.log(this.state.message); const sendMail = { message: { subject: this.state.subject, body: { contentType: "Text", content: this.state.message }, toRecipients: ( { emailTo: this.state.emailTo } ), ccRecipients: ( { emailCC: this.state.emailTo } ) }, }; console.log(sendMail.message.body.content); this.props.msGraphClientFactory .getClient() .then((client: MSGraphClient): void => { client .api('/me/sendMail') .post(sendMail).then(() => { console.log('Email Sent!'); }) }); } }

I don't understand, why does it work in the web part but not in the React component?
Would you appreciate if someone can help me with what I am doing wrong?

Thanks in advance.

Can we add several preconfigured entries to an SPFx web part to use in SharePoint Server 2016?

I am discovering that no matter what web part you try to add, only one of the preconfigured entries is added to a page.

Have I done something wrong in my manifest.json file of web elements, or having several preconfigured entries just doesn't work as designed on the SharePoint Server 2016 pages?

I created a SharePoint Framework web part to display SharePoint list graphics and successfully implemented it and used it in SharePoint Server 2016 (local) in classic publications and wiki pages.

The web part has many configurable properties, so I thought that as a next step I could improve the experience by using multiple pre-configured inputs so that people can configure different types of graphics (pie, bar, line, etc.) with a single click.

I added the multiple preconfigured entries and they all work very well from the workbench.

Animated screenshot of adding graphics to the worktable

However, after implementing my application in the application catalog, every time I try to add any of the preconfigured web elements to a page, only the first preconfigured entry is added to the page (first according to its alphabetical order).

In my case, I always add a Horizontal Bar Chart instead of a Line Chart, Pie Chart, Vertical Bar Chart or whatever.

Screenshot of trying to add the Line Chart web part to the classic page and get a Horizontal Bar Chart

Has anyone else encountered this behavior? Is there any solution?

Here is my JSON of pre-configured manifest entries

"preconfiguredEntries": (
  {
    "groupId": "1e95b737-7aeb-459a-8b74-ff30335ea553", 
    "group": { "default": "Charts from SharePoint Lists" },
    "title": { "default": "Pie Chart" },
    "description": { "default": "Web part for displaying charts using data from SharePoint lists" },
    "officeFabricIconFontName": "PieDouble",
    "properties": {
      "chartType": "Pie",
      "options":"{"labelDirection":"explode","labelPosition":"outside"}"
    }
  },
  {
    "groupId": "1e95b737-7aeb-459a-8b74-ff30335ea553", 
    "group": { "default": "Charts from SharePoint Lists" },
    "title": { "default": "Line Chart" },
    "description": { "default": "Web part for displaying charts using data from SharePoint lists" },
    "officeFabricIconFontName": "LineChart",
    "properties": {
      "chartType": "Line",
      "options":"{"lineSmooth":true,"low":0,"showArea":false,"showPoint":false,"axisY":{"onlyInteger":true}}"
    }
  },
  {
    "groupId": "1e95b737-7aeb-459a-8b74-ff30335ea553", 
    "group": { "default": "Charts from SharePoint Lists" },
    "title": { "default": "Horizontal Bar Chart" },
    "description": { "default": "Web part for displaying charts using data from SharePoint lists" },
    "officeFabricIconFontName": "BarChartHorizontal",
    "properties": {
      "chartType": "Bar",
      "options":"{"horizontalBars":true,"low":0,"reverseData":true,"seriesBarDistance":15,"stackBars":false,"chartPadding":{"left":30,"right":0}}"
    }
  },
  {
    "groupId": "1e95b737-7aeb-459a-8b74-ff30335ea553", 
    "group": { "default": "Charts from SharePoint Lists" },
    "title": { "default": "Vertical Bar Chart" },
    "description": { "default": "Web part for displaying charts using data from SharePoint lists" },
    "officeFabricIconFontName": "BarChartVertical",
    "properties": {
      "chartType": "Bar",
      "options":"{"horizontalBars":false,"low":0,"reverseData":false,"seriesBarDistance":15,"stackBars":false}"
    }
  },
  {
    "groupId": "1e95b737-7aeb-459a-8b74-ff30335ea553", 
    "group": { "default": "Charts from SharePoint Lists" },
    "title": { "default": "Stacked Bar Chart" },
    "description": { "default": "Web part for displaying charts using data from SharePoint lists" },
    "officeFabricIconFontName": "StackedBarChart",
    "properties": {
      "chartType": "Bar",
      "options":"{"stackBars":true,"fullWidth":true,"low":0,"axisY":{"onlyInteger":true},"reverseData":false}"
    }
  },
  {
    "groupId": "1e95b737-7aeb-459a-8b74-ff30335ea553", 
    "group": { "default": "Charts from SharePoint Lists" },
    "title": { "default": "Multiseries Line Chart" },
    "description": { "default": "Web part for displaying charts using data from SharePoint lists" },
    "officeFabricIconFontName": "StackedLineChart",
    "properties": {
      "chartType": "Line",
      "options":"{"lineSmooth":true,"fullWidth":true,"showPoint":false,"showArea":true,"low":0,"axisY":{"onlyInteger":true},"reverseData":false}"
    }
  }
)

SharePoint 2019 SPFx application customizer: automatic deployment across the entire site collection

I hope help. I developed an application customizer to inject JS and CSS. I'm using the

"includeClientSideAssets": true

to get my stuff inside the sppkg. Besides that I am using

"skipFeatureDeployment": true

Y

"@microsoft/sp-core-library": "^1.10.0".

As far as I know, SharePoint 2019 only supports SPFx up to 1.4.1. Therefore, the function to implement a "tenant level" application (or any suitable alternative) cannot be accessed.

I'm right?

My goal is to add only the application customizer to the root web of any site collection to inject JS and CSS into the root web and all subwebs.

Is there any solution without adding the UserCustomAction Periodically to any website using a PowerShell script (or adding it by hand)?

For now I am a little confused. Until today my solution comes without the ClientSideInstance.xml and I added the application manually. The code works fine. From now on I added the ClientSideInstance.xml and upload the application. Leave the "Add the application to all sites" item for free and add the application now manually – ERROR.

By clicking "Add the application to all sites" after loading the application and using a PnP-Powershell To add the custom action to any site, everything is fine.

Going back to my question.

Is there a solution to add the application once on the root web of each site collection and get JS and CSS in all subwebs too?

Thanks for the help.

Fabric CSS styles do not work in the spfx web part

I am trying to use the Fabric List component in a spfx web part.
The following code was taken directly from https://dev.office.com/fabric#/components/list

return (
     
Title Description
)

The title and description appear in exactly the same source. Is there anything special I should do to include the web css in a spfx web part?

I tried to include

require('../../../node_modules/office-ui-fabric-react/dist/css/fabric.css');

but it made no difference

SPFx – React – OfficeUI Fabric – Assign SharePoint list item value to DatePicker and DropDown controls

Thanks for your reply. I have values ​​stored in the SharePoint list. Now I want to provide the editing functionality to the user, so when the user selects a particular item, I am showing the fields in editable mode with the existing values ​​retrieved from the SharePoint list. In the readItem () method, I can set the text field and the date field, but I cannot set the selected value (which is stored in the SP list in that column) in the drop-down menu and PeoplePicker and checkbox.

In the .ts file:

export interface IProjectName {
        name: string;    
firstdate: Date;
dpselectedItem?: { key: string | number | undefined };
dpselectedItems: IDropdownOption();    
pplPickerType:string;
userIDs: number();
userManagerIDs: number();
Items:IDropdownOption(); 

}

In the .tsx file I have the following code in Constructor,

this.state = {
      name: "",
firstdate: null,
      dpselectedItem: undefined,
      dpselectedItems: (),
      userIDs: (),
      userManagerIDs: (),
      pplPickerType: "",    
      Items: this._getItems()

    };
  }

Public componentDidMount(){

    this.readItem(itemID);
    }
  }

To get DropDown values I’ve method as below

private _getItems() {
    return (
      { key: ABC', text: ABC },
      { key: 'DEF', text: 'DEF' },
      { key: 'GHI', text: GHI }
    )
}

Under render:

public render(): React.ReactElement<…>
{
return(
) private _changeState = (item: IDropdownOption): void => { this.setState({ dpselectedItem: item }); } private readItem(itemID: number): void { pnp.sp.web.lists.getByTitle("List Title").items.getById(itemID).get().then((item: any) => { this.setState({ name: item.Title}); let strfirstDate = new Date(item.firstDate); this.setState({ firstdate: strfirstDate }); //this.setState({ dpselectedItem: item.TypeofCA }) //Not working //PeoplePicker });

Thank you,

sharepoint online – SPO: modern script editor SPFX – change class suffix and CSS id and change style

I am more an administrator than a developer, but I managed to make the SPFx Modern script editor work on my tenant to facilitate some necessary cosmetic changes. Unfortunately, it seems that CSS classes and IDs are being added with a suffix that changes in each browser update.

What CSS trick do I need to use in the SPFX Modern script editor to select .content instead of .content-150 or ButtonCard Root instead of ButtonCard root-151? In any of the examples, if I create some css related to a class (or id) with these numbers added, it will break the next time I load the page because the number added to the element changes.

Thanks for any help!

jquery – SPFX: Undefined hammer when trying to load third-party JavaScript

I have created a custom SPFX web part and what I am trying to do is convert the HTML and JQuery flipbook into an SPFx web part. I downloaded this add-on and added the entire reference. However, when it is charging, it shows an error

enter the description of the image here

Uncaught (in promise) ReferenceError: Hammer is not defined
at p.zoomTouchSupport (wow_book.min.js:211)
at p.zoomSetup (wow_book.min.js:201)
at new p (wow_book.min.js:114)
at HTMLDivElement. (wow_book.min.js:122)
at Function.each (jquery.min.js:2)
at n.fn.init.each (jquery.min.js:2)
at n.fn.init.e.fn.wowBook (wow_book.min.js:122)
at HTMLDocument. (LoadA.js:31)
at i (jquery.min.js:2)
at Object.add (as done) (jquery.min.js:2)

I have put the reference in the webpart.ts as require('wowbook'); and config.json

"wowbook": {
  "path": "./src/webparts/flipBookWebPart/assets/js/wow_book.min.js",
  "globalName": "jQuery",
  "globalDependencies": (
    "jquery"
  )
},

I even declared in config.json for hammerjs, but I had no luck

"hammerjs": {
  "path": "./src/webparts/flipBookWebPart/assets/js/hammer.min.js",
  "globalName": "hammerjs"
},

In the previous HTML file, there is no inclusion for any hammerjs. I wonder what happens when it's wrong here.

spfx: are there dependencies for PS.js (Project Server JSOM)?

I found my answer. I started playing with him just loading PS.jsbut when trying to make a simple

const ctx = new PS.ProjectContext('https://server/pwa/my-pwa-instance');

I received a reference error 'SP' is not defined. so yes SP It's mandatory, I thought everybody the other dependencies are also necessary.

private componentDidMount = (): void => {
    SPComponentLoader.loadScript('/_layouts/15/init.js', {
        globalExportsName: '$_global_init'
    })
    .then((): Promise<{}> => {
        return SPComponentLoader.loadScript('/_layouts/15/MicrosoftAjax.js', {
            globalExportsName: 'Sys'
        });
    })
    .then((): Promise<{}> => {
        return SPComponentLoader.loadScript('/_layouts/15/SP.Runtime.js', {
            globalExportsName: 'SP'
        });
    })
    .then((): Promise<{}> => {
        return SPComponentLoader.loadScript('/_layouts/15/SP.js', {
            globalExportsName: 'SP'
        });
    })
    .then((): Promise<{}> => {
        return SPComponentLoader.loadScript('/_layouts/15/PS.js', {
            globalExportsName: 'PS'
        });
    })
    .then((): void => {
        // do my other init stuff
    });
}

After loading all dependencies like this, create a new PS.ProjectContext At least it seems to work.