Site Design erstellen

Site Design

Das neue Modern UI von SharePoint sieht ja out-of-the Box ja schon großartig aus. Mit ein paar einfach Kniffen kann man ein eigenes Site Design erstellen, und damit kleine Anpassungen am UI vornehmen. Mit kleinen Anpassungen meine ich Farbschema, Logo und kleinere Einstellungen.

Bitte vermeidet eine Pixel Diskussion, ob das Logo 2 Pixel weiter rechts, oben oder unten angezeigt wird sollte nicht das zentrale Thema sein. In der Vergangenheit wurde das oft bis zum Exzess betrieben, was den Aufwand/Nutzen nie gerechtfertigt hat. Als Hinweis, spätestens in der App, bleibt auch nur noch Logo und Farbschema übrig.

Bitte auch unbedingt Finger weg von Masterpages und co, das sind Techniken aus dem letzten Jahrtausend.

In SharePoint Online gibt es relativ neu das sog. Site Design. Dies setzt sich aus den folgenden Bestandteilen zusammen:

  • Theme (Farbschema)
  • Site Script (Einstellungen wie Logo, Content Type, Azure Function, Flow, External Sharing)
  • Site design (Auswahl in der Benutzeroberfläche)

Logo Teamsites vs. Communication sites

An sich einfach, dennoch, wer es probiert ein Logo per Site Script zu setzen hat bei Communication sites Erfolg. Bei Teamsites sieht es – aktuell – anders aus, das wird nur mit einem Fehler quittiert:

Site Design Logo Error
Zeigt den Fehler „Unable to set logon on group connected sites“

Grundsätzlich stimmt der Fehler ja, eine Modern Team Site ist eine Group und eine Group speichert das Logo woanders… Wenn ich über die SharePoint Oberfläche gehe, geht es zwar, aber der legt es korrekt ab.

Das im Hinterkopf zu behalten, wird wichtig, wenn man Site designs ausrollt, denn ich benötige eine Version ohne Logo für die Team Sites.

Admin Center

Im Admin Center gibt es eine Einstellung, um die obere Leiste farblich anzupassen und ein Logo zu setzen: https://admin.microsoft.com/Adminportal/Home?source=applauncher#/companyprofile

Admin Center UI
Zeigt die UI Einstellungen im Office 365 Admin Center

Diese Einstellungen enthalten das Banner, das Icon und Farbcodes die sich über alle Applikationen im Browser durchziehen.

Erstellung

Für die Erstellung benötige ich lediglich die SharePoint Online PowerShell. Es gibt zwar auch Funktionen über die PnP PowerShell, die ging aber aktuell nicht oder hatte zumindest Probleme mit der MFA.

Theme

Das Theme und damit das Farbschema ist die einfachste Variante, um ein gängiges Look and Feel zu erzeugen. Hier am Beispiel „blau“:

$colours = @{
"themePrimary" = "#0078d4";
"themeLighterAlt" = "#eff6fc";
"themeLighter" = "#deecf9";
"themeLight" = "#c7e0f4";
"themeTertiary" = "#71afe5";
"themeSecondary" = "#2b88d8";
"themeDarkAlt" = "#106ebe";
"themeDark" = "#005a9e";
"themeDarker" = "#004578";
"neutralLighterAlt" = "#f8f8f8";
"neutralLighter" = "#f4f4f4";
"neutralLight" = "#eaeaea";
"neutralQuaternaryAlt" = "#dadada";
"neutralQuaternary" = "#d0d0d0";
"neutralTertiaryAlt" = "#c8c8c8";
"neutralTertiary" = "#c2c2c2";
"neutralSecondary" = "#858585";
"neutralPrimaryAlt" = "#4b4b4b";
"neutralPrimary" = "#333333";
"neutralDark" = "#272727";
"black" = "#1d1d1d";
"white" = "#ffffff";
}

Klar die wichtigste ist übrigens „primaryTheme“, daran orientieren sich dann auch verschiedene Varianten. Unten habe ich einen Generator verlinkt.

