Mit Single Part App Pages hat man die Möglichkeit SharePoint Framework Webparts oder Teams Apps auf einer Seite mit gesperrtem Layout anzuzeigen. (aktuell ist diese Funktion nur in SharePoint-Online verfügbar)
Was genau bedeutet das?
Der Endbenutzer hat keine Möglichkeit die Seite oder den Webpart zu verändern, sobald das Layout auf Single Part App Page umgestellt wurde.
Welche Vor- und Nachteile bringt das mit sich und wie kann man es derzeit verwenden
(Stand Juli 2019)
- Single Part App Pages können über den Browser nicht bearbeitet werden
- Eingebundene Webparts können nicht mehr verändert werden (eine Änderung der Webpart Parameter wird nicht gespeichert)
- Es kann nur ein Webpart pro Seite angezeigt werden
- Das Erscheinungsbild der Seite kann nur geändert werden indem das Layout mittels Codes von Single Part App Pages auf Normal Page Layout umgestellt wird.
Normale Seite
Single Part App Page
Konfiguration des Webparts zur Verwendung in einer Single Part App Page
Um einen Webpart auf einer Single Part App Page verwenden zu können, muss diese Möglichkeit im Manifest des SPFx Webpart aktiviert werden. Dies geschieht über das Property „supportetHosts“. Derzeit gibt es drei Werde die man diesem Property übergeben kann.
- „SharePointWebPart“ – Standard Einstellung für alle SPFx Webparts
- „SharePointFullPage“ – durch diesen Wert kann der Webpart auf der Single Part App Page verwendet werden
- „TeamsTab“ – ermöglicht es den Webpart in einem Teams Tab anzuzeigen
Erstellen einer Single Part App Page
Folgende Schritte sind notwendig um eine Single Part App Page in SharePoint zu erstellen.
- Erstellen einer neuen Seite
- SPFx Webpart hinzufügen und konfigurieren
- Seitenlayout auf SingleWebPartAppPage ändern
Danach ist das Erscheinungsbild der Seite fixiert und kann erst wieder bearbeitet werden, wenn man den Layout Typ der Seite auf „Article“ ändert.
Ändern des Seitenlayouts
Mit Javascript*
Das Layout einer Seite kann man mit Hilfe der Developer Konsole direkt im Browser umstellen – an einer GUI Lösung wird von Microsoft angeblich noch gearbeitet.
Dazu öffnet man mit F12 die Developer Tools des Browsers, wechselt in die Konsole und führt folgenden Code aus:
var siteUrl = 'https://contoso.sharepoint.com/sites/marketing/'; var pageUrl = 'SitePages/page.aspx'
fetch(siteUrl + '_api/contextinfo', {
method: 'POST',
headers: {
accept: 'application/json;odata=nometadata'
}
})
.then(function
(response) {
return
response.json();
})
.then(function (ctx) {
return
fetch(siteUrl + "_api/web/getfilebyurl('" +
pageUrl + "')/ListItemAllFields", {
method: 'POST',
headers: {
accept: 'application/json;odata=nometadata',
'X-HTTP-Method': 'MERGE',
'IF-MATCH': '*',
'X-RequestDigest':
ctx.FormDigestValue,
'content-type': 'application/json;odata=nometadata',
},
body: JSON.stringify({
PageLayoutType: "SingleWebPartAppPage"
})
})
})
.then(function(res) {
console.log(res.ok
? 'DONE' : 'Error: ' +
res.statusText);
});
Mit PnP PowerShell*
Connect-PnPOnline -Url https://contoso.sharepoint.com/sites/marketing
$item2 = Get-PnPListItem -List "Site Pages" -Query "<View><Query><Where><Eq><FieldRef Name='FileLeafRef'/><Value Type='Text'>page.aspx</Value></Eq></Where></Query></View>"
$item2["PageLayoutType"] = "SingleWebPartAppPage"
$item2.Update()
Invoke-PnPQuery
Mit Office 365 CLI*
o365 spo login https://contoso.sharepoint.com/sites/marketing
o365 spo listitem set --webUrl https://contoso.sharepoint.com/sites/marketing --listTitle 'Site Pages' --id 3 --PageLayoutType SingleWebPartAppPage
*bei allen Beispielen muss der Tenant, SiteCollection Url und Page Url entsprechend den eigenen Anforderungen geändert werden.
