Erstellen von Artikeln im Publishing-System

Das Erstellen von Artikeln basiert nicht auf WebPart-Seiten, sondern auf einem speziellen Seitenlayout. Dies verknüpft zwei Informationen:

1. Einen Inhaltstyp mit den Daten
2. Eine Seitenvorlage mit dem Layout

Die Seitenvorlage basiert ihrerseits wieder auf einem eigenen Inhaltstyp. Um nun Seiten mit einem freien Layout zu erstellen, werden diese zwei Inhaltstypen benötigt.

Die Ablage der finalen Seiten erfolgt in einer Dokumentenbibliothek, von der das dann der Veröffentlichungsprozess betrieben wird. Im Publishing-Bereich ist dies standardmäßig die Bibliothek „Seiten“ („Pages“).

Bei der Standardbibliothek sieht das nun folgendermaßen aus:

Es können also Seiten von folgende Typen angelegt werden:

• Seite
• Artikelseite
• Willkommensseite
• Fehlerseite

Die zugeordneten Inhaltstypen bestimmen die Datenstruktur einer Seite. Seiten dienen der komfortablen Erfassung von Inhalten. Hier ein Blick auf den Inhaltstyp „Artikelseite“:

Inhaltstyp für Daten

Der Inhaltstyp bestimmt also, was erfasst werden kann. Die Hierarchie für Veröffentlichungsinhaltstypen ist wie folgt (darunter die jeweils in dieser Ebene eingeführten Spalten):

• System
• Element
  • Title
  • Content Type
    
• Dokument
  • Datei
  • Created / Modified
    
  • Document Created By / Document Modified By
    
  • Name
    
  • Select
    
• Systemseite
  • Kommentare    
  • Geplantes Startdatum
  • Geplantes Enddatum
  • Kontakt    Person oder Gruppe
  • E-Mail-Adresse des Kontakts
  • Kontaktname
  • Kontaktbild
  • Rollupbild
  • Zielgruppen
  • Page Layout (PublishingPageLayout, Typ: URL)
  • Variation Group ID / Variation RelationShip Link
• Seite
  • Browsertitel
  • Meta-Beschreibung
  • Meta-Schlüsselwörter
  • Für Internet-Suchmaschinen ausblenden
• Artikelseite
  • Bild der Seite
  • Seiteninhalt
  • Hyperlinküberschriften
  • Nach Zeile
  • Artikeldatum
  • Bildüberschrift

Die Seite selbst wird als *.aspx-Seite erfasst und als Datei in der Bibliothek abgelegt. Die Inhalte stehen in der Seite selbst in der Bibliothek (den Feldern) und im Kopf der Seite. Was wo steht entscheidet der Inhaltstyp. Hier ein Blick in eine Artikelseite:

Das Leben der Seite entsteht erst, wenn ein Benutzer sich das ansieht. Die gerenderter Form entsteht also dynamisch. Das Ergebnis sieht dann so aus:

Das Layout einer Veröffentlichungsseite

Bei Sicht auf die Liste der Seiten ist das jeweils benutzte Layout zu sehen:

Es gehört zu den Eigenschaften, dass ein Benutzer ein Standardlayout präsentiert bekommt, das er anschließend beim Erfassen wechseln kann.

Das Standardlayout festlegen

Um das Standardlayout festzulegen, geht man folgendermaßen vor:

1. Website-Einstellungen
2. Aussehen und Verhalten
3. Seitenlayouts und Websitevorlagen

Im dritten (unteren) Teil der Seite kann man das Standardlayout festlegen:

Die Auswahl hier verhindert nicht, dass ein Autor das Layout später wechselt.

Das Layout wechseln

Befindet sich die Seite im Bearbeitungsmodus, kann das Layout im Menü-Band gewechselt werden:

Das Layout selbst kann an dieser Stelle nicht angepasst werden. Es muss vom Administrator bereitgestellt werden. Inhaltsautoren können lediglich ein Layout wählen.

Eigene Layouts werden in dem Auswahl-Dialog nur angezeigt, wenn Sie über ein Vorschaubild verfügen.

Eigene Inhaltsstrukturen und Layouts

Eigene Layouts basieren auf zwei Arbeitsschritten:

1. Anpassen des Inhaltstyps, damit die passenden Daten erfasst werden
2. Anpassen der Gestaltungsvorlage der Seite, um die Daten darzustellen

Als Grundlage für einen eigenen Inhaltstyp dient mindestens der Inhaltstyp „Systemseite“, denn auf dieser Ebene wird das Seiten-Layout verbunden (PublishingPageLayout). Allerdings ist dieser Typ versteckt, der nächste erreichbar ist „Seite“.

