lcreely | 2022-05-03 22:37:21 UTC | #1
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
})
]
}
]
}
]
};
}
}
jacobshaw | 2022-05-23 09:41:30 UTC | #2
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');
system | 2022-06-04 20:57:17 UTC | #3
This topic was automatically closed 31 days after the last reply. New replies are no longer allowed.
This post was migrated from the old Developer Forum.
ref: 14569