Tenant einrichten
Um aktuell in den Genuss der Verwendung einer SharePoint Communication Site zu kommen, muss man in seinem Tenant das Erstveröffentlichungsfeature (First Release Feature) frei schalten. Das geht entweder für alle Benutzer eines Tenants oder nur für bestimmte Benutzer. Eine Anleitung dazu hat Marc D Anderson bereitgestellt: http://sympmarc.com/2017/06/29/want-to-get-a-look-at-the-new-communication-sites-heres-a-trick/ .
In einem deutschen Tenant sieht die Einstellung so aus:
Ich habe das Feature für meinen Benutzer aktiviert und konnte dann nach ein paar Minuten warten und einer Neuanmeldung über „+ Website erstellen“ die Auswahl für Teamzusammenarbeit oder Kommunikation sehen:
Communication Site anlegen
Wählt man die Kommunikationswebsite (rechts) aus, kommt man zur Erstellungsseite für eine Kommunikationswebsite:
Bei den Designs gibt es drei verschiedene Möglichkeiten:
- Melden (siehe im Bild oben)
- Portfolio
- Leer
Man beachte auch immer gleich die Darstellung auf dem Mobilgerät!
Ich fange mit dem Design „Melden“ an. Bei der Eingabe des Websitenamens wird auch gleich die Websiteadresse angezeigt und es wird geprüft, ob es die Site schon gibt.
Nach einigen Sekunden Wartezeit erscheint die neue Seite, bereits zur Verwendung.
Communication Site
Im oberen Teil sieht man die schon aus den Ankündigungen bekannten Bilder mit den Texten. Gleich auf dem ersten Bild links führt der Link zur englischen Erklärung für Communication Sites von Microsoft:
Interessant ist es im DOM Explorer sich den Teil anzuschauen:
Ob da react (https://facebook.github.io/react/) verwendet wird 🙂 ?
In der aktuellen Vorversion werden zwei JavaScript Fehlermeldungen angezeigt:
Der Aufruf findet die Liste „Documents“ nicht, da ich einen Deutschen Tenant habe und die Liste hier „Dokumente“ heißt.
Verweis auf SitePages/none, aber „none“ gibt es in SitePages nicht!
Wenn man die Seite etwas weiter runter scrollt, sieht man Nachrichten und Ereignisse.
Gefällt mir optisch ganz gut!
Was im unteren Teil „nicht geklappt“ hat, muss ich noch rausfinden. Die technischen Details besagen:
Daten können nicht abgerufen werden. ListItemDataSource: getItemsForList Fehler bei REST-Aufruf. Statuscode: 404
Auf dem Handy sieht die Standard Seite auch ganz hübsch aus:
 |
 |
Was wurde sonst noch angelegt?
–> 3 Dokumentenbibliotheken, 1 Ereignisliste und 1 Seitenbibliothek
Communication Site bearbeiten
Zurück zur Hauptseite „Home.aspx“. Im oberen Bereich wird links die Option „+ Neu“ angezeigt und im rechten Bereich, ob die Seite „Veröffentlicht“ ist und die Option „Bearbeiten“. Mit „+ Neu“ kann man der WebSite Elemente hinzufügen (Liste, Dokumentbibliothek, Seite und App). Interessant wird es mit der Option „Bearbeiten“. Hier kann die Seite bearbeitet werden.
Klickt man auf den Stift im großen Bild links oben, kann man den WebPart bearbeiten. Auf der rechten Seite geht das Bearbeitungsmenü für diesen „Hero“ genannten WebPart auf. Wählt man in den Layoutoptionen z.B. drei Kacheln aus, passt sich die Oberfläche gleich darauf an.
Klickt man auf den Stift unten rechts im Bild in die graue Fußzeile wo „Details bearbeiten“ steht, kann man den einzelnen Beitrag editieren. Dazu geht rechts ein Kontextwebpartmenü auf, wo man den Hero-WebPart bearbeiten kann.
Als Optionen hat man hier:
- Abschnitt Link:
- Die URL des Links bearbeiten.
- Den Haupttitel bearbeiten
- Die Option, den Titel im Layout anzuzeigen oder nicht.
| Mit | Ohne |
 |
 |
- Abschnitt Bild:
- Bildauswahl: Automatisch, Benutzerdefiniertes Bild oder Nur Farbe
| Automatisch | Benutzerdefiniertes Bild | Nur Farbe |
 |
 |
 |
 |
 |
 |
- Abschnitt Optionen:
- Option, den Link „Aufruf von Aktion“ anzuzeigen
- Der anzuzeigende Text
| Anzeigen | Nicht anzeigen |
 |
 |
Klick man auf den Doppelpfeil eines Abschnitts, so kann man diesen Abschnitt innerhalb des Hero WebParts verschieben.
Wo speichert der Hero WebPart seine Daten? Eine entsprechende Liste oder so gibt es nicht. Hmm, mal über Twitter nachfragen!
Weiter zum nächsten Bereich. Unterhalb des Hero WebPart Abschnitts hat Microsoft ein einspaltiges Layout eingefügt:
Der Abschnitt enthält drei vorher schon sichtbare Elemente und zwei (4 und 5), die erst in der Bearbeitungsansicht zu sehen sind.
- Nachrichten WebPart
- Ereignissse WebPart
- Der „Da hat etwas nicht geklappt“ WebPart.
- Quicklinks WebPart
- Personenprofile WebPart
| Name | Optionen |
| 1. Nachrichten WebPart | Nachrichtenwebpart (News headlines) hat als Layout Optionen Schlagzeilen, Liste und Nebeneinander.
|
| 2. Ereignisse WebPart | Hier kann an die Ereignisliste auswählen, die Kategorie der Ereignisse und den Zeitraum, für den die Ereignisse angezeigt werden sollen.
|
| 3. Der „Da hat etwas nicht geklappt“ WebPart | Keine Anzeige |
| 4. Quicklinks WebPart | Das Layout lässt sich einstellen und eine Option wählen, ob Bilder im Layout angezeigt werden sollen.
|
| 5. Personenprofile WebPart | Dieser WebPart hat keine Optionen.
|
Innerhalb eines Abschnitts kann man durch das Anklicken des Plus-Zeichens weitere WebParts hinzufügen.
Klickt man am Abschnittsende auf Plus, so kann man entweder einen WebPart direkt einfügen oder einen neuen Abschnitt.
Nachrichten hinzufügen
Um eine neue Nachricht hinzuzufügen, klickt man im Nachrichten WebPart auf „+ Hinzufügen“.
Man landet auf einer neuen Seite.
Hier kann man im oberen Bereich die Seite benennen und ein Hintergrundbild hinzufügen. Mit dem Plus darunter kann man den Nachrichteninhalt ergänzen.
Mit etwas Inhalt gefüllt sieht die Seite nach dem Speichern, aber noch unveröffentlicht, so aus:
Die Seite ist jetzt auch in der Websiteseiten Bibliothek zu finden.
Zurück zur Seite gibt es oben rechts die Option „Veröffentlichen“, die man anklicken muss, wenn man den Beitrag anderen zur Verfügung stellen möchte. Danach ist der Beitrag im Nachrichten WebPart auf unserer Home.aspx zu sehen:
In der Mobilansicht ist die Nachricht auch zu sehen.
Die Option, mobil eine neue Nachricht anzulegen, habe ich nicht gefunden. Jedenfalls nicht mit der iOS SharePoint App.
Ereignisse anlegen
Ereignisse lassen sich im Abschnitt unterhalb der Nachrichten über den Link „+ Ereignis hinzufügen“ hinzufügen.
Die jetzt erscheinende Seite sieht ähnlich der Nachrichtenseite aus, hat allerdings mehr einstellbare Optionen.
Man kann wieder ein Hintergrundbild vergeben, eine Überschrift, die Daten des Events und unten die Personen, die teilnehmen sollen. Mit dem „Speichern“ Button oben rechts wird das Event angelegt.
Ergebnis auf der Hauptseite im Edge:
und in der iOS SharePoint App:
Die Nachricht und das Ereignis sehen mobile so aus:
| Nachrichten | Ereignis |
 |
 |
Unter der Haube
– Die angelegten Nachrichten liegen als Seiten in der Websiteseiten Seitenbibliothek.
– Die Hintergrundbilder in der Websiteobjekte Dokumentenbibliothek (Pfad: Websiteobjekte/SitePages/newpage)
– Die Ereignisse liegen in der Ereignisliste. Hier kann man die Daten auch eingeben, man erhält aber den klassischen Eingabedialog und nicht den schönen, modernen.
Die Darstellung ist dann wieder „schön“:
– Für die Programmierung wird SPFx mit React verwendet, was man gut sehen kann, wenn man im Browser die Entwicklertools öffnet. Dann sieht man auch, dass nach dem body-Tag direkt ein script-Tag kommt, dass so einige Informationen über den Benutzer und die Seite beinhaltet:
Auch die obersten Ebenen im HTML finde ich spannend, doch das schaue ich mir ein anderes Mal im Detail an.
Jetzt nur so viel:
Das Script-Tag hinter dem Body beinhaltet Daten des angemeldeten Benutzers sowie der Seite (siehe Bild oben). Das darauffolgende div-Tag mit der class „SPPageChrome“ beinhaltet den sichtbaren Teil der HTML Seite. Hier gibt es ein div nach dem nächsten bis irgendwann react Kommentare zu sehen sind und html-Element, die auch auf der Seite sichtbar erscheinen.
Nach dem Haupt-Div kommen Elemente, die ich mir detaillierter anschauen muss. Das div mit der class „dragIconContainer…“ erscheint oben links neben der Waffel. Das Script-Element danach ist für den Inhalt des Nachrichten WebParts verantwortlich (_spNewsData). Im Script-Element mit der ID „spOnePageContext“ scheint des client side javaScript context der ganzen Seite zu stehen (__onePageContext mit bodyNodesBeforeOnePageNavigatioin, headNodesBeforeOnePageNavigation, workingOnIt-Text, requireJSPath, bundlePaths, requireConfig).
Verwunderlich ist das iframe am Ende. Warum? Auf der Seite ist es nicht sichtbar!
Soweit zum HTML-Teil!
Auf den Quicklinks WebPart und den Personenprofile WebPart gehe ich hier im Augenblick nicht ein.
Fazit
Ich finde es sehr interessant, welchen Ansatz Microsoft hier mit den Communication Sites verfolgt. Die Benutzung macht Spaß und die Bedienung ist nicht auf die Verwendung von kleinen Schaltflächen über Maussteuerung ausgelegt, sondern problemlos per Touch bedienbar. Wenn die mobile App noch nachzieht, kann man problemlos von unterwegs die Nachrichtenseiten im SharePoint pflegen. Das ist nicht ganz wie bei Yammer, wo die Leute den Beitrag nach der Veröffentlichung kommentieren und Liken können, aber prima für ereignis- und abwechselungsreiche Intranetseiten!
Ich denke Microsoft wird die letzten Fehler wie keine Anzeige in iOS Safari, die JavaScript-Fehlermeldungen und das Darstellproblem des unteren WebParts schnell lösen und uns das Final Release bald zur Verfügung stellen.
Ich freue mich drauf!
Privater Blog von Tomislav Karafilov 
Hi Tomislav, konntest Du schon feststellen, wie man die Farben (bisher Standard-Blau) ändern kann?
LikeGefällt 1 Person
Bisher habe ich nur die Möglichkeit gefunden, über die Designs die Farben mit zu ändern. Die Farbe eines einzelnen HeroItemElements zu ändern, gibt es nicht.
LikeLike
Hallo Tomislav,
konntest du eine Möglichkeit finden, wie man an ein HeroItemElement mehrere Bilder anhängen kann, die sich automatisch abwechseln? Weiter wäre es auch klasse Videos, die auf Klick abgespielt werden, einzubinden.
Wenn die Daten des Nutzers bei den Event erfasst werden, gibt es dann auch die Möglichkeit, dass sich Benutzer anmelden und ich später eine Liste der Teilnehmer generieren kann?
LikeGefällt 1 Person
Ich hatte gerade letzte Woche geschaut, ob man Videos im HeroWebPart einhängen kann. Ging leider nicht. Und die Events sind eher Termine, ohne Teilnehmerliste.
LikeLike