Using JavaScript SDK with SharePoint Spfx

Is it possible to use the JavaScript SDK with the SharePoint Framework?

I have run "npm install purecloud-platform-client-v2" in my environment but when I call const client = platformClient.ApiClient.instance; in my WebPart.ts file I get "Property 'ApiClient' does not exist on type 'unknown'.ts(2339)"

I have also tried to use: import * as platformClient from 'purecloud-platform-client-v2'; and then call: const client = platformClient.ApiClient.instance; but get the error: "Cannot read properties of undefined (reading 'instance')"

Any help or advice would be very much appreciated, I am using node version 14.

WebPart.ts:

import { Version } from '@microsoft/sp-core-library';

import {

  IPropertyPaneConfiguration,

  PropertyPaneTextField

} from '@microsoft/sp-property-pane';

import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

import { IReadonlyTheme } from '@microsoft/sp-component-base';

import { escape } from '@microsoft/sp-lodash-subset';

import styles from './PureCloudDrWebPart.module.scss';

import * as strings from 'PureCloudDrWebPartStrings';

import { AnyKindOfDictionary } from 'lodash';

import * as $ from 'jquery';

import * as platformClient from 'purecloud-platform-client-v2';

export interface IPureCloudDrWebPartProps {

  description: string;

}

export default class PureCloudDrWebPart extends BaseClientSideWebPart<IPureCloudDrWebPartProps> {

  private _isDarkTheme: boolean = false;

  private _environmentMessage: string = '';

  protected onInit(): Promise<void> {

    this._environmentMessage = this._getEnvironmentMessage();

    return super.onInit();

  }

  public render(): void {

    const client = platformClient.ApiClient.instance;

    this.domElement.innerHTML = `

    <script src="https://sdk-cdn.mypurecloud.com/javascript/135.0.0/purecloud-platform-client-v2.min.js"></script>

    <script type="text/javascript">

      // Obtain a reference to the platformClient object

      const platformClient = require('platformClient');

    </script>

    <section class="${styles.pureCloudDr} ${!!this.context.sdks.microsoftTeams ? styles.teams : ''}">

      <div class="${styles.welcome}">

        <img alt="" src="${this._isDarkTheme ? require('./assets/PureCloud-SharePointDR-Dark.png') : require('./assets/PureCloud-SharePointDR-Dark.png')}" class="${styles.welcomeImage}" />

        <h2>Hello, ${escape(this.context.pageContext.user.displayName)}!</h2>

        <div>${this._environmentMessage}</div>

        <div>Web part property value: <strong>${escape(this.properties.description)}</strong></div>

        <p>This SPFx webpart is using jQuery ${$.fn.jquery}</p>

      </div>

      <div>

        <h3>Welcome to SharePoint Framework!</h3>

        <p>

        The SharePoint Framework (SPFx) is a extensibility model for Microsoft Viva, Microsoft Teams and SharePoint. It's the easiest way to extend Microsoft 365 with automatic Single Sign On, automatic hosting and industry standard tooling.

        </p>

        <h4>Learn more about SPFx development:</h4>

          <ul class="${styles.links}">

            <li><a href="https://aka.ms/spfx" target="_blank">SharePoint Framework Overview</a></li>

            <li><a href="https://aka.ms/spfx-yeoman-graph" target="_blank">Use Microsoft Graph in your solution</a></li>

            <li><a href="https://aka.ms/spfx-yeoman-teams" target="_blank">Build for Microsoft Teams using SharePoint Framework</a></li>

            <li><a href="https://aka.ms/spfx-yeoman-viva" target="_blank">Build for Microsoft Viva Connections using SharePoint Framework</a></li>

            <li><a href="https://aka.ms/spfx-yeoman-store" target="_blank">Publish SharePoint Framework applications to the marketplace</a></li>

            <li><a href="https://aka.ms/spfx-yeoman-api" target="_blank">SharePoint Framework API reference</a></li>

            <li><a href="https://aka.ms/m365pnp" target="_blank">Microsoft 365 Developer Community</a></li>

          </ul>

      </div>

    </section>`;

  }

  private _getEnvironmentMessage(): string {

    if (!!this.context.sdks.microsoftTeams) { // running in Teams

      return this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentTeams : strings.AppTeamsTabEnvironment;

    }

    return this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentSharePoint : strings.AppSharePointEnvironment;

  }

  protected onThemeChanged(currentTheme: IReadonlyTheme | undefined): void {

    if (!currentTheme) {

      return;

    }

    this._isDarkTheme = !!currentTheme.isInverted;

    const {

      semanticColors

    } = currentTheme;

    this.domElement.style.setProperty('--bodyText', semanticColors.bodyText);

    this.domElement.style.setProperty('--link', semanticColors.link);

    this.domElement.style.setProperty('--linkHovered', semanticColors.linkHovered);

  }

  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

                })

              ]

            }

          ]

        }

      ]

    };

  }

}

Not sure about SharePoint, but we have a blueprint that covers importing the JavaScript SDK into a React+TypeScript project. The common denominator here is TypeScript, so it may be of some use to you.

The operative line is the import, which uses 'require' and a different entry point:
const platformClient = require('purecloud-platform-client-v2/dist/node/purecloud-platform-client-v2.js');

1 Like

This topic was automatically closed 31 days after the last reply. New replies are no longer allowed.