SharePoint 2013 – Benutzerdefinierte Formatierung mit Javascript und Eingabefeld

In einem vorangegangenen Artikel habe ich bereits beschrieben, wie mit Javascript bestimmte Inhalte in z.B. einer Liste nach Wunsch farbig formatiert werden können (Spalte Status).
Siehe: http://blog.ppedv.de/post/2014/09/10/SharePoint-2013-bedingte-Formatierung-verwenden.aspx

In diesem Blog möchte ich die Idee der bedingten Formatierung noch etwas erweitern. Der Wunsch lautet nun wie folgt: ein Benutzer möchte nach einem individuellen Eintrag vom Typ Datum suchen, bezogen auf ein oder mehrere in der Liste in einer beliebigen Spalte stehenden Datum oder mehreren Datumswerten. Die Suche soll in der Liste mittels eines Eingabefeldes als Datum erfolgen, welches nach einem Klick auf eine danebenstehende Schaltfläche farbig angezeigt wird. Außerdem soll in der Liste das aktuelle Datum immer bspw. gelb hervorgehoben sein.

Nachfolgend greife ich dieses Beispiel mit einem Datumsfeld inklusive Schaltflächen auf. So soll das Endresultat von der Formatierung her also aussehen.

clip_image002

Um die Tabelle, wie angezeigt entsprechend formatieren zu können, wird etwas JavaScript Code benötigt. Es gilt wie im vorherigen Blogartikel beschrieben, die Ansicht “Alle Elemente” mithilfe von SharePoint Designer 2013 zu öffnen und zu bearbeiten.

Der vollständige Code sieht wie folgt aus, und steht unterhalb der Zeile 18, unterhalb des Tag PlaceHolderMain.

clip_image004

clip_image006

Das fertige Resultat als Liste ist dann nachfolgend zu sehen, wobei der Code beliebig angepasst werden kann. Hierbei wird immer das aktuelle Datum gelb eingefärbt, zusätzlich wird das in die Eingabebox eingetragene Datum ebenfalls blau eingefärbt. Ausführen und Löschen stehen als Schaltflächen daneben.

clip_image008

Die beiden Schaltflächen Ausführen und Löschen sind als ASP.NET-Steuerelement (TextBox und Button) eingefügt und jeweils mit einer JavaScript Function versehen. Die Herausforderung bei diesem Beispiel war, das von SharePoint ausgegebene Datum in Stücke zu schneiden und dann in einem von JavaScript richtig interpretierbarem Format zusammengestellt auszugeben, damit das aktuelle Tagesdatum immer gelb angezeigt wird. Selbstverständlich können Sie die Farben auf Wunsch ändern.

Der JavaScript Code in Verbindung mit den eingefügten Schaltflächen mit der Function Datum sorgt für die Formatierung des individuell eingegebenen Datums, die Function Löschen, entfernt die Formatierung dagegen. Die im Code gebildete Variable “ganzesdatum” formatiert das jeweilige Tagesdatum gelb.

Die in dem Code angegebenen Farben sowie die Begriffe (in Bearbeitung, nicht begonnen, abgeschlossen) für die Spalte Status können beliebig auf eigens verwendeten Begrifflichkeiten und Farben angepasst werden.

Abschließend der Code zum kopieren unter die Zeile PlaceHolderMain :

<input type="text" id="TextBox1">

<input type="button" value="Ausführen" OnClick="javascript:datum()"/>

<input type="button" value="Löschen" OnClick="javascript:löschen()"/>

<br></br>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js" type="text/javascript"></script>

<script type="text/javascript">

$(window).load(function()

{

$('.ms-vb2:contains("abgeschlossen")').css('background-color', 'lightgreen');

$('.ms-vb2:contains("nicht begonnen")').css('background-color', 'red');

$('.ms-vb2:contains("in Bearbeitung")').css('background-color', 'orange');

var heute = new Date();

var ganzesdatum = ('0' + heute.getDate()).slice(-2) + "." + ('0' + (heute.getMonth()+1)).slice(-2) + "." + heute.getFullYear();

$('.ms-vb2:contains("'+ganzesdatum+'")').css('background-color', 'yellow');

});

function datum()

{

$('.ms-vb2:contains("abgeschlossen")').css('background-color', 'lightgreen');

$('.ms-vb2:contains("nicht begonnen")').css('background-color', 'red');

$('.ms-vb2:contains("in Bearbeitung")').css('background-color', 'orange');

$('.ms-vb2:contains("' + document.getElementById("TextBox1").value + '")').css('background-color', 'blue');

}

function löschen()

{

$('.ms-vb2:contains("")').css('background-color', 'white');

$('.ms-vb2:contains("abgeschlossen")').css('background-color', 'lightgreen');

('.ms-vb2:contains("nicht begonnen")').css('background-color', 'red');

$('.ms-vb2:contains("in Bearbeitung")').css('background-color', 'orange');

var heute = new Date();

var ganzesdatum = ('0' + heute.getDate()).slice(-2) + "." + ('0' + (heute.getMonth()+1)).slice(-2) + "." + heute.getFullYear();

$('.ms-vb2:contains("'+ganzesdatum+'")').css('background-color', 'yellow');

}

</script>

Kommentare sind geschlossen