Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
This service provides the on-page content (_spPageContextInfo and __REQUESTDIGEST) often used when making REST calls in JavaScript from a SharePoint page. This content is not provided on Modern pages with the SharePoint Framework, requiring updates to any REST calls that may have depended on it. This service dynamically populates the data on any…
// SharePoint widget helper service
// This service provides the on-page content (_spPageContextInfo and __REQUESTDIGEST) often used when making REST calls
// in JavaScript from a SharePoint page. This content is not provided on Modern pages with the SharePoint Framework, requiring
// updates to any REST calls that may have depended on it. This service dynamically populates the data on any web page using
// SharePoint Framework.
import { IWebPartContext } from '@microsoft/sp-webpart-base';
import { IDigestCache, DigestCache } from '@microsoft/sp-http';
export interface IPageContextInfo {
currentCultureName: string,
currentUICultureName: string,
currentLanguage: number,
layoutsUrl: string,
serverRequestPath: string,
siteAbsoluteUrl: string,
siteServerRelativeUrl: string,
webAbsoluteUrl: string,
webTemplate: string,
webLanguage: number,
webServerRelativeUrl: string,
webTitle: string
webUIVersion: number,
}
const PAGE_CONTEXT_PROPERTY = "_spPageContextInfo";
const REQUEST_DIGEST_ELEMENT = "__REQUESTDIGEST";
export class WidgetHelper {
constructor (private wpContext: IWebPartContext) { }
public ensureClassicPageProps(getDigest: boolean): Promise<void> {
var result = new Promise<void>((resolve) => {
// Fill in _spPageContextInfo if it is missing
if (!window[PAGE_CONTEXT_PROPERTY]) {
window[PAGE_CONTEXT_PROPERTY] = {};
let pci: IPageContextInfo = window[PAGE_CONTEXT_PROPERTY];
let pageContext = this.wpContext.pageContext;
pci.currentCultureName =
pageContext.cultureInfo.currentCultureName;
pci.currentLanguage =
this.getLocaleId(pageContext.cultureInfo.currentUICultureName);
pci.currentUICultureName =
pageContext.cultureInfo.currentUICultureName;
pci.layoutsUrl = "_layouts/15";
pci.serverRequestPath =
window.location.pathname.substring(
pageContext.web.serverRelativeUrl.length
);
pci.siteAbsoluteUrl =
pageContext.site.absoluteUrl;
pci.siteServerRelativeUrl =
pageContext.site.serverRelativeUrl;
pci.webAbsoluteUrl =
pageContext.web.absoluteUrl;
pci.webLanguage =
pageContext.web.language;
pci.webServerRelativeUrl =
pageContext.web.serverRelativeUrl;
pci.webTemplate =
pageContext.web.templateName;
pci.webTitle =
pageContext.web.title;
}
// Fill in __REQUSTDIGEST if it is missing
if (!getDigest) {
resolve();
} else {
if (!document.getElementById(REQUEST_DIGEST_ELEMENT)) {
var digestCache: IDigestCache =
this.wpContext.serviceScope.consume(DigestCache.serviceKey);
digestCache.fetchDigest(this.wpContext.pageContext.web.serverRelativeUrl)
.then ((digest:string) => {
var digestElement:HTMLInputElement =
document.createElement("input");
digestElement.name = REQUEST_DIGEST_ELEMENT;
digestElement.id = REQUEST_DIGEST_ELEMENT;
digestElement.type = "hidden";
digestElement.value = digest;
document.body.appendChild(digestElement);
resolve();
})
}
}
});
return result;
}
private getLocaleId (localeName: string) : number {
var locales: {id: number, name: string}[] = [
{id: 1025, name: 'ar-SA'},
{id: 1026, name: 'bg-BG'},
{id: 1027, name: 'ca-ES'},
{id: 1028, name: 'zh-TW'},
{id: 1029, name: 'cs-CZ'},
{id: 1030, name: 'da-DK'},
{id: 1031, name: 'de-DE'},
{id: 1032, name: 'el-GR'},
{id: 1033, name: 'en-US'},
{id: 1035, name: 'fi-FI'},
{id: 1036, name: 'fr-FR'},
{id: 1037, name: 'he-IL'},
{id: 1038, name: 'hu-HU'},
{id: 1040, name: 'it-IT'},
{id: 1041, name: 'ja-JP'},
{id: 1042, name: 'ko-KR'},
{id: 1043, name: 'nl-NL'},
{id: 1044, name: 'nb-NO'},
{id: 1045, name: 'pl-PL'},
{id: 1046, name: 'pt-BR'},
{id: 1048, name: 'ro-RO'},
{id: 1049, name: 'ru-RU'},
{id: 1050, name: 'hr-HR'},
{id: 1051, name: 'sk-SK'},
{id: 1053, name: 'sv-SE'},
{id: 1054, name: 'th-TH'},
{id: 1055, name: 'tr-TR'},
{id: 1057, name: 'id-ID'},
{id: 1058, name: 'uk-UA'},
{id: 1060, name: 'sl-SI'},
{id: 1061, name: 'et-EE'},
{id: 1062, name: 'lv-LV'},
{id: 1063, name: 'lt-LT'},
{id: 1066, name: 'vi-VN'},
{id: 1068, name: 'az-Latn-AZ'},
{id: 1069, name: 'eu-ES'},
{id: 1071, name: 'mk-MK'},
{id: 1081, name: 'hi-IN'},
{id: 1086, name: 'ms-MY'},
{id: 1087, name: 'kk-KZ'},
{id: 1106, name: 'cy-GB'},
{id: 1110, name: 'gl-ES'},
{id: 1164, name: 'prs-AF'},
{id: 2052, name: 'zh-CN'},
{id: 2070, name: 'pt-PT'},
{id: 2074, name: 'sr-Latn-CS'},
{id: 2108, name: 'ga-IE'},
{id: 3082, name: 'es-ES'},
{id: 5146, name: 'bs-Latn-BA'},
{id: 9242, name: 'sr-Latn-RS'},
{id: 10266, name: 'sr-Cyrl-RS'}
]
var result: number = 0;
for (var l of locales) {
if (l.name === localeName) {
result = l.id;
break;
}
}
return result;
}
}
// (within a SharePoint Framework web part)
import { WidgetHelper } from './services/widgetHelper';
// ...
public render(): void {
var helper = new WidgetHelper(this.context);
helper.ensureClassicPageProps(true).then (() => {
const element: React.ReactElement<IEventsProps > = React.createElement(
Events,
{
description: this.properties.description
}
);
ReactDom.render(element, this.domElement);
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment