Klassische SharePoint Oberflächen anpassen – Neue Themes erstellen

 

In praktisch jedem Projekt kommt früher oder später die Frage nach der optischen Anpassung einer SharePoint Oberfläche. Wobei damit nicht die Neupositionierung oder Neuanlage von Seitenelementen gemeint ist, sondern die Anpassung der Farben von Beschriftung und der Darstellung von Hintergrundbildern. Ein Set aus Farben und Bildern wird Theme genannt. Es gibt schon eine ganze Reihe vordefinierter Themes, Sie können aber relativ einfach auch selber welche erstellten. Ob Sie dabei SharePoint lokal betreiben oder in der Cloud, spielt keine Rolle. Wichtig ist nur, wenn Sie diesen Artikel nutzen möchten, müssen Sie in der klassischen Ansicht arbeiten, da die moderne Ansicht Themes auf andere Weise verwendet. Wenn Sie modern Sites anpassen möchten, geht es hier weiter: https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/site-theming/sharepoint-site-theming-overview  oder zu dem guten Artikel von Martin Schlenker.
Dieser Artikel erläutert Ihnen die Themeanpassung von klassischen SharePoint Sites ab SharePoint 2013.

Arbeiten mit vorhandenen Themes

Um ein vorhandenes Theme auszuwählen, klicken Sie auf das Zahnrad oben rechts und dann auf Site Settings. Im Abschnitt Look and Feel klicken Sie auf den Link Change the look. Abhängig von Ihrer Konfiguration findet sich dieser Link auch direkt im Menü des Zahnrades. Sie erhalten eine Übersicht aller bisher vorhandenen Themes. Klicken Sie auf das, welches Sie nutzen möchten. Sie erhalten eine Vorschau, in welcher Sie noch das Farbset und das Hintergrundbild ändern können. Außerdem ist es auch möglich die Masterpage und den Font auszuwählen. Wenn Sie mit Ihrer Auswahl zufrieden sind, klicken Sie oberhalb der Abbildung auf Try it out.
2018-11-14_07h55_15

SharePoint benötigt einige Zeit und Sie sehen eine Vorschau Ihrer Auswahl zusammen mit Ihrem Inhalt. Wenn Sie diese Auswahl behalten möchten, klicken Sie oben rechts auf Yes, keep it. Beachten Sie, dass keine Elemente verschoben wurden, sie wurden nur farblich angepasst.

Ein neues Theme erstellen

Oftmals reichen die mitgelieferten Themes nicht aus und man möchte gern einen neues erstellen. Da sich ein Theme auf Dateiebene schwer bearbeiten läßt, stellt Microsoft dafür das Werkzeug SharePoint Color Palette Tool kostenfrei zur Verfügung. Sie können dies unter https://www.microsoft.com/en-us/download/details.aspx?id=38182 herunterladen. Starten Sie nach der Installation das Programm. Beim ersten Mal macht das Tool einen etwas verwirrenden Eindruck, die folgende Abbildung sollte dabei etwas helfen.

2018-11-14_08h07_35

  1. In diesem Dropdown können Sie die Masterpage auswählen, welche in der Vorschau verwendet wird. Außerdem sind noch zwei Tests möglich.
  2. Die Vorschau, wo Sie prüfen können welche Auswirkungen Ihre Änderungen haben.
  3. Hier können Sie ein Hintergrundbild hochladen oder ändern.
  4. Verschiedene Einstellungen für die Vorschau.
  5. Hier können Sie eine primäre Farbe auswählen und mit einem Klick auf Recolor diese auf alle Elemente anwenden.
  6. Dies ist tatsächlich ein Dropdown und legt Ihnen fest, wie die einzelnen Seitenelemente die Sie ändern können in der Anzeige gruppiert werden. Ich wähle immer UI Groups, da mir dies eine schnellere Arbeit erlaubt.
  7. Die einzelnen Oberflächenelemente, welche Sie ändern können. Wenn Sie auf eine Gruppe oder auf ein einzelnes Element klicken, können Sie die Farbe ändern.
  8. Wenn Sie alle Einstellungen vorgenommen haben, können Sie ein Theme hier als spcolor Datei speichern.

Experimentieren Sie ruhig damit herum in der schönen Gewissheit: Sie können nichts zerstören.

Wenn Sie das neue Theme als spcolor Datei gespeichert haben, gehen Sie wieder in die Siteeinstellung von SharePoint. Dort wieder in die Web Designer Galleries auf den Punkt Themes und dann in den Ordner 15.  Laden Sie die neue spcolor Datei in diesen Ordner hoch und notieren Sie sich den Namen. Gehen Sie wieder in die Web Designer Galleries und dann in Composed looks. Erstellen Sie hier ein neues Element und geben Sie dazu den Titel und den Namen ein. Wichtig ist die Theme URL, welche mit dem ganzen Pfad eingegeben werden muss. In meinem Fall, da ich die gespeicherte Datei red.spcolor genannt habe, ist der Pfad also https://<URL der Site>/_catalogs/theme/15/red.spcolor. Speichern Sie den neuen Eintrag, wenn Sie jetzt wieder ein Theme auswählen, sollten Sie dies auch verwenden können. Haben Sie dem Theme ein Bild oder eine Schriftart mitgegeben, dann müssen Sie diese natürlich auch noch angeben.
Haben Sie diese Anforderung schon einmal gehabt? Oder eine andere Frage? Dann schreiben Sie einen Kommentar!

 

Vielen Dank für Ihr Interesse an meinem Blogeintrag.
Gerne beantworte ich Ihnen persönlich weitergehende Fragen zu diesem Thema.
Kontaktieren Sie mich einfach über mein Kontaktformular oder schreiben Sie einen Kommentar.
Sie wollen mehr über meine Leistungen erfahren? Dann klicken Sie hier.

 

Arbeiten mit dem Webpart für Inhaltssuche – Teil 3 – Arbeiten mit Displaytemplates

Arbeiten mit dem Webpart für Inhaltssuche – Teil 1 Übersicht
Arbeiten mit dem Webpart für Inhaltssuche – Teil 2 – KQL
Arbeiten mit dem Webpart für Inhaltssuche – Teil 3 – Arbeiten mit Displaytemplates
Arbeiten mit dem Webpart für Inhaltssuche – Teil 4 – Vordefinierte Suchen erstellen

Dies ist der dritte Beitrag in der kleinen Serie über den Webpart für Inhaltssuche in SharePoint 2013. In den vorherigen Beiträgen haben wir uns angeschaut, wie der Webpart konfiguriert wird und wie Sie Suchabfrage gestalten können. Jetzt wird es darum gehen, wie wir die Suchanfrage optisch aufpeppen können. Denn die schon vorhandenen Vorlagen sind, abgesehen von den Funktionen für Bilder, eher sehr technisch. Ich werde mich dabei auf eine einfache Anwendung konzentrieren, es gibt im Internet viele Blogs welche sich dem Thema angenommen haben. Wenn man einmal das Prinzip verstanden hat, kann man auch schnell eigene Lösungen implementieren.

Die Vorlagen heißen Displaytemplates und gibt eine ganze Menge davon im System. Displaytemplates regeln sowohl die prinzipielle Anzeige der Suchergebnisse (Tabelle, Liste, Slideshow) als auch die Anzeige der einzelnen Elemente (welche Metadaten werden angezeigt, wie groß ist ein Bild). Ebenso werden Displaytemplates verwendet, wenn beim Überfahren eines Elementes eine Vorschau angezeigt wird.

Für Demonstrationszwecke werde ich eine vorhandene Vorlage anpassen und diese ergänzen. Im ersten Teil habe ich mit dem Displaytemplate Two Lines gearbeitet und dort zusätzlich das Metadatum Author eingefügt. Jetzt möchte ich, dass vor dem Metadatum der Begriff Autor steht. Dazu muss das vorhandene Displaytemplate kopiert werden, in der Kopie erfolgt dann die Anpassung. Die Displaytemplates sind im Pfad http:///_catalogs/masterpage/Display%20Templates gespeichert. Dieser bzw. sein Inhalt ist allerdings nicht immer sichtbar im Browser. Wenn dies der Fall ist, müssen Sie das SharePoint Publishingfeature aktivieren. Um zum Pfad zu navigieren, gehen Sie zu den Site Settings und dann zu Master pages and page layouts im Abschnitt Web Designer Galleries. Auch diesen Link finden Sie erst nach der Aktivierung des Features. Sie sehen eine Bibliothek, in welcher alle Pagelayouts und Masterpages liegen sowie einige Ordner. Suchen Sie den Ordner Display Templates und öffnen Sie diesen. Die Displaytemplates für den Webpart für Inhaltssuche liegen im Unterordner Content Web Parts. Dort finden Sie jetzt alle Displaytemplates , welche Sie auch im Webpart auswählen können.

Um möglich einfach zu arbeiten, öffnen sie Sie die Bibliothek im Windows Explorer. Klicken Sie dazu auf das Menüband Library und im Abschnitt Connect & Export auf Open with Explorer. Wenn Sie möchten, können Sie den Pfad auch einen Laufwerkbuchstabe zuweisen. Sie können dann in jeden beliebigen HTML Designer arbeiten, denn die Displaytemplates bestehen nur aus HTML und JavaScript. Beide zusammen bilden dann jeweils ein Displaytemplate.

Angepasst werden immer nur die HTML Dateien, NIEMALS die JS Dateien. Die JS Dateien werden von SharePoint automatisch erzeugt wenn eine HTML Datei gespeichert wird und sind für die Bearbeitung tabu. Suchen Sie die Datei Item_TwoLines.html und kopieren Sie diese zu Item_TwoLines_with_Author.html. Sie werden sehen, unmittelbar danach wird auch die entsprechende JS Datei erstellt. Ich öffne die kopierte HTML Datei in Notepad++, aber natürlich geht auch jede anderer Editor.

Es lohnt sich die Datei einmal in aller Ruhe anzuschauen. Sie enthält viele Möglichkeiten und Ideen, was mit Displaytemplates alles möglich ist. Ich gebe nur einen kleinen Abriss, um zu zeigen was man mindestens für ein eigenes Displaytemplate machen muss. Als erstes sollten wir den Titel in Zeile drei ändern. Unter diesen Namen können wir nämlich später das Displaytemplate im Webpart auswählen. Unschön, wenn es zwei Displaytemplates mit dem gleichen Namen gibt. Ich nenne mein Displaytemplate TwoLines with Author.

<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<title>TwoLines with Author</title>

Als nächstes interessant ist die Zeile acht. In dieser Zeile legen Sie fest, mit welchen verwalteten Eigenschaften Sie im Displaytemplate arbeiten möchten. Dabei gibt es immer ein Wertepaar, interne Bezeichnung der Eigenschaft und Anzeigename. Da in unseren Fall allerdings die Werte über Eingabefelder (Line1 und und Line2) übergeben werden, brauchen wir die Eigenschaften hier nicht extra zu benennen.

Es folgt einiger JavaScript Code, welcher in Token

<!--#_ _#-->

eingeschlossen ist. Die eigentliche Darstellung erfolgt erst ab Zeile 63. In Zeile 73 steht die Darstellung der zweiten Zeile.

<div class="cbs-Line2 ms-noWrap" title="_#= $htmlEncode(line2.defaultValueRenderer(line2)) =#_" id="_#= line2Id =#_">_#= line2 =#_</div>

Wir können jetzt erkennen, dass hier sowohl reines HTML als auch JavaScript vermischt wird. Der JavaScript Code steht wieder in Token. Der Wert der Eigenschaft steht vor dem letzten Div in _#= line2 =#_ . Also ändere ich die Zeile folgendermaßen indem ich direkt davor Author schreibe:
Orginal

<div class="cbs-Line2 ms-noWrap" title="_#= $htmlEncode(line2.defaultValueRenderer(line2)) =#_" id="_#= line2Id =#_">_#= line2 =#_</div>

Mit Änderung

<div class="cbs-Line2 ms-noWrap" title="_#= $htmlEncode(line2.defaultValueRenderer(line2)) =#_" id="_#= line2Id =#_">Author: _#= line2 =#_</div>

Speichern Sie die Änderung.

ACHTUNG: Damit alle Benutzer die Änderung später sehen, muss das geänderte Displaytemplate noch veröffentlicht werden. Gehen Sie im Browser deshalb zu der Bibliothek, markieren Sie die Datei und wählen Sie aus der Menüleiste Publish Dieser Vorgang ist jedes Mal erforderlich, wenn Sie ein fertiges Displaytemplate zur Verfügung stellen wollen. Veröffentlichen Sie nur die HTML Datei, um die JS Datei kümmert sich SharePoint alleine.


Damit Sie das neue Displaytemplate auswählen können, müssen Sie die Seite neu laden, welche den Webpart für Inhaltssuche enthält und diesen wieder zur Bearbeitung auswählen.

Unter Property Mappings können wir das Metadatum Author auswählen, welches dann auch in der zweiten Zeile zusammen mit dem Suffix angezeigt wird. Natürlich wird jetzt immer der Präfix Author angezeigt, aber als Beispiel soll es genügen.

Dies alles nur als Beispiel. Wenn man das konsequent zu Ende denkt, kann eine Anwendung entstehen, wie sie Maggi erstellt hat. Die Rezepte arbeiten mit der Suche und die Präsentation der Suchergebnisse erfolgt mit Displaytemplates. https://www.maggi.de/rezepte. Displaytemplates sind DAS Mittel zur Wahl zur Präsentation von Inhalten in SharePoint. Auch, aber nicht nur deswegen sollte man überlegen mehr Inhalte über die Suche zu erschließen und auf Drilldown Strukturen immer mehr zu verzichten.

Vielen Dank für Ihr Interesse an meinem Blogeintrag.
Gerne beantworte ich Ihnen persönlich weitergehende Fragen zu diesem Thema.
Kontaktieren Sie mich einfach über mein Kontaktformular.
Sie wollen mehr über mich erfahren? Dann gehen Sie auf
http://www.nicothiemer.de

PopUp Fenster in SharePoint selber erstellen

PopUp Fenster in SharePoint selber erstellen

Ein Anforderung in SharePoint Projekten ist oft, dass man in einem Dashboard steht welche verschiedene Listen-Webparts enthält und man möchte in einer dieser Listen einen Eintrag erstellen ohne die Seite zu verlassen. Das geht natürlich am besten mit einem Overlay, indem die Seite für einen neuen Eintrag direkt über die bestehende Seite geöffnet wird. Dafür gibt es mehrere Möglichkeiten.

1. Anpassen der Dialogfelder in der Liste

In SharePoint 2013 und SharePoint Online werden die Formulare einer Liste in einer Seite geöffnet, d.h. man verlässt die aktuelle Seite und verliert damit den Kontext. Dieses Verhalten lässt sich aber ändern. Gehen Sie dazu in die Verwaltung der Liste und klicken Sie dort auf Advanced settings. Gehen Sie ganz nach unten und setzen sie bei Launch forms in a dialog? Die Auswahl auf Yes. Schon haben Sie wieder modale Fenster.

2a. Ein PopUp selber erstellen (SharePoint 2013)

Wenn Sie ein PopUp selber erstellen möchten, gibt es einen Unterschied zwischen SharePoint 12010 und 2013. Schauen wir uns zuerst die Möglichkeit in SharePoint 2013 an. Kopieren Sie zuerst die URL, welche sich im PopUp öffnen soll. Fügen Sie dann auf der Seite, über der sich das PopUp öffnen soll, einen Script Editor WebPart ein. Sie finden diesen Webpart in der Kategorie Media and Content.

Editieren Sie dem Webpart und fügen Sie den folgenden Code ein wobei Sie <Ihre URL> mit Ihrer URL und <Ihr Text>mit ihren gewünschten Text ersetzen. Speichern, testen und freuen.

<a href=“Javascript:OpenPopUpPage(‚<Ihre URL>‘);“ ><Ihr Text></a>

Achten Sie auf die verschiedenen Anführungszeichen, diese müssen exakt gesetzt werden.

2b. Ein PopUp selber erstellen (SharePoint 2010)

In SharePoint 2010 ist es nicht ganz so einfach, denn dort gibt es keinen Script Editor WebPart. Dafür haben Sie aber, ebenso wie in SharePoint 2013, einen Inhalts Editor Webpart. Schreiben Sie ihren gewünschten Code in eine Textdatei und speichern sie diese unter einem beliebigen Name mit der Endung .html. Laden Sie diese in eine Bibliothek hoch. Setzen Sie einen Inhalts Editor Webpart auf die gewünschte Seite und Editieren Sie diesen. Geben Sie in den Eigenschaften des Webparts unter Content Link den Pfad zu der hochgeladenen HTML Datei an. Speichern, testen und freuen.

Vielen Dank für Ihr Interesse an meinem Blogeintrag.
Gerne beantworte ich Ihnen persönlich weitergehende Fragen zu diesem Thema.
Kontaktieren Sie mich einfach über mein Kontaktformular.
Sie wollen mehr über mich erfahren? Dann gehen Sie auf
http://www.nicothiemer.de

Nico Thiemer

Arbeiten mit unterschiedlichen Größenformaten (Image Renditions) in SharePoint Server 2013

Ein Manko bei vorherigen SharePoint Versionen war der Mangel an unterschiedlichen Größenformaten für ein Bild. So soll ein mobiles Gerät eine andere Auflösung erhalten wie ein Desktop und ein Tablet wiederum eine andere Auflösung. Außerdem wäre es noch nett, wenn die jeweiligen Geräte einen bestimmten Ausschnitt des Bildes sehen würden. All dies ist mit SharePoint 2013 möglich und erfordert auch nicht viel Konfigurationsaufwand. Dieser Artikel beschreibt wie es geht.

Die Funktion steht nur in SharePoint Server bzw. natürlich auch in SharePoint Online zur Verfügung. Voraussetzung dafür ist zuerst, dass auf Ebene der Websitesammlung und in der Website der obersten Ebene das Feature SharePoint Server-Veröffentlichung aktiviert wird. Ohne diesen geht es nicht. Weiter muss die Web.config der Websitesammlung angepasst werden. Dies ist natürlich bei SharePoint Online nicht nötig.

Die web.config finden Sie im Normalfall unter C:\inetpub\wwwroot\wss\VirtualDirectories\. Bevor Sie die Web.config editieren, machen Sie unbedingt eine Sicherungskopie davon! Ist diese Datei beschädigt, wird SharePoint nicht mehr funktionieren. Öffnen Sie die Datei und suchen Sie nach den Eintrag <BlobCache. Am Ende der Zeile steht der Eintrag enabled=“false“. Ändern Sie diesen auf enabled=“true„.

Achtung: Nach dem speichern der Änderung kann es eine Weile dauern, bis SharePoint wieder verfügbar ist. Nehmen Sie die Änderung nicht während Ihrer Produktionszeiten vor. Wenn Sie mehrere Frontendserver haben, müssen Sie die Änderung auf jeden Frontendserver vornehmen.

Es gibt in SharePoint verschiedene, vorkonfigurierte Sätze, welches Format die alternativen Bilder haben sollen. Diese finden Sie in den Websiteeinstellungen der Website der obersten Ebene unter dem Punkt Bilddarstellungen. Natürlich können Sie dort auch neue Formate anlegen.


Gehen Sie in eine Bildbibliothek und lassen Sie sich die Eigenschaften eines Bildes anzeigen, können Sie auch das einzelne Bild bearbeiten. Dort legen Sie die verfügbaren Formate und den jeweiligen Ausschnitt fest. Für jedes Format für jedes Bild kann der Ausschnitt individuell festgelegt werden.


Wählen Sie ein Format und klicken Sie dann auf Zu ändernde Formatierung. Den Ausschnitt können Sie dann verschieben.


Die Formate der Bilder selber liegen übrigens nicht in der SharePoint Datenbank. In dieser liegt nur das Originalbild. Die Formate werden bei Bedarf erstellt und in dem Ordner abgelegt, welcher in der Web.config im Schlüssel BlobCache angegeben ist. Das heißt natürlich auch, jedes Bild bzw. dessen alternatives Format verbraucht auch Plattenplatz. Beachten Sie dies bei der Konzeption!

Wenn Sie ein Bild in eine Webseite einfügen, können Sie nun entscheiden welches Format Sie haben möchten. Fügen Sie dazu über Einfügen -> Bild -> von SharePoint das gewünschte Bild ein. Klicken Sie anschließend auf das Bild und klicken Sie auf die Schaltfläche Formatvariante auswählen. Das war es dann auch schon.


Vielen Dank für Ihr Interesse an meinem Blogeintrag.
Gerne beantworte ich Ihnen persönlich weitergehende Fragen zu diesem Thema.
Kontaktieren Sie mich einfach über mein Kontaktformular.
Sie wollen mehr über mich erfahren? Dann gehen Sie auf meine Site
http://www.nicothiemer.de

Nico Thiemer