close
Kinderhand hält Spielzeugflugzeug in die Luft - Innovation
Kinderhand hält Spielzeugflugzeug in die Luft - Innovation

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.

Mathias Tauber

The author Mathias Tauber

Mathias Tauber ist als Senior Web Developer tätig und bringt über 5 Jahre Berufserfahrung im Web Bereich, mit Schwerpunkt auf Frontend Entwicklung und User Experience mit. Bei HATAHET beschäftigt Mathias sich unter anderem mit der Entwicklung von Lösungen für SharePoint On-Premises und SharePoint Online sowie für den digitalen Arbeitsplatz der Zukunft.

Leave a Response