Kanban Board Elementi Özellikleri

Kuika'nın Kanban Board elementinin özelleştirilebilir özellikleri, veri bağlantılarını ve iş akışlarını yönetmenizii kolaylaştırır. Görevlerin (card) ve kategorilerin (lane) dinamik şekilde düzenlenmesini sağlar.

Kanban Board elementinin özelliklerini düzenleyebilmek için Datasources modülünden SQL aksiyonları ve tablo oluşturmanız gerekir. 

  1. Datasources modülüne gidin. 
  1. Sources başlığı altındaki Tables alanının karşısındaki “+” ikonuna tıklayıp, New Table seçimini yapın.
  1. Ardından yukarıdaki örnek tabloları oluşturun. 
  2. Ardından Sources başlığı altındaki Actions alanının karşısındaki “+” ikonuna tıklayıp, New SQL Actions seçimini yapın. 

Kanban Board üzerinde veri ekleme, güncelleme ve silme işlemlerini gerçekleştirmek için aşağıdaki örnek SQL aksiyonları kullanılabilir ya da kendi aksiyonlarınızı oluşturabilirsiniz: 

Lane Options Aksiyonları:

  1. GetKanbanLanesAll: Tüm lane verilerini getirir.
SELECT * FROM KanbanLane;
  1. CreateKanbanLane: Yeni bir lane eklemek için kullanılır.
INSERT INTO KanbanLane (Id, laneIndex, title, description)VALUES (    NEWID(),     (SELECT COALESCE(MAX(laneIndex), -1) + 1 FROM KanbanLane),     @title,     @description);

  1. DeleteKanbanLane: Bir lane silindiğinde içindeki tüm görevleri de siler ve lane indexlerini günceller.
DELETE FROM KanbanCardWHERE laneId = @Id;‍DECLARE @DeletedLane TABLE (    Id UNIQUEIDENTIFIER,    laneIndex INT);‍DELETE FROM KanbanLaneOUTPUT DELETED.Id, DELETED.laneIndex INTO @DeletedLaneWHERE Id = @Id;‍UPDATE KanbanLaneSET laneIndex = laneIndex - 1WHERE laneIndex > (SELECT laneIndex FROM @DeletedLane);

  1. DragKanbanLane: Lane’lerin sıralamalarını değiştirmek için kullanılır.
UPDATE KanbanLaneSET laneIndex = laneIndex + 1WHERE laneIndex >= @newLaneIndex    AND laneIndex < @draggedLaneIndex    AND id != @draggedElementId;‍UPDATE KanbanLaneSET laneIndex = @newLaneIndexWHERE id = @draggedElementId;‍UPDATE KanbanLaneSET laneIndex = laneIndex - 1WHERE laneIndex > @draggedLaneIndex    AND laneIndex <= @newLaneIndex    AND id != @draggedElementId;‍

Card Options Aksiyonları:

  1. GetKanbanCardsAll: Tüm görev verilerini getirir.
SELECT * FROM KanbanCard;
  1. CreateKanbanCard: Yeni bir 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);

  1. DeleteKanbanCard: Bir görevi silerken index güncellenmesini sağlar.
DECLARE @DeletedCard TABLE (    laneId UNIQUEIDENTIFIER,    cardIndex INT);‍DELETE FROM KanbanCardOUTPUT DELETED.laneId, DELETED.cardIndex INTO @DeletedCardWHERE Id = @Id;‍UPDATE KanbanCardSET cardIndex = cardIndex - 1WHERE cardIndex > (SELECT cardIndex FROM @DeletedCard)  AND laneId = (SELECT laneId FROM @DeletedCard);

  1. DragKanbanCard: Görevlerin sürüklenerek farklı lane’lere veya sıralara taşınmasını sağlar.
UPDATE KanbanCardSET laneId = @targetLaneId,     cardIndex = @targetCardIndex WHERE id = @draggedCardId; ‍UPDATE KanbanCardSET cardIndex = cardIndex - 1 WHERE laneId = @currentLaneId   AND cardIndex > @currentCardIndex   AND id != @draggedCardId; ‍UPDATE KanbanCardSET cardIndex = cardIndex + 1 WHERE laneId = @targetLaneId   AND cardIndex >= @targetCardIndex   AND id != @draggedCardId;‍

Yukarıdaki aksiyonlar Kuika Kanban Board’unuzu SQL veritabanıyla entegre etmenizi sağlar. Böylece, görevlerinizi ve kategorilerinizi dinamik olarak yönetebilir, verilerinizi güncelleyebilir ve sisteminizin ihtiyaçlarına uygun bir iş akışı oluşturabilirsiniz.

Ardından UI Design modülü Kanban Board elementinin Properties panelinden aşağıdaki düzenlemeleri yapabilirsiniz. 

Lane Options

  • Action: Kanban Board'da lane (kategori) verilerini bağlamak için kullanılan bir datasource özelliğidir. Her bir lane için veri sağlayan kaynağa bağlantı kurar.
  • Field to Lane ID: Datasource ile çekilen lane verisindeki ID özelliğinin anahtar-değer çiftidir. Lane'lerin benzersiz bir şekilde tanımlanmasını sağlar. String veya Guid tipinde bir property key bağlanmalıdır.
  • Field to Lane Index: Datasource ile çekilen lane verisindeki sıralama (index) özelliğinin anahtar-değer çiftidir. Lane’lerin sıralanmasını sağlar ve Number tipinde bir property key bağlanmalıdır.

Card Options

  • Action: Kanban Board’da card (görev) verilerini bağlamak için kullanılan datasource özelliğidir. Her bir görev için veri sağlayan kaynağa bağlantı kurar.
  • Field to Card ID: Datasource ile çekilen card verisindeki ID property'sinin anahtar-değer çiftidir. Her bir card’ın benzersiz bir şekilde tanımlanmasını sağlar. String veya Guid tipinde bir property key bağlanmalıdır.
  • Field to Card Lane ID: Datasource ile çekilen card’ların hangi lane’e ait olduğunu belirten özelliğinin  anahtar-değer çiftidir. String veya Guid tipinde bir property key bağlanmalıdır.
  • Field to Card Index: Datasource ile çekilen card verisindeki sıralama (index) özelliğinin anahtar-değer çiftidir. Card’ların lane içinde sıralanmasını sağlar ve Number tipinde bir property key bağlanmalıdır.
  • Field to Card Sort Key: Datasource ile çekilen card’ların, lane’ler içinde sıralanmasını sağlamak için seçilen property key’e göre sıralanmasını sağlar. Örneğin, title (başlık) gibi bir özelliğe göre alfabetik sıralama yapılabilir. Bu özellik isteğe bağlıdır ve seçilen property key'e göre sıralama yapılabilir.

Events

  • onCardDragged: Card (görev) sürüklendiğinde tetiklenen bir olaydır. Görevlerin yeni konumlarına taşındığında ilgili bilgileri sağlar.
    • cardId: Taşınan card’ın benzersiz ID’si.
    • cardIndex: Card’ın eski sıralama numarası.
    • cardLaneId: Card’ın bağlı olduğu lane’in ID’si.
    • cardTargetIndex: Card’ın yeni sıralama numarası.
    • cardTargetLaneId: Card’ın yeni bağlı olduğu lane’in ID’si.
  • onLaneDragged: Lane (kategori) sürüklendiğinde tetiklenen bir olaydır. Lane’lerin yeni sıralamalarını ve konumlarını takip eder.
    • laneId: Taşınan lane’in benzersiz ID’si.
    • laneIndex: Lane’in eski sıralama numarası.
    • laneTargetIndex: Lane’in yeni sıralama numarası.