Im letzten Blog erwähnte ich den neuen Design-manager in SharePoint Server 2013 Enterprise. Ich stellte dort die Behauptung auf, dass ein angepasstes Design damit viel einfacher zu realisieren sei als dies in SharePoint 2010 der Fall war. Den Beweis dafür möchte ich hier antreten. Übrigens ist der neue Design-Manager auch in Office 365 verfügbar. Dort macht das Arbeiten damit noch mehr Spaß.

Wenn man sich das erste Mal mit dem neuem Designmanager beschäftigt, ist die Verwirrung groß. Ich habe zumindest nicht sofort gewusst, was denn nun wie zu machen ist. Nach einigen Recherchen funktioniert es aber wunderbar.

Voraussetzungen

Der Gedanke hinter dem neuem Designmanager ist, ein schon vorgefertigtes xHTML Layout in SharePoint zu importieren und damit das manuelle Erstellen von Masteseiten in SharePoint Designer zu vermeiden bzw. stark zu erleichtern. Wer schon einmal das zweifelhafte Vergnügen hatte, im SharePoint Designer 2010 oder 2007 eine Masterdatei zu erstellen, weiß auch um die Schmerzen.

Es ist nun möglich, sich von einer Agentur ein xHTML Design erstellten zu lassen und mit diesem Template von SharePoint automatisch eine Masterdatei generieren zu lassen. Wichtig ist, es muss sich wirklich um eine xHTML Datei handeln. Für einen ordentlichen Webdesigner sollte dies kein Problem sein. Wird versucht, eine „normale“ HTML Datei zu verwenden, weißt SharePoint darauf hin und verweigert die Arbeit.

Es sind im Internet viele freie Templates verfügbar. Ich habe, zu Demonstrationszwecken, das Template Pinboard von http://www.justfreetemplates.com/web-templates/preview/3265.html heruntergeladen. Dieses Design will ich in SharePoint einsetzen und dabei die globale Navigation von SharePoint einbauen und natürlich einen Inhaltsbereich.

Vorbereitungen

Nachdem die .zip Datei heruntergeladen und entpackt ist, sind mehrere Schritte notwendig. Zuerst kopiere ich die verwenden Bilder aus dem Ordner images in den SharePoint Server. Dazu habe ich im Stamm der SharePoint Anwendung eine Bilderbibliothek mit dem Namen images angelegt und dort einen Ordner Pinboard. Ich navigiere im Internet Browser zu der Bibliothek und öffne diese dann im Windows Explorer. So kann ich die Dateien einfach per Drag Drop verschieben. Die verwendete CSS Datei benenne ich um in pinboard-style.css und kopiere diese auf dem SharePoint Server in die Bibliothek Style Library.

Zum Schluss benenne ich die Datei index.html in pinboard.html um und kopiere diese, ebenfalls über den Explorer, in den Ordner _catalogs/masterpage auf dem SharePoint Server.

Pfade ändern

In der verwendeten xHTML und CSS Datei sind die Referenzen natürlich noch falsch gesetzt. Bevor die xHTML Datei in eine Masterdatei umgewandelt werden kann, müssen diese Pfade korrigiert werden. Dazu öffnen wir den SharePoint Designer 2013, verbinden uns mit der Website in die wir die Dateien kopiert haben und öffnen die HTML Datei _catalogs/masterpage/pinboard.html.

Tragen Sie dort die Verbindung zu der verwendeten CSS Datei ein. Achten Sie darauf, dass immer vom Speicherort der Masterdatei ausgegangen wird, Sie müssen also zwei Ordner nach oben.

<link rel=“stylesheet“ type=“text/css“ href=“../../Style Library/pinboard-style.css“ />

Suchen Sie anschließend alle Verknüpfungen zu Bildern und passen Sie den Pfad richtig an.

<img src=“../../images/pinboard/content_image.jpg“ alt=“content image“ />

Speichern Sie die Änderungen und schließen Sie die Datei.

