Wer hat sich nicht schon einmal für Aufgabenlisten in SharePoint eine visuelle Statusanzeige gewünscht? Zum Beispiel eine, mit welcher es möglich ist, abhängig vom Füllstand der Aufgabe (% abgeschlossen) eine rotes, gelbes oder grünes Symbol anzeigen zu lassen? Mit Bordmitteln ist dies nicht ohne weiteres möglich, hier muss ein wenig programmiert werden. Dabei ist es wichtig, WO sich die SharePoint Installation befindet. In einer lokalen SharePoint Installation müssen Sie anderes vorgehen wie in SharePoint Online. Dieser Artikel zeigt Ihnen Wege für beide Welten.

Ampelanzeige mit SharePoint lokal (onPremise)

Für eine lokale Installation können Sie das unten stehende JavaScript verwenden. Ist die Aufgabe bis zu 30% abgeschlossen, wird ein rotes Symbol angezeigt. Ist sie zu mehr als 30% und zu weniger als 100% Prozent abgeschlossen ein gelbes Symbol, bei 100% wird ein grünes Symbol angezeigt.

Damit alles funktioniert, müssen allerdings einige Anpassungen vorgenommen werden, was ja nicht wirklich verwunderlich ist.

  1. Speichern Sie den unten stehenden JavaScript Code in einer Datei lokal ab.
  2. Gehen Sie zur Aufgabenliste und legen Sie eine neue Spalte mit dem Namen KPI und vom Typ Link oder Bild an. Die URL muss dabei als Bild formatiert werden. Blenden Sie die neue Spalte in die Ansicht ein, falls dies nicht automatisch geschieht.
  3. Gehen Sie in die Websiteeinstellungen und dort in Gestaltungsvorlagen bzw. in MasterPage gallery. Sie finden diesen Link im Abschnitt Web-Designer-Kataloge.
  4. Klicken Sie auf Dateien -> Neues Dokument und dann auf JavaScript-Anzeigenvorlage bzw. auf JavaScript Display Template.

  5. Sie müssen jetzt noch Einstellungen vornehmen wie in der Abbildung unten gezeigt. Der Zielbereich ist dabei die Site, auf welcher Sie das Script verwenden möchten, im Allgemeinen also die Website auf der Sie sich gerade befinden. Es sind dies die Eigenschaften Zielsteuerelement-Typ, Eigenständig und Zielbereich.
  6. Gehen Sie jetzt zu der Ansicht in der Aufgabenliste, in welcher Sie die grafische Anzeige nutzen möchten. Editieren Sie die Seite und bearbeiten Sie den Webpart. Ganz am unteren Ende des Webpartsmenü gibt es den Punkt Verschiedene bzw. Miscellaneous. Im Feld JS-Link tragen Sie den Ort zu der JavaScript in dem Format
    ~site/_catalogs/masterpage/
    ein.
  7. Laden Sie zuletzt die von Ihnen gewünschten Bilder in die von Ihnen gewünschte Bibliothek hoch. Der Code geht davon aus, dass es die Bilder
    green.png
    red.png
    yellow.png

    in der Bibliothek SiteAssets gibt. Die Websitesammlung befindet sich in unter http:///Sites/dev/.

Das sollte es gewesen sein. Natürlich läßt sich das JavaScript anpassen, der Fantasie sind da wenig Grenzen gesetzt. Inspiriert zu der Lösung wurde ich übrigens durch den folgenden Blog: http://www.abelsolutions.com/2013-blog/creating-a-simple-kpi-column-in-sharepoint-2013-list-views-using-js-link/

(function() {
var statusFieldCtx = {};
statusFieldCtx.Templates ={};
statusFieldCtx.Templates.Fields = {
"KPI": {"View": StatusIconViewTemplate}
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(statusFieldCtx);
})();

function StatusIconViewTemplate(ctx){

var _percentValue = ctx.CurrentItem.PercentComplete;
var _percentValueConvert = parseFloat(_percentValue);

if ( _percentValueConvert == '100')
{
return "<img src='/Sites/dev/SiteAssets/green.png' />";
}
else if (_percentValueConvert <= '30')
{
return "<img src='/Sites/dev/SiteAssets/red.png' />";
}
else if (_percentValueConvert <='100' && _percentValueConvert >'30')
{
return "<img src='/Sites/dev/SiteAssets/yellow.png' />";
}
}

Ampelanzeige mit SharePoint online – Office 365

In SharePoint online gibt es die klassische und die moderne Ansicht. In der klassischen Ansicht können Sie mit dem Verfahren oben arbeiten, in der modernen Ansicht geht dies nicht. Die oben beschriebene Technik wird von der modernen Ansicht schlicht nicht unterstützt. Aber dafür gibt es etwas viel besseres und, wie ich finde, auch einfacheres. Sie können SharePoint Ansichten und einzelne Listenspalten mit JSON formatieren. Der verlinkt Artikel ist sehr umfangreich und auch gut erklärt, sodass ich mir eine weitere Erläuterung hier spare. Beachten Sie aber, wenn Sie den Code aus dem Artikel kopieren, dieser sucht in dem Beispielen immer nach den englischen Werten. Wenn Sie z.B. eine deutsche Aufgabenliste haben und Sie möchten das Feld Vorgangsstatus formatieren, so dürfen Sie z.B. nicht nach In progress suchen, sondern nach In Bearbeitung.

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.

3 Kommentare zu „Ampelfunktion für Aufgabenlisten hinzufügen

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.