Anpassen des Inhaltstyps

Es sollen Produktinformationen erfasst werden. Dazu wird ein neuer Inhaltstyp basierend auf dem Typ „Systemseite“ und mit dem Name „Produkt“ erstellt.

1. Einstellungen
2. Web-Designer-Kataloge > Websiteinhaltstypen
3. Erstellen
4. Die Daten werden dann wie folgt ausgefüllt:
   1. Name: Produkt
   2. Beschreibung: Text für den Benutzer
   3. Gruppe: Inhaltstypen für Veröffentlichung
   4. Inhaltstyp: Seite
   5. Neue Gruppe: Nach Bedarf (z.B. Firmenname)

Nun werden dem Inhaltstyp die Spalten hinzugefügt, die für Produkte benötigt werden:

1. Einstellungen
2. Web-Designer-Kataloge > Websiteinhaltstypen
3. Auswahl der Gruppe und des Inhaltstyps
4. Aus neuer Websitespalte hinzufügen
   1. Produktname (Eine Textzeile, 30 Zeichen)
   2. Produktnummer (Eine Textzeile, 10 Zeichen)
   3. Produktbeschreibung (Vollständiger HTML-Inhalt mit Formatierung und Einschränkungen für die Veröffentlichung)
   4. Produkt
      abgekündigt (Ja/Nein mit Standardwert Nein)

Es kann nun die vorhandene Dokumentenbibliothek „Seiten“ („Pages“) benutzt werden.

Es kann immer nur eine solche Bibliothek in einer Site existieren. Wenn weitere benötigt werden, muss man eine Subsite anlegen.

Dann wird diese Bibliothek eingerichtet, um den Inhaltstyp zu nutzen:

1. Öffnen Sie die Bibliothek
2. Klicken Sie auf Bibliothek im Menü-Band und dann auf Bibliothekseinstellungen
3. Erweiterte Einstellungen > Verwaltung von Inhaltstypen zulassen > Ja

   

4. Aus vorhandenen Websiteinhaltstypen hinzufügen
5. Auswahl Fima > Produkt

   

6. Optional kann einer der Standardinhaltstypen wie Artikel entfernt werden
   1. Wählen Sie den Inhaltstyp aus
   2. Klicken Sie auf Diesen Inhaltstyp löschen (löscht nicht, sondern entfernt)

Anpassen der Gestaltungsvorlage

Nun wird die Gestaltungsvorlage angepasst. Dies erfolgt durch Hochladen einer Vorlage in die Master-Page-Gallery. Zuerst die beteiligten Elemente in den Site-Einstellungen:

Gehen Sie nun in den entsprechenden Katalog:

1. Einstellungen
2. Web-Designer-Kataloge > Gestaltungsvorlagen und Seitenlayouts
3. Suchen Sie ein Layout als Grundlage, z.B. ArticleLeft.aspx
4. Schauen Sie sich die Eigenschaften an (siehe nächste Abbildung)
   1. Der Basisinhaltstyp bestimmt die Verwendung
   2. Der Name, Beschreibung und Bild dient der Angabe für den Autor
   3. Das Bild ist zwingend erforderlich, damit das Layout im Menü-Band angezeigt wird
   4. Der zugeordnete Inhaltstyp bestimmt, wo dieses Layout verfügbar ist

Um ein eigenes Layout zu erstellen, wird eine der Beispielseiten modifiziert. Dazu muss diese zuerst heruntergeladen werden.

Die Vorgehensweise hier folgt nicht der in der Dokumentation beschriebenen Schrittfolge über den Design Manager. Der Design Manager ist für Power User und benutzt ein HTML-Layout mit Kommentaren als Platzhalter. Der Weg der hier beschrieben wird, ist schneller und kompakter und für Entwickler gedacht, die mit SharePoint-Steuerelementen umgehen können.

Laden Sie nun die Seite „ArticleLeft.aspx“ herunter. Innerhalb der Seite befinden sich Platzhalter, die sich auf die Gestaltungsvorlage (Master-Page) beziehen. Interessant ist hier nur der Bereich „PlaceHolderMain“ – der Inhalt der Seite. Dieser Platzhalter sieht folgendermaßen aus:

<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">
  <div class="article article-left">
    <PublishingWebControls:EditModePanel runat="server" 
                   CssClass="edit-mode-panel title-edit">
      <SharePointWebControls:TextField runat="server" FieldName="Title"/>
    </PublishingWebControls:EditModePanel>
    <div class="captioned-image">
      <div class="image">
        <PublishingWebControls:RichImageField 
                   FieldName="PublishingPageImage" runat="server"/>
      </div>
      <div class="caption">
        <PublishingWebControls:RichHtmlField FieldName="PublishingImageCaption"  
             AllowTextMarkup="false" 
             AllowTables="false" 
             AllowLists="false" 
             AllowHeadings="false" 
             AllowStyles="false" 
             AllowFontColorsMenu="false" 
             AllowParagraphFormatting="false" 
             AllowFonts="false" 
             PreviewValueSize="Small" 
             AllowInsert="false" 
             AllowEmbedding="false" 
             AllowDragDrop="false" 
             runat="server"/>
      </div>
    </div>    
    <div class="article-header">
      <div class="date-line">
        <SharePointWebControls:DateTimeField 
             FieldName="ArticleStartDate" runat="server"/>
      </div>
      <div class="by-line">
        <SharePointWebControls:TextField 
             FieldName="ArticleByLine" runat="server"/>
      </div>
    </div>
    <div class="article-content">
      <PublishingWebControls:RichHtmlField 
             FieldName="PublishingPageContent" 
             HasInitialFocus="True" 
             MinimumEditHeight="400px" 
             runat="server"/>
    </div>
    <PublishingWebControls:EditModePanel runat="server" 
             CssClass="edit-mode-panel roll-up">
      <PublishingWebControls:RichImageField 
             FieldName="PublishingRollupImage" 
             AllowHyperLinks="false" 
             runat="server" />
      <asp:Label text="<%$Resources:cms,Article_rollup_image_text15%>" 
             CssClass="ms-textSmall" runat="server" />
    </PublishingWebControls:EditModePanel>
  </div>
</asp:Content>

Die Seite stützt zwei Funktionen:

• Zusätzliche Anzeigen und Verhaltensweise beim Bearbeiten (PublishingWebControl:EditModePanel)
• Anzeige der Seiteninhalt mittels Steuerelementen (PublishingWebControl:NNN und SharePointWebControl:NNN)

Die Seite kann in zwei Anzeigeformen sein: Bearbeiten (Edit) und Anzeigen (Display).

Bereitstellen des neuen Layouts

Die Bereitstellung erfolgt durch Hochladen und Anpassen der Seitenvorlage. Laden Sie zuvor ein passendes Bild hoch oder wählen Sie ein vorhandenes.

1. Einstellungen
2. Web-Designer-Kataloge > Gestaltungsvorlagen und Seitenlayouts
3. Menü-Band > Dateien > Dokumentenupload
4. Wählen Sie dann den Inhaltstyp „Seitenlayout“ (das ist der, der das Layout beschreibt)
5. Korrigieren Sie ggf. den Namen, Titel und Beschreibung
6. Geben Sie den Pfad zur Bilddatei ein (das Bild sollte vorher hochgeladen werden)
7. Ordnen Sie den Inhaltstyp zu (das ist der, der die Daten beschreibt)

Nutzung des neuen Layouts

Erstellen Sie nun eine neue Seite mit diesem Layout:

Umgang mit Layout-Seiten

Layout-Seiten bestehen aus Steuerelementen. Mit SharePoint 2013 wurde der Design-Manager eingeführt, um die Erstellung auch ohne dedizierte Programmierkenntnisse zu ermöglichen. Leider ist die Benutzung trotz umfassender Oberfläche relativ kompliziert und keineswegs ein einfacher Weg zu einem guten Layout. Letztlich wird nur die Auswahl der Steuerelemente unterstützt, aber keine grafische Gestaltung.

Blick auf die Steuerelemente

Als Steuerelemente werden aktive Bausteine aus SharePoint bzw. dem SharePoint-Publishing-Feature bezeichnet, die sowohl einen Bearbeitungs- als auch einen Anzeigemodus unterstützen.

Zustände der Seite

Die Seiten befinden sich entweder im Zustand „Bearbeiten“ (Edit) oder „Anzeigen“ (Display). Dies kann mit EditModePanel gesteuert werden:

<PublishingWebControls:EditModePanel
             runat="server"
             PageDisplayMode="Edit">

Die Eigenschaft PageDisplayMode ist hier einsetzbar. Der Inhalt ist HTML. Mit der Eigenschaft CssClass wird eine bestimmte Klasse nur zu dem gewählten Zeitpunkt benutzt:

<PublishingWebControls:EditModePanel
runat="server"
CssClass="edit-mode-panel title-edit">

<SharePointWebControls:TextField
runat="server"
FieldName="Title"/>

Wird die Eigenschaft PageDisplayMode nicht angegeben, ist „Edit“ der Standardwert.

Eine weitere Eigenschaft ist sinnvoll, wenn der Inhalt Skripte oder Stile sind. Standardmäßig wird der Inhalt immer in ein <div>-Tag gepackt. Dies kann mit SuppressTag=“true“ unterdrückt werden.

Steuerelemente

Mögliche Steuerelemente für Feldwerte sind:

Mögliche Steuerelemente speziell für Feldwerte des Veröffentlichungs-Features sind:

Für Taxonomie-Felder aus dem Termstore wird folgendes Steuerelement benutzt („ProduktTerm“ ist der Name eines Beispielfelds und muss durch die GUID oder den Internal Name der Spalte des Inhaltstyps ersetzt werden):

<%@ Register Tagprefix="Taxonomy" Namespace="Microsoft.SharePoint.Taxonomy" Assembly="Microsoft.SharePoint.Taxonomy, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<Taxonomy:TaxonomyFieldControl FieldName="ProduktTerm" InputFieldLabel="Tags" runat="server"></Taxonomy:TaxonomyFieldControl>

Der erste Teil ist die Registrierung der passenden Assembly. Achten Sie hier auf die Version (16 ist für SharePoint 2016/Office 365, 15 für SharePoint 2013 usw.). Stellen Sie diesen Teil an den Anfang zu den übrigen @Register-Direktiven.

Weitere Gestaltungsbausteine

Des Weiteren kann folgendes benutzt werden:

• Alle WebParts inkl. WebPart-Zonen:
  • Medien und Inhalte
  • Dynamische Inhalte
• Geräteabhängige Bereiche (reagiert auf das Feld User-Agent des Clients)
• Sicherheitsbeschränkte Bereiche
• ASP.NET Code (nur Markup)

Zielgruppen

Neben der Steuerung der allgemeinen Anzeige kann auch Zielgruppenorientiert gearbeitet werden. Dazu wird das Steuerelement AuthoringContainer benutzt:

<PublishingWebControls:AuthoringContainer
   runat="server"
DisplayAudience="ReadersOnly">
<h1>Für Leser</h1>
</PublishingWebControls:AuthoringContainer>
<PublishingWebControls:AuthoringContainer
   runat="server"
   DisplayAudience="AuthorsOnly">
<PublishingWebControls:EditModePanel
   runat="server"
   PageDisplayMode="Display">
<h1>Display für Autoren</h1>
</PublishingWebControls:EditModePanel>
<PublishingWebControls:EditModePanel
   runat="server"
   PageDisplayMode="Edit">
<h1>Edit für Autoren</h1>
</PublishingWebControls:EditModePanel>
</PublishingWebControls:AuthoringContainer>

Eigenschaften

Neben den Feldern des Dateninhaltstyps lassen sich auch Feldeigenschaften anzeigen. So zeigen Sie die Anzahl der Zeichen an, die in einem Textfeld erlaubt sind (MaxLength):

<SharePointWebControls:FieldProperty
   FieldName="Produktname"
   PropertyName="MaxLength"
   runat="server"/>

Wird dies benutzt, um das Label anzuzeigen, sollte das Label das zum Feld automatisch erzeugt wird, ausgeblendet werden (auf dem Feld, nicht auf der Eigenschaft):

DisableInputFieldLabel=“true“

Der Design-Manager

Beim Design-Manager ist die Vorgehensweise etwas anders. Hier wird ein HTML-Layout erstellt, mit Kommentaren gefüllt, die die zuvor gezeigten Steuerelemente enthalten und dann wird dies hochgeladen und in die finalen Vorlagen konvertiert. Der Vorteil besteht darin, dass ein Designer / Grafiker mit reinem HTML arbeiten kann. Mit „Designer“-Funktionen hat dies indes wenig zu tun.

Gehen Sie folgendermaßen vor:

1. Einstellungen
2. Design-Manager > Seitenlayouts bearbeiten
3. Erstellen eines Seitenlayouts
   1. Name
   2. Master Seite (Gestaltungsvorlage)
   3. Inhaltstyp (hier: Produkt)

Klicken Sie die Vorlage in der Liste der Vorlagen (erscheint automatisch) nun an. Die Seite erscheint als Vorschau. Laden Sie die Seite zum Bearbeiten herunter. Nutzen Sie die Funktion „Ausschnitt“ (Snippets), um die Steuerelemente-Codes zu ermitteln.