Wednesday, March 24, 2021

Making the workbench full width

I often am frustrated by the forced max width of the workbench - which inhibits my web part testing. To overcome this, I add the following in the componentDidMount of my web part during development phase:


Wednesday, March 17, 2021

Getting user ID by email in REACT SPFX web part

Missed me? I'm back!

Here is a small function I whipped up for React web parts that need the user id.
     * Fetches the user ID for the specified user
     * @param email the email for the user
     * @returns a promise containing the user ID in the site collection
     * example:
     * var userID = await this.getUserIDByEmail(;
    private async getUserIDByEmail(email:string):Promise<number>
        var url = `${}/_api/web/siteusers?$filter=Email eq '${email}'`;
        var userData:any = await  Query.GetQueryData(this.props.wpContext,url);
        return userData.value[0].Id;

this refers to a class I created called Query where I put some code to help me do queries:

export default class Query {
  public static async GetQueryData(contextWebPartContexturlstring) {
    var deferred = $.Deferred();
    console.log(`running query '${url}'`);
    let _nometaOptISPHttpClientOptions = {
      headers: { 'Accept': 'application/json;odata=nometadata''odata-version': '''Content-type': 'application/json;odata=verbose' }
      (responseSPHttpClientResponse=> {

        if (response.status == 200) {
          console.log("got query results");
          if (response.headers.get("content-type").indexOf("atom") > -1) {
            console.log("Got xml instead of json on " + url);
            response.text().then((text:string=> {
          else {
            response.json().then((jsondataJSON=> {
        else {
          console.log("error getting query results!");
      }, (errany=> {
        console.log("error getting query results!");
    return deferred;