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.

SharePoint Kanban4B Board "Work of the day"

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".

SharePoint 2010 Erstellen einer Aufgabenliste


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.

SharePoint 2010 Erstellen einer Kanban Liste für die Behälterbezeichnungen (Status).



Öffnen Sie nachfolgend über die "Websiteaktionen" die "Websiteeinstellungen".

SharePoint 2010 Websiteaktionen -> Websiteeinstellungen


Erstellen Sie über den Menüpunkt "Galerien" SharePoint 2010 Websiteeinstellungen -> Galerien -> "Websitespalten" eine neue Websitespalte SharePoint 2010 Websiteeinstellungen -> Galerien -> Websitespalten -> Erstellen mit dem Namen "KanbanStatus" (Name kann beliebig vergeben werden) vom Informationstyp "Nachschlagen"!

SharePoint 2010 Websiteeinstellungen -> Galerien -> Neue Websitespalte KanbanStatus


Erstellen Sie über den Menüpunkt "Galerien" SharePoint 2010 Websiteeinstellungen -> Galerien -> "Websitespalten" eine neue Websitespalte SharePoint 2010 Websiteeinstellungen -> Galerien -> Websitespalten -> Erstellen vom Informationstyp "Ja/Nein"!

SharePoint 2010 Websiteeinstellungen -> Galerien -> Neue Websitespalte KanbanStatusErledigt



Erstellen Sie über den Menüpunkt "Galerien" SharePoint 2010 Websiteeinstellungen -> Galerien -> "Websiteinhaltstypen" eine neuen Websiteinhaltstyp SharePoint 2010 Websiteeinstellungen -> Galerien -> Websitespalten -> Erstellen mit dem Namen "Kanban_Liste" vom übergeordneten Inhaltstyp "Aufgabe"!


SharePoint 2010 Websiteeinstellungen -> Websiteinhaltstypen-> Neuer Websiteinhaltstyp Kanban_List

Fügen Sie zu dem soeben erstellten Websiteinhaltstyp die vorher erstellte Websitespalten "KanbanStatus" sowie "KanbanStatusErledigt" über den Punkt "Aus vorhandener Websitespalte hinzufügen" hinzu.

SharePoint 2010 Websiteeinstellungen -> Websiteinhaltstypen-> Neuer Websiteinhaltstyp Kanban_Liste -> vorhandene Websitespalte hinzufügen

Fügen Sie beide Spalten hinzu.

SharePoint 2010 Websiteeinstellungen -> Websiteinhaltstypen-> Neuer Websiteinhaltstyp Kanban_Liste -> vorhandene Websitespalte hinzufügen


Erstellen Sie über den Menüpunkt "Galerien" SharePoint 2010 Websiteeinstellungen -> Galerien -> "Websiteinhaltstypen" eine neuen Websiteinhaltstyp SharePoint 2010 Websiteeinstellungen -> Galerien -> Websitespalten -> Erstellen mit dem Namen "Kanban_Status" vom übergeordneten Inhaltstyp "Element"!

SharePoint 2010 Websiteeinstellungen -> Websiteinhaltstypen-> Neuer Websiteinhaltstyp Kanban_Liste -> Websitespalte vom Typ Element hinzufügen

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
SharePoint 2010 Erstellen der Behälterbezeichnungen in der Kanban Liste KanbanStatus


Fügen Sie nun der Webiste das Webpart aus dem Ordner "vision2feature" mit dem Namen "Kanban Board" hinzu.

SharePoint 2010 Kanban4B Webpart


Klicken Sie danach auf "Webpart bearbeiten" SharePoint 2010 Webpart bearbeiten

Konfigurieren Sie nun den Abfragebereich durch doppelklick auf das erste Symbol der Datenquellenkonfiguration.

SharePoint Kanban4B Webpart Konfiguration - Abfragebereich


Legen Sie nun den Abfragebereich auf die Liste Aufgaben fest!

SharePoint Kanban4B Webpart Konfiguration - Abfragebereich festlegen

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.

SharePoint Kanban4B Webpart Konfiguration

Wählen Sie "Benutzerdefinierte Vorlage" aus.
Fügen Sie oben stehenden Code in das Textfeld der "Kanban Datensatz Layout" Konfiguration ein!

SharePoint Kanban4B Webpart Datensatz Layout Design
¿Fue útil la respuesta? 0 Los Usuarios han Encontrado Esto Útil (233 Votos)