SharePoint Communication Site: Eingerichtet, ausprobiert – mein erster Eindruck (und etwas unter die Haube geschaut)

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:

FirstReleaseInGerman

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:

HeadImage

Communication Site anlegen

Wählt man die Kommunikationswebsite (rechts) aus, kommt man zur Erstellungsseite für eine Kommunikationswebsite:

KommunikationAuswahlseite

Bei den Designs gibt es drei verschiedene Möglichkeiten:

  1. Melden (siehe im Bild oben)
  2. Portfolio

Portfolio

  1. Leer

LeerDesign

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.

KommunikationEinrichtung

Nach einigen Sekunden Wartezeit erscheint die neue Seite, bereits zur Verwendung.

KommunikationSite1.png

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:

https://support.office.com/en-us/article/What-is-a-SharePoint-communication-site-94a33429-e580-45c3-a090-5512a8070732

Interessant ist es im DOM Explorer sich den Teil anzuschauen:

KommunikationDom1.png

Ob da react (https://facebook.github.io/react/) verwendet wird 🙂 ?

In der aktuellen Vorversion werden zwei JavaScript Fehlermeldungen angezeigt:

KommunikationJavaScriptError

  1. https://<…>.sharepoint.com/sites/KommunikationwebsiteMelden1/_api/web/Lists/GetByTitle(‚Documents‘)/RenderListDataAsStream?View=

Der Aufruf findet die Liste „Documents“ nicht, da ich einen Deutschen Tenant habe und die Liste hier „Dokumente“ heißt.

  1. https://<…>.sharepoint.com/sites/KommunikationwebsiteMelden1/SitePages/none

Verweis auf SitePages/none, aber „none“ gibt es in SitePages nicht!

Wenn man die Seite etwas weiter runter scrollt, sieht man Nachrichten und Ereignisse.

KommunikationNachrichten.png

KommunikationEreignisse.png

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:

 MobileKom1  MobileKom2

Was wurde sonst noch angelegt?

–> 3 Dokumentenbibliotheken, 1 Ereignisliste und 1 Seitenbibliothek

KommunikationSonstNochAngelegt.png

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.

KommunikationBearbeiten.png

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.

KommunikationLayoutOptionen.png

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.

KommunikationHeroWebPartKontextMenue

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
 KommunikationBildMit  KommunikationBildOhne
  • Abschnitt Bild:
    • Bildauswahl: Automatisch, Benutzerdefiniertes Bild oder Nur Farbe
Automatisch Benutzerdefiniertes Bild Nur Farbe
 KommunikationBildAutomatischOben.png  KommunikationBildBenutzerBildOben.png  KommunikationBildFarbeOben.png
 KommunikationBildAutomatischUnten.png  KommunikationBildBenutzerBildUnten.png  KommunikationBildFarbeUnten.png
  • Abschnitt Optionen:
    • Option, den Link „Aufruf von Aktion“ anzuzeigen
    • Der anzuzeigende Text
Anzeigen Nicht anzeigen
KommunikationBildAnzeigen.png  KommunikationBildNichtAnzeigen.png

Klick man auf den Doppelpfeil eines Abschnitts, so kann man diesen Abschnitt innerhalb des Hero WebParts verschieben.

KommunikationBildVerschieben.png

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:

AbschnittLayout

Der Abschnitt enthält drei vorher schon sichtbare Elemente und zwei (4 und 5), die erst in der Bearbeitungsansicht zu sehen sind.

  1. Nachrichten WebPart
  2. Ereignissse WebPart
  3. Der „Da hat etwas nicht geklappt“ WebPart.
  4. Quicklinks WebPart
  5. Personenprofile WebPart
Name Optionen
1.      Nachrichten WebPart Nachrichtenwebpart (News headlines) hat als Layout Optionen Schlagzeilen, Liste und Nebeneinander.

NachrichtenWebPart

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.

EreignisseWebPart

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.

QuickLinksWebPart

5.      Personenprofile WebPart Dieser WebPart hat keine Optionen.

PersonenProfileWebPart

Innerhalb eines Abschnitts kann man durch das Anklicken des Plus-Zeichens weitere WebParts hinzufügen.

WebPartsHimzufuegen.png

Klickt man am Abschnittsende auf Plus, so kann man entweder einen WebPart direkt einfügen oder einen neuen Abschnitt.

AbschnittHinzufuegen.png

Nachrichten hinzufügen

Um eine neue Nachricht hinzuzufügen, klickt man im Nachrichten WebPart auf „+ Hinzufügen“.

Nachrichten.png

Man landet auf einer neuen Seite.

NachrichtenNeueSeite.png

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:

NachrichtenMitInhalt.png

Die Seite ist jetzt auch in der Websiteseiten Bibliothek zu finden.

NachrichtenInWebSiteBib

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:

NachrichtenAufHomeAspx.png

In der Mobilansicht ist die Nachricht auch zu sehen.

NachrichtenAufHomeAspxMobil

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.

Ereignisse.png

Die jetzt erscheinende Seite sieht ähnlich der Nachrichtenseite aus, hat allerdings mehr einstellbare Optionen.

EreignissSeite.png

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.

EreignissSeiteAusgefuellt.png

Ergebnis auf der Hauptseite im Edge:

EreignissAufHauptSeiteImEdge.png

und in der iOS SharePoint App:

EreignissAufHauptSeiteInIos

Die Nachricht und das Ereignis sehen mobile so aus:

Nachrichten Ereignis
 NachrichtMobil  EreignissMobil

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.

EreignissUeberListe

Die Darstellung ist dann wieder „schön“:

Ereigniss2AufHomeAspx

–         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:

EdgeEntwicklertools1.png

Auch die obersten Ebenen im HTML finde ich spannend, doch das schaue ich mir ein anderes Mal im Detail an.

EdgeEntwicklertools2.png

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!

Advertisements

2 Gedanken zu „SharePoint Communication Site: Eingerichtet, ausprobiert – mein erster Eindruck (und etwas unter die Haube geschaut)

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s