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:


$("#workbenchPageContent").attr("style","max-width:inherit");

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(this.props.wpContext.pageContext.user.email);
     */
    private async getUserIDByEmail(email:string):Promise<number>
    {
        var url = `${this.props.wpContext.pageContext.site.absoluteUrl}/_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' }
    };
    context.spHttpClient.get(urlSPHttpClient.configurations.v1_nometaOpt).then(
      (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=> {
              deferred.resolve(text);
            });
          }
          else {
            response.json().then((jsondataJSON=> {
              deferred.resolve(jsondata);
            });
          }
        }
        else {
          console.log("error getting query results!");
          console.log(response.status);
        }
      }, (errany=> {
        debugger;
        console.log("error getting query results!");
        console.log(err);
      });
    return deferred;
  }
}