Die Pfade zu den Bildern in der verwendeten CSS Datei wird SharePoint übrigens automatisch anpassen, hier ist kein Eingriff notwendig. Damit wären die Vorbereitungen abgeschlossen.

Masterpage erzeugen

Gehen Sie in eine beliebige SharePoint 2013 Website und klicken Sie auf das Radsymbol oben rechts neben ihrem Namen. Wählen Sie dann den Punkt Design-Manager.

Klicken Sie in der linken Navigation auf den Punkt Gestaltungsvorlagen bearbeiten und dort auf den Punkt Konvertieren einer HTML-Datei in eine SharePoint-Gestaltungsvorlage.

Markieren Sie die xHTML Datei und klicken Sie anschließend auf Einfügen.

Wenn die Konvertierung erfolgreich war, können Sie dies sofort in der Übersicht sehen. Falls nicht, wird ein Link angeboten, die die Fehler enthält.

Ein Blick in den SharePoint Designer verrät, dass SharePoint jetzt automatisch eine pinboard.master erstellt hat. Diese ist jedoch für die Bearbeitung tabu! Jede Änderung wird ausschließlich in der Datei pinboard.html vorgenommen.

SharePoint Navigation einfügen

Klicken Sie im Design-Manager auf die Datei pinboard. Sie sollte Ihnen ohne Probleme angezeigt werden. Klicken Sie oben rechts auf den Punkt Ausschnitte.

Im dem sich nun öffnenden Fenster können Sie sich den Code für die benötigen Steuerelemente generieren lassen. Klicken Sie in der Menüleiste auf den Punkt Navigationsleiste oben und kopieren Sie den Code, der im Textfeld HTML Ausschnitt steht.

Gehen Sie dann in den SharePoint Designer und öffnen Sie wieder die Datei pinboard.html. Sie können sehen, dass SharePoint viele Änderungen in der Datei vorgenommen hat, welche Sie nur ändern sollten, wenn Sie genau wissen, welche Auswirkung dies hat.

Suchen Sie den Tag <div id=“menu_items“> und fügen Sie darunter den kopierten Code ein. Löschen Sie alles, was innerhalb des <ul> Tags steht. Halten Sie die die STRG Taste gedrückt und klicken Sie auf den Link menu_items im div. Es sollte sich die Datei pinboard-style.css öffnen. Entfernen Sie die Klasse aus der Datei und speichern Sie die CSS und die xHTML Datei. Gehen Sie zum Browser und aktualisieren Sie das Fenster mit der Anzeige der Masterdatei. Was Sie sehen, ist aber nichts bzw. keine Änderung.

Damit Sie die Änderungen sehen können, müssen Sie die Datei noch veröffentlichen. Gehen Sie dazu in die Websiteeinstellungen der Website der höchsten Ebene und klicken dort auf Gestaltungsvorlagen und Seitenlayouts im Abschnitt Web-Designer-Kataloge. Suchen Sie die Datei pinboard.html und wählen Sie aus dem Kontextmenü den Eintrag Hauptversion veröffentlichen. Bestätigen Sie den folgenden Dialog.

Aktualisierten Sie die Vorschau im Browser. Die Navigation befindet sich jetzt auf der Seite, muss aber natürlich noch optisch angepasst werden.

Analog dem Vorgehen können Sie jetzt auch andere Elemente einfügen, experimentieren Sie ruhig eine Weile.

Bearbeitbaren Bereich einfügen

Den bearbeitbaren Bereich, in welchen dann die Inhaltsseite anzeigt wird, hat SharePoint schon von sich aus eingefügt. Sie finden diesen ganz am Ende der Datei mit dem Tag <div data-name=“ContentPlaceHolderMain“>. Wo Sie diesen Platzhalter letztendlich in der Datei platzieren, das bleibt Ihnen überlassen. In der Abbildung unten habe ich den Platzhalter entsprechend verschoben.

Fazit: Der neue Design-Manager von SharePoint Server 2013 Enterprise ist ein mächtiges Werkzeug um anspruchsvolle Design einfach und schnell zu verwirklichen!