Ein paar andere Beispiele gibt es hier: https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/site-theming/sharepoint-site-theming-json-schema

Anschließend kann ich ein neues Theme erstellen:

Add-SPOTheme -Identity "Company blue" -Palette $colours -IsInverted $false

Site Script

Mithilfe des Site Scripts kann man verschiedene Einstellungen festlegen. Per PowerShell gebe ich ein Json Format mit.

Wichtig ist, später kann man mehrere Site Scripts in ein Site Design integrieren. Das ist wichtig, denn so kann man versuchen den kleinsten gemeinsamen Nenner in Site Scripte zu verpacken und dann beliebig oft wiederzuverwenden.

Json erstellen

Was alles geht, ist hier erklärt – aktuell noch relativ überschaubar: https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/site-design-json-schema

$json = @'
{
        "$schema": "schema.json",
        "actions": [
            {
                "verb": "applyTheme",
                "themeName": "Company blue"
            },
            {
                "verb": "setSiteLogo",
                "url":
"https://publiccdn.sharepointonline.com/contoso.sharepoint.com/SiteAssets/Company_Logo.png"
            }
        ],
        "bindata": { },
        "version": 1
    };
'@

In diesem simplen Beispiel, wende ich einfach das zuvor erstellte Theme an, und verwende das Logo aus dem CDN (Achtung, wer das nicht aktiviert hat, nimmt besser einen relativen Pfad /SiteAssets/Company_Logo.png).

Anschließend kann man ein neues Site Script erzeugen:

Add-SPOSiteScript -Title "Contoso Look and Feel" -Description "Sets Theme and Logo" -Content $Json

Site Design

Das ist der letzte Schritt der alle vorherigen Schritte vereint und es in der Benutzeroberfläche zur Auswahl bietet.

Add-SPOSiteDesign `
  -Title "Company Intranet" `
  -WebTemplate "68" `
  -SiteScripts "<ID>" `
  -Description "Apply company branding" `
  -PreviewImageUrl "https://contoso.sharepoint.com/SiteAssets/site-preview.png" `
  -PreviewImageAltText "site preview"

Die Optionen PreviewImageUrl und PreviewImageAltText sind optional. WebTemplate 68 = Communication Site und 64 = Team Site (Modern). Wenn ich an der Stelle mehrere SiteScripts hintereinander ausführen möchte, dann in folgendem Format = Reihenfolge der Ausführung:

Get-SPOSiteScript
# Remember the IDhttps://www.hobmaier.net/wp-admin/post-new.php#
$scripts = @("GUID","GUID2","GUID3")

Add-SPOSiteDesign `
  -Title "Company Intranet" `
  -WebTemplate "68" `
  -SiteScripts $scripts `
  -Description "Apply company branding"

Site Design anwenden

Anschließend kann ich in SharePoint an eine beliebige Stelle gehen, und über das Rädchen – Settings – Site design mein gerade erstelltes Site Design auswählen:

Site Design
Zeigt die SharePoint Auswahl Site Design

Zusammenfassung

Hat man es einmal durchschaut, ist der Aufbau einfach. Ein Site Design erstellen ist am Ende ganz einfach. Erst das Theme anlegen, dann das Site Skript und am Ende das Site Design.

Wenn ich irgendwo etwas ändere, muss das Site Design nochmal angewendet werden. Verwende ich zusätzlich Hub Sites, werden diverse Einstellungen, wie das Theme, bereits durch die Hub Site vererbt.

Referenz

Teilen

Autor: Dennis Hobmaier

Dennis Hobmaier ist Consultant - Digital Workspace bei Insight Technology Solutions GmbH. Er hat über 15 Jahre Erfahrung in IT-Enterprise Umgebung aller Größenordnungen und bedient Kunden aus den unterschiedlichsten Branchen. Als MCSE SharePoint hat er tiefgreifende Kenntnisse in den Bereichen Microsoft Active Directory, Windows, Azure, SharePoint und Office 365. Gerne teilt er seine Projekterfahrung mit Ihnen.

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verarbeitet werden .