Kuika’nın Kanban Board elementi, görevlerinizi ve projelerinizi görsel olarak yönetmenizi sağlar. Bu element, kart (card) tabanlı yapısıyla görevleri kategoriler (lane) altında gruplandırır ve sürükle-bırak yöntemiyle dinamik bir iş akışı oluşturur.

Yalnızca web uygulamalarında kullanılabilir.

Kullanım Alanları

• Proje yönetimi ve sprint planlama
• Ekip iş akışı takibi
• Yazılım geliştirme süreçleri
• Pazarlama ve içerik üretimi yönetimi
• Eğitim, danışmanlık ve görev paylaşımı sistemleri

Kullanım Senaryosu – Görev Takip Panosu

Bir proje yönetimi uygulamasında, ekip üyeleri görevlerini Kanban Board üzerinde yönetir. Görevler iki ana kategoriye (lane) ayrılmıştır:

• Web Design (tasarım görevleri)
• Marketing (pazarlama görevleri)

Her lane altında görev kartları (cards) yer alır ve kullanıcı bu kartları sürükleyip farklı lane’lere taşıyabilir.

Senaryoda:

• Uygulama açıldığında tüm lane’ler ve görevler veri kaynağından otomatik olarak yüklenir.
• Kullanıcı yeni görev oluşturabilir veya mevcut görevleri düzenleyebilir.
• Kart sürüklendiğinde, veritabanı güncellenir ve arayüz anında yenilenir.

Veri Kaynağı Bağlama

• Datasources modülüne gidin.
• Ardından Tables başlığı yanındaki + ikonuna tıklayın. 
• Aşağıdaki tabloları oluşturun. 

• Ardından Actions > SQL Actions sekmesinde aşağıdaki aksiyonları oluşturun. 

Lane Aksiyonları

GetKanbanLanesAll: Tüm lane verilerini getirir.

SELECT * FROM KanbanLaneORDER BY LaneIndex ASC;

CreateKanbanLane: Yeni bir lane eklemek için kullanılır.

INSERT INTO KanbanLane (Id, Title, LaneIndex)VALUES (    NEWID(),    @title,    (SELECT COALESCE(MAX(LaneIndex), -1) + 1 FROM KanbanLane));

DeleteKanbanLane: Bir lane silindiğinde, içindeki görevler de silinir.

DELETE FROM KanbanCard WHERE LaneId = @Id;DELETE FROM KanbanLane WHERE Id = @Id;

DragKanbanLane: Lane sırasını güncellemek için kullanılır.

UPDATE KanbanLaneSET LaneIndex = @newIndexWHERE Id = @laneId;

Card Aksiyonları

GetKanbanCardsAll: Tüm görev (card) verilerini getirir.

SELECT * FROM KanbanCardORDER BY CardIndex ASC;

CreateKanbanCard: Yeni görev eklemek için kullanılır.

INSERT INTO KanbanCard (Id, LaneId, CardIndex, Title, Description)VALUES (    NEWID(),    @laneId,    (SELECT COALESCE(MAX(CardIndex), -1) + 1 FROM KanbanCard WHERE LaneId = @laneId),    @title,    @description);

DeleteKanbanCard: Bir kart silindiğinde sıralama indeksini günceller.

DECLARE @lane UNIQUEIDENTIFIER;DECLARE @index INT;‍SELECT @lane = LaneId, @index = CardIndex FROM KanbanCard WHERE Id = @Id;‍DELETE FROM KanbanCard WHERE Id = @Id;‍UPDATE KanbanCardSET CardIndex = CardIndex - 1WHERE LaneId = @lane AND CardIndex > @index;

DragKanbanCard: Kartın sürüklenip farklı lane’e taşınmasını sağlar.

UPDATE KanbanCardSET LaneId = @targetLaneId, CardIndex = @targetCardIndexWHERE Id = @draggedCardId;

3. Özelliklerin Senaryo Bağlamında Kullanılması

Lane Options:

• Action → GetKanbanLanesAll
• Field to Lane ID → Id
• Field to Lane Index → LaneIndex

Card Options:

• Action → GetKanbanCardsAll
• Field to Card ID → Id
• Field to Card Lane ID → LaneId
• Field to Card Index → CardIndex

Events:

• onCardDragged: Kart taşındığında tetiklenir ve DragKanbanCard aksiyonu çalışır.
• onLaneDragged: Lane sırası değiştiğinde DragKanbanLane aksiyonu çalışır.
  
  

4. UI Design Modülü İşlemleri

• UI Design modülüne gidin.
• Sol panelden Elements > Special > Kanban Board elementini seçin.
• Ekrana sürükleyip bırakın.
• Properties panelinde:
  
  • Lane Action → GetKanbanLanesAll
  • Card Action → GetKanbanCardsAll
  • Draggable → Aktif
  • Visual Mode → Light
  • Lane Title Field → Title
  • Card Title Field → Title
  • Card Description Field → Description

5. Senaryo Akışı

• Uygulama açıldığında “Web Design” ve “Marketing” lane’leri yüklenir.
• Web Design altında:
  
  • Wireframing – Splash screen, designs
  • Dashboard – User interface layout
  • Landing Page – Homepage mockup
• Marketing altında:
  
  • Blog Content – Content for the upcoming month
  • Website Icons – 3D icon design

Kullanıcı “Landing Page” görevini tamamladığında bu kartı Marketing lane’ine sürükleyebilir. Bu işlem onCardDragged aksiyonunu tetikler ve görevin yeni lane bilgisi aşağıdaki şekilde kaydedilir:

{  "cardId": "c3",  "cardLaneId": "lane1",  "cardTargetLaneId": "lane2",  "cardTargetIndex": 1}

Veritabanı güncellenir, görev anında yeni lane altında görünür.

Kısıtlamalar

• Kanban Board yalnızca bir lane-card ilişkisi üzerinden veri çeker.
• Gerçek zamanlı görünüm için “Refresh Action” tanımlanmalıdır.
• Çok sayıda görev bulunan panolarda CardIndex alanı optimize edilmelidir.

İpuçları ve Best Practices

• Görev durumlarına göre (örneğin “done”) renk veya ikon kullanarak durumu görselleştirin.
• onCardDragged ve onLaneDragged aksiyonlarını kullanarak veritabanını otomatik güncelleyin.
• Lane başlıklarını dinamik hale getirerek kullanıcı veya proje bazlı filtreleme yapın.
• “Add New Task” butonu ekleyerek yeni kart oluşturmayı kolaylaştırın.
• Kartların okunabilirliğini artırmak için açıklama alanlarını kısa tutun.

Senaryo Tamamlandığında

• Tüm görevler ve kategoriler dinamik olarak yüklenir.
• Kartlar sürükle-bırak yöntemiyle taşınabilir.
• Değişiklikler anında veritabanına yansır.
• Ekip üyeleri görevleri tek bir pano üzerinden takip eder.