Gilt für: SharePoint Kanban4B Webpart
Letztes Änderungsdatum des Themas: 23.04.2015
Dieses Thema gibt Ihnen einen Überblick über eine Biespielkonfiguration eines "Work of the day" Kanban Board mit welchen Sie jeden Morgen Ihren Arbeitstag neu planen können.
Führen Sie nachfolgende Konfigurationsschritte zur Erstellungen eines "Work of the day" Kanban Board im SharePoint durch.
Erstellen Sie auf einer SharePoint Website eine Liste vom Typ "Aufgaben".
Erstellen Sie eine weitere Liste vom Typ "Benutzerdefinierte Liste" für die entsprechenden Kanban Behälter welche auch als als Status bezeichnet werden können auf der selben SharePoint Website.
Öffnen Sie nachfolgend über die "Websiteaktionen" die "Websiteeinstellungen".
Erstellen Sie über den Menüpunkt "Galerien"
-> "Websitespalten" eine neue Websitespalte 
mit dem Namen "KanbanStatus" (Name kann beliebig vergeben werden) vom Informationstyp "Nachschlagen"!
Erstellen Sie über den Menüpunkt "Galerien"
-> "Websitespalten" eine neue Websitespalte vom Informationstyp "Ja/Nein"!
Erstellen Sie über den Menüpunkt "Galerien"
-> "Websiteinhaltstypen" eine neuen Websiteinhaltstyp mit dem Namen "Kanban_Liste" vom übergeordneten Inhaltstyp "Aufgabe"!
Fügen Sie zu dem soeben erstellten Websiteinhaltstyp die vorher erstellte Websitespalten "KanbanStatus" sowie "KanbanStatusErledigt" über den Punkt "Aus vorhandener Websitespalte hinzufügen" hinzu.
Fügen Sie beide Spalten hinzu.
Erstellen Sie über den Menüpunkt "Galerien"
-> "Websiteinhaltstypen" eine neuen Websiteinhaltstyp mit dem Namen "Kanban_Status" vom übergeordneten Inhaltstyp "Element"!
Aktivieren Sie nachfolgend in den Einstellungen der Liste vom Typ "Aufgaben" unter dem Punkt "Erweiterte Einstellungen" den ersten Punkt "Verwaltung von Inhaltstypen zulassen -> Ja".
Löschen Sie nun alle vorhandenen Inhaltstypen und fügen Sie nachfolgend den Inhaltstyp "Kanban Liste" hinzu.
Wiederholen Sie den Vorgang für die Liste KanbanStatus. Fügen Sie dieser Liste den Inhaltstyp Kanban_Status hinzu.
Erstellen Sie nun in der Liste "KanbanStatus" die Einträge:
- Zu bearbeiten
- In Arbeit
- Überprüfung
Fügen Sie nun der Webiste das Webpart aus dem Ordner "vision2feature" mit dem Namen "Kanban Board" hinzu.
Klicken Sie danach auf "Webpart bearbeiten"
Konfigurieren Sie nun den Abfragebereich durch doppelklick auf das erste Symbol der Datenquellenkonfiguration.
Legen Sie nun den Abfragebereich auf die Liste Aufgaben fest!
Setzen Sie je nach Bedarf einen Filter. Damit Sie z.B: nur die Aufgaben des jeweilig am SharePoint angemeldeten Benutzer im Board zeigen. Dafür empfiehlt sich der Filter welcher nur Einträge zeigt, wenn die Spalte "Zugewiesen an (AssignedTo) = [Ich]" entspricht.
Das für unser Beispiel erstellte SharePoint Kanban4B Webpart Datensatz Layout Design sieht wie folgt aus.
<script>
$v2f(document).ready(function () {
$v2f(".v2f-kb-kanban")
.addClass("v2f-ui-widget v2f-ui-widget-content v2f-ui-helper-clearfix v2f-ui-corner-all")
.find(".v2f-kb-kanban-header")
.addClass("v2f-ui-widget-header v2f-ui-corner-all")
.prepend("<span class='v2f-kb-ui-icon v2f-kb-ui-icon-minusthick'></span>")
.end()
.find(".v2f-kb-kanban-content");
$v2f(".v2f-kb-kanban-header .v2f-kb-ui-icon").click(function () {
$v2f(this).toggleClass("v2f-kb-ui-icon-minusthick").toggleClass("v2f-kb-ui-icon-plusthick");
$v2f(this).parents(".v2f-kb-kanban:first").find(".v2f-kb-kanban-content").toggle();
});
$v2f(".prioDueDate").each(function () {
var dueDate = $v2f.trim($v2f($v2f(this).find('.dueDate')).text());
var prio = $v2f.trim($v2f($v2f(this).find('.priority')).text());
var header = $v2f(this);
var header2 = $v2f(this).parent().parent().find(".priority");
if (prio.endsWith("Hoch") || prio.endsWith("High")) {
header.css('background-color', '#E1001A');
header.css('border-color', '#E55439');
header.css('color', 'white');
}
else if (prio.endsWith("Normal") && dueDate =='') {
header.css('display', 'none');
}
else if (prio.endsWith("Normal") && dueDate != '') {
header2.text('Fällig:');
}
else if (prio.endsWith("Niedrig") || prio.endsWith("Low")) {
header.css('background-color', '#64BAE7');
header.css('border-color', '#64BAE7');
header.css('color', 'black');
}
});
//Bucket Standard nach Webpartaufruf geschlossen anzeigen!
$v2f(".v2f-kb-kanban-header .v2f-kb-ui-icon").click();
});
</script>
<style>
.v2f-kb-limitReached.v2f-kb-column {background-image:none;color:white;}
</style>
<div class="All">
<div class="prioDueDate v2f-control v2f-kb-standardKanbanLayout" style="background-image:none;">
<div style="display: inline-block" class="priority">[[Priority]]</div>
<div style="display: inline-block" class="dueDate">[[DueDate]]</div>
</div>
<div class="v2f-control v2f-kb-standardKanbanLayout v2f-kb-kanban-header v2f-gradientLinear" style="background-image:none; margin:0px; border:0px;">
[[Title]]
</div>
<div class="v2f-kb-kanban-content">
[[AssignedTo]]</br>
[[Body]]
<div style="Background-Color:#f5f5f5; margin-top:5px; margin-bottom:5px; padding:2px;border:0px;">Informationen:</div>
<div style="margin-top:3px; margin-bottom:3px;">Ordner: [[Ordner]]</div>
<div style="margin-top:3px; margin-bottom:3px;">Dokument: [[Dokument]]</div>
<div style="margin-top:3px; margin-bottom:3px;">Link: [[Link]]</div>
<div style="margin-top:3px; margin-bottom:3px;">Geändert von: [[Editor]]</div>
</div>
</div>Die Datensatz Layout Konfiguration können Sie in der "Kanban Datensatz Layout Konfiguration" durch Doppelklick auf den "Farbfächer" öffnen.
Wählen Sie "Benutzerdefinierte Vorlage" aus.
Fügen Sie oben stehenden Code in das Textfeld der "Kanban Datensatz Layout" Konfiguration ein!
