Wie im letzten Beitrag beschrieben ist es recht einfach dem SharePoint 2010 ein neues Aussehen zu geben, doch sobald man Styles anpassen möchte, die nicht Bestandteil des Office Themings sind, muss die Herangehensweise geändert werden.
Wenn man zum Beispiel die alternierende Hintergrundfarbe von Tabellenzeilen anpassen möchte, muss man zunächst den gewünschten Style identifizieren, damit man diesen überschreiben oder anpassen kann. Die Internet Explorer Developer Toolbar hilft hierbei schnell die gewünschten Identifier oder CSS-Klassen zu lokalisieren (Abbildung 1)
In Abbildung 1 ist zu sehen, dass die CSS-Klasse “ms-alternating” als Einstiegspunkt verwendet werden kann. Mit dieser Information kann nun mit der Realisierung gestartet werden. Um das gewünschte Ergebnis zu erlangen, gibt es mindestens :) zwei Wege. Entweder wird das Styling mittels JQuery gemacht oder man lädt eine eigens geschriebene CSS-Datei in der entsprechenden Seite. In diesem Post möchte ich lediglich auf die JQuery Variante eingehen, weil diese meiner Meinung nach die größten Vorteile in Punkto agile Entwicklung im SharePoint bringt.
Style-Anpassungen mit JQuery in SharePoint 2010
Bei der JQuery-Variante muss zunächst sichergestellt werden, dass JQuery im SharePoint zur Verfügung steht. Der beste Weg JQuery in den SharePoint zu integrieren ist, es als DelegateControl in den AdditionalPageHead zu injecten.
Hierzu muss zunächst die gewünschte JQuery Version von der JQuery-Homepage http://www.jquery.com heruntergeladen werden. Das kleine Javascript File kann durch einen einfachen “Mapped Folder” innerhalb eines SharePoint Projektes einfach in den Layouts Folder deployed werden.
Der nächste Schritt ist, ein eigenes UserControl zu schreiben, welches den Script-Link auf die JQuery-Datei in die SharePoint Seite(n) rendert. Hierzu kann man sich auch wieder dem “Mapped Folder” Feature bedienen und den Ordner ControlTemplates aus dem SharePoint Root mappen.
Das neue Control benötigt zunächst nur den Scriptverweis auf die JQuery Datei, wie das Code-Snippet zeigt. Der gelb hinterlegte Code wird automatisch vom Visual Studio 2010 Template generiert, so dass nur die unterste Zeile manuell geschrieben werden muss.
<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0,
Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls"
Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities"
Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI"
Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages"
Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="JQueryInjector.ascx.cs"
Inherits="SharePointTheming.CONTROLTEMPLATES.SharePointTheming.JQueryInjector" %>
<script type="text/javascript" src="/_layouts/SharePointTheming/jquery-1.4.2.min.js"></script>
Damit SharePoint das neu entwickelte Control auch an die richtige Stelle (AdditionalPageHead) setzt, muss nun noch eine Elements xml hinzugefügt werden, in welcher der SharePoint diese Anweisung erhält.
In der Elements XML wird folgende Node hinzugefügt.
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<Control Id="AdditionalPageHead" Sequence="9000"
ControlSrc="~/_controltemplates/SharePointTheming/JQueryInjector.ascx"/>
</Elements>
Als letztes Requirement fehlt noch das eigentliche Feature welches ebenfalls einfach über das Contextmenü im Solution-Explorer hinzugefügt werden kann.
Nun kann endlich mit dem eigentlichen stylen des SharePoint begonnen werden. Hierzu muss lediglich der JQuery Code in das JQueryInjector.aspx UserControl eingefügt werden. Wie man Abbildung 1 entnehmen kann, muss die Hintergrundfarbe der Klasse ms-alternating angepasst werden. Drei Zeilen JQuery sind nötig um dies zu erreichen.
<script type="text/javascript">
$(document).ready(function () {
$(".ms-alternating").css("background-color", "#E3EFFF");
$("").css("background-color", "#1F703D");
});
</script>
Installiert und aktiviert man diese Solution nun auf der gewünschten SharePoint Seite, so werden alle Elemente die die CSS-Klasse ms-alternating verwenden automatisch entsprechend der Vorgabe aus dem JQuery Script eingefärbt.
Der Vorteil dieser Realisierungsvariante liegt ganz klar darin, dass JQuery neben dem Styling noch viele weitere Aufgaben im SharePoint übernehmen kann. Ohne JQuery benötigt man häufig viel mehr Aufwand um Dinge zu realisieren, die mit JQuery in wenigen Zeilen JavaScript code erledigt wären.