1. Kanban Board Elementine Genel Bakış

Kanban Board elementi, görevleri ve iş öğelerini sütunlar (columns) ve kartlar (cards) üzerinden görsel olarak yönetmenizi sağlayan bir proje ve iş akışı yönetim elementidir. Görevlerin farklı aşamalara göre gruplanmasını ve ilerleme durumlarının kolayca takip edilmesini mümkün kılar.

Kanban Board, kullanıcıların görevleri sürükle–bırak (drag & drop) yöntemiyle farklı durumlara taşımasına olanak tanıyarak iş akışlarını daha sezgisel ve şeffaf hale getirir. Bu yapı, özellikle ekip içi iş takibi ve süreç yönetimi gerektiren uygulamalarda verimliliği artırır.

Kanban Board elementi; görevlerin durumu, önceliği veya sorumlusu gibi bilgileri kart yapısı üzerinde sunarak, kullanıcıların projeye genel bakış sağlamasını kolaylaştırır.

Kanban Board elementi yalnızca web uygulamalarında desteklenmektedir.

1.1. Sık Kullanım Senaryoları

• Proje ve görev yönetim ekranları
• Ekip içi iş dağılımı ve ilerleme izleme
• Süreç ve durum bazlı iş akışları
• CRM, destek veya operasyon panoları

2. Temel Özellikler

• Sütun (Column) ve kart (Card) tabanlı yapı: Görevler, farklı durumları temsil eden sütunlar altında kartlar halinde gösterilir.
• Sürükle–bırak (Drag & Drop) desteği: Kullanıcılar kartları sütunlar arasında taşıyarak görev durumlarını hızlıca güncelleyebilir.
• Durum bazlı iş akışı yönetimi: “Yapılacak”, “Devam Ediyor”, “Tamamlandı” gibi aşamalar net biçimde ayrıştırılabilir.
• Dinamik veri kaynağı ile çalışma: Kart ve sütun içerikleri statik veya dinamik veri kaynakları üzerinden oluşturulabilir.
• Gerçek zamanlı görsel geri bildirim: Kartların yeri değiştikçe pano durumu anında güncellenir.
• Görev detaylarını kart üzerinde gösterme: Başlık, açıklama, etiket, öncelik veya sorumlu gibi bilgiler kartlara yansıtılabilir.

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

2. Sources başlığı altındaki Tables alanının karşısındaki “+” ikonuna tıklayıp, New Table seçimini yapın.

3. Ardından yukarıdaki örnek tabloları oluşturun. 
4. 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: 

2.1.1. Lane Options Aksiyonları:

1. GetKanbanLanesAll: Tüm lane verilerini getirir.

SELECT * FROM KanbanLane;

‍

2. 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
);

3. DeleteKanbanLane: Bir lane silindiğinde içindeki tüm görevleri de siler ve lane indexlerini günceller.

DELETE FROM KanbanCard
WHERE laneId = @Id;

DECLARE @DeletedLane TABLE (
    Id UNIQUEIDENTIFIER,
    laneIndex INT
);

DELETE FROM KanbanLane
OUTPUT DELETED.Id, DELETED.laneIndex INTO @DeletedLane
WHERE Id = @Id;

UPDATE KanbanLane
SET laneIndex = laneIndex - 1
WHERE laneIndex > (SELECT laneIndex FROM @DeletedLane);

4. DragKanbanLane: Lane’lerin sıralamalarını değiştirmek için kullanılır.

UPDATE KanbanLane
SET laneIndex = laneIndex + 1
WHERE laneIndex >= @newLaneIndex
    AND laneIndex < @draggedLaneIndex
    AND id != @draggedElementId;

UPDATE KanbanLane
SET laneIndex = @newLaneIndex
WHERE id = @draggedElementId;

UPDATE KanbanLane
SET laneIndex = laneIndex - 1
WHERE laneIndex > @draggedLaneIndex
    AND laneIndex <= @newLaneIndex
    AND id != @draggedElementId;

2.1.2. Card Options Aksiyonları:

1. GetKanbanCardsAll: Tüm görev verilerini getirir.

SELECT * FROM KanbanCard;

2. 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
);

3. DeleteKanbanCard: Bir görevi silerken index güncellenmesini sağlar.

DECLARE @DeletedCard TABLE (
    laneId UNIQUEIDENTIFIER,
    cardIndex INT
);

DELETE FROM KanbanCard
OUTPUT DELETED.laneId, DELETED.cardIndex INTO @DeletedCard
WHERE Id = @Id;

UPDATE KanbanCard
SET cardIndex = cardIndex - 1
WHERE cardIndex > (SELECT cardIndex FROM @DeletedCard)
  AND laneId = (SELECT laneId FROM @DeletedCard);

4. DragKanbanCard: Görevlerin sürüklenerek farklı lane’lere veya sıralara taşınmasını sağlar.

UPDATE KanbanCard
SET laneId = @targetLaneId, 
    cardIndex = @targetCardIndex 
WHERE id = @draggedCardId; 

UPDATE KanbanCard
SET cardIndex = cardIndex - 1 
WHERE laneId = @currentLaneId 
  AND cardIndex > @currentCardIndex 
  AND id != @draggedCardId; 

UPDATE KanbanCard
SET 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ı.

2.2. Elemente Eklenebilen Aksiyonlar

Kanban Board elementi, kullanıcıların pano üzerindeki sütun (lane) ve kart (card) hareketlerine bağlı olarak olay (event) bazlı aksiyonlar tanımlanmasını destekler. Aksiyonlar, Kanban Board elementinin kendisine değil; sürükle–bırak etkileşimleri sonucunda tetiklenen event’lere bağlanır.

Kanban Board elementi için aksiyonlar, Properties > Add Action alanı üzerinden aşağıdaki event’ler aracılığıyla eklenebilir.

Desteklenen Aksiyon Tetikleyicileri

onLaneDragged: Kullanıcı bir sütunu (lane) pano üzerinde sürükleyip konumunu değiştirdiğinde tetiklenir.

Kullanım amaçları:

• Sütun sıralamasını state veya veri kaynağına kaydetmek
• Kullanıcıya özel pano düzenini saklamak
• Lane sıralama değişikliklerini backend’e iletmek

Örnek senaryo:Kullanıcı “Devam Ediyor” sütununu “Yapılacak” sütununun önüne taşıdığında, yeni sütun sıralaması state’e kaydedilir.

onCardDragged: Kullanıcı bir kartı aynı sütun içinde veya farklı bir sütuna sürüklediğinde tetiklenir.

Kullanım amaçları:

• Kartın durumunu (status) güncellemek
• Görevin hangi aşamaya geçtiğini backend’e kaydetmek
• İş akışı veya workflow tetiklemek

Örnek senaryo: Kullanıcı bir görevi “Devam Ediyor” sütunundan “Tamamlandı” sütununa taşıdığında, görev durumu güncellenir ve süreç tamamlanır.

Aksiyonlara İlişkin Temel Kurallar

• Kanban Board elementi sürükle–bırak tabanlı event’ler üzerinden aksiyon tetikler.
• Aynı event için birden fazla aksiyon tanımlanabilir.
• Kart ve lane hareketleri genellikle dinamik veri kaynakları ile birlikte kullanılır.
• Drag & Drop işlemleri kullanıcı deneyimini etkilediği için aksiyonlar mümkün olduğunca hızlı çalışacak şekilde tasarlanmalıdır.

Kanban Board elementi, özellikle durum bazlı iş akışları ve görev yönetimi senaryolarında, bu event’ler ile birlikte kullanıldığında güçlü ve esnek bir yönetim deneyimi sunar.

3. Kanban Board Elementi Nasıl Kullanılır? 

Bu bölümde Kanban Board elementinin uçtan uca kullanımını örnek senaryo üzerinden ele alacağız.

Senaryo: Kanban Board ile Görev Yönetimi

Bu senaryoda kullanıcı, proje görevlerini yönetmek için Kanban Board elementini kullanır. Uygulama açıldığında görevler “Todo”, “In Progress” ve “Completed” gibi lane’ler altında listelenir.

Senaryoda:

• Yeni bir iş süreci oluşturmak için Create Kanban Lane alanını kullanarak yeni lane ekleyebilir
• Mevcut lane’ler içerisine görev eklemek için Create Kanban Card formunu kullanabilir
• Kartları sürükle-bırak yöntemiyle farklı lane’ler arasında taşıyabilir
• Lane veya kart üzerindeki silme ikonları ile ilgili kayıtları sistemden kaldırabilir

Adım 1 - Veri Kaynağı Oluşturma

DataSources modülünde tablo oluşturma: 

• Datasources modülüne gidin. 
• Ardından Tables sekmesine gidin.
• “KanbanLane” adında yeni tablo oluşturun.
• Kurulması gereken tablo yapısı aşağıdaki gibidir:
  

• Önemli Alan adları:
  
  • Id:Her lane için benzersiz kimliktir.
  • title: Lane başlığını ifade eder (ör: Todo, In Progress).
  • description: Lane hakkında açıklama bilgisini tutar.
  • laneIndex: Lane’lerin board üzerindeki sıralamasını belirler.
• “KanbanCard” adında yeni bir tablo daha oluşturun.
• Kurulması gereken tablo yapısı aşağıdaki gibidir:
  

• Önemli Alan adları:
  
  • Id: Her kart için benzersiz kimliktir.
  • title: Kart başlığını ifade eder.
  • description: Kart içeriği veya açıklama bilgisini tutar.
  • laneId: Kartın hangi lane’e ait olduğunu belirtir.‍
  • cardIndex: Kartın bağlı olduğu lane içerisindeki sırasını belirler.

Adım 2 - Gerekli Aksiyonun Tanımlanması

Kanban elementini tüm özellikleriyle kullanabilmek için: 

1. Örnek sekiz aksiyon tanımlamanız gerekir.
2. Datasources modülü içerisinde Actions > New SQL Action sekmesinden yeni aksiyon ekleyin.

• Kanban Lane (Todo, In Progress, ...) Oluşturan Aksiyon  (CreateKanbanLane):

INSERT INTO KanbanLane (Id, laneindex, title, description) 
VALUES (NEWID(), 
        (SELECT COALESCE(MAX(laneindex), -1) + 1 FROM dbo.KanbanLane), 
        @title, 
        @description);

Uygularken KanbanLane kısmını silip tekrar KanbanLane yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.

• Tüm Kanban Lane’leri Listeleyen Aksiyon  (KanbanLaneAll):

SELECT *
FROM KanbanLane
ORDER BY laneIndex;

Uygularken KanbanLane kısmını silip tekrar KanbanLane yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.

• İlgili Kanban Lane’i Silen Aksiyon  (DeleteKanbanLane):

DELETE FROM KanbanCard WHERE laneId = @Id

DECLARE @DeletedLane TABLE (  Id UNIQUEIDENTIFIER,    laneIndex INT)

DELETE FROM KanbanLane OUTPUT DELETED.Id, DELETED.laneIndex INTO @DeletedLane WHERE Id = @Id

UPDATE KanbanLane SET laneIndex = laneIndex - 1 WHERE laneIndex > (SELECT laneIndex FROM @DeletedLane)

Uygularken KanbanLane ve KanbanCard kısmlarını silip tekrar KanbanLane ve KanbanCard yazıp Enter’a basınız. Böylelikle tablo adlarının önünde doğru şema adları eklenecektir.

• İlgili Kanban Lane’i Taşıyan Aksiyon  (DragKanbanLane):

BEGIN TRANSACTION;

IF @newLaneIndex < @draggedLaneIndex
BEGIN
    UPDATE KanbanLane
    SET laneIndex = laneIndex + 1
    WHERE laneIndex >= @newLaneIndex
      AND laneIndex < @draggedLaneIndex
      AND Id <> @draggedElementId;
END
ELSE IF @newLaneIndex > @draggedLaneIndex
BEGIN
    UPDATE KanbanLane
    SET laneIndex = laneIndex - 1
    WHERE laneIndex > @draggedLaneIndex
      AND laneIndex <= @newLaneIndex
      AND Id <> @draggedElementId;
END

UPDATE KanbanLane
SET laneIndex = @newLaneIndex
WHERE Id = @draggedElementId;

COMMIT TRANSACTION;

Uygularken KanbanLane kısmını silip tekrar KanbanLane yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.

• Kanban Card Ekleyen Aksiyon  (CreateKanbanCard):

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

Uygularken KanbanCard kısmını silip tekrar KanbanCard yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.

• Tüm Kanban Card’ları Listeleyen Aksiyon  (KanbanCardAll):

SELECT Id, laneId, cardIndex, title, description
FROM KanbanCard
ORDER BY cardIndex;

Uygularken KanbanCard kısmını silip tekrar KanbanCard yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.

• İlgili Kanban Card’ı Silen Aksiyon  (DeleteKanbanCard):

DECLARE @DeletedCard TABLE (laneId UNIQUEIDENTIFIER,  cardIndex INT)

DELETE FROM KanbanCard OUTPUT DELETED.laneId, DELETED.cardIndex INTO @DeletedCard WHERE Id = @Id

UPDATE KanbanCard SET cardIndex = cardIndex - 1 WHERE cardIndex > (SELECT cardIndex FROM @DeletedCard)  AND laneId = (SELECT laneId FROM @DeletedCard);

Uygularken KanbanCard kısmını silip tekrar KanbanCard yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.

• İlgili Kanban Card’ı Taşıyan Aksiyon  (DragKanbanCard):

BEGIN TRY
    BEGIN TRANSACTION;

    IF @currentLaneId = @targetLaneId
    BEGIN
        IF @targetCardIndex < @currentCardIndex
        BEGIN
            UPDATE KanbanCard
            SET cardIndex = cardIndex + 1
            WHERE laneId = @currentLaneId
              AND cardIndex >= @targetCardIndex
              AND cardIndex < @currentCardIndex
              AND Id <> @draggedCardId;
        END
        ELSE IF @targetCardIndex > @currentCardIndex
        BEGIN
            UPDATE KanbanCard
            SET cardIndex = cardIndex - 1
            WHERE laneId = @currentLaneId
              AND cardIndex > @currentCardIndex
              AND cardIndex <= @targetCardIndex
              AND Id <> @draggedCardId;
        END

        UPDATE KanbanCard
        SET cardIndex = @targetCardIndex
        WHERE Id = @draggedCardId;
    END
    ELSE
    BEGIN
        UPDATE KanbanCard
        SET cardIndex = cardIndex - 1
        WHERE laneId = @currentLaneId
          AND cardIndex > @currentCardIndex
          AND Id <> @draggedCardId;

        UPDATE KanbanCard
        SET cardIndex = cardIndex + 1
        WHERE laneId = @targetLaneId
          AND cardIndex >= @targetCardIndex
          AND Id <> @draggedCardId;

        UPDATE KanbanCard
        SET laneId = @targetLaneId,
            cardIndex = @targetCardIndex
        WHERE Id = @draggedCardId;
    END

    COMMIT TRANSACTION;
END TRY
BEGIN CATCH
    ROLLBACK TRANSACTION;
    THROW;
END CATCH

Uygularken KanbanCard kısmını silip tekrar KanbanCard yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.

Adım 3 - Initial Action Ekleme

Başlangıçta anasayfada: 

• Liste üzerinde mevcut yüklenen dosyaların gösterimi için Add Action > Initial Action > Custom > Managed DB > KanbanCardAll aksiyonunu ekleyin.
  

• Liste üzerinde mevcut yüklenen dosyaların gösterimi için Add Action > Initial Action > Custom > Managed DB > KanbanLaneAll aksiyonunu ekleyin.
  

Adım 4 - Kanban Board Elementini Ekleme ve Özelleştirme

Başlangıçta anasayfada: 

• Sol yan panelden Elements > Display > Label elementini sayfaya sürükleyip bırakın.
• Yazıyı Label > Properties > Value > “Kanban Board” olarak güncelleyin.
• Yazı stilini Label > Styling > Text > Style > Normal Text ve Heading 2 olarak ayarlayın.
  

• Yeni task eklemek için Elements > Navigation > Button elementini sayfaya sürükleyip bırakın.
• Button elementi yazısını Button > Properties > Label > “Add Task” olarak ayarlayın.
• Button elementine Button > Properties > Icon > “add” ikonunu seçin.
  

• Button rengini Button > Styling > Fill > Color > “5ABFC1” olarak ayarlayın.
  

• Button elementini sağa hizalamak için Col > Styling > Align > Sağa hizala olarak ayarlayın.
  

• Sol yan panelden Elements > Special > KanbanBoard elementini sayfaya sürükleyip bırakın.
  

• Kanban Board içerisine lane verilerini bağlamak için, KanbanBoard > Properties > LaneOptions > Action alanından KanbanLaneAll aksiyonunu seçin ve aşağıdaki alan tanımlamalarını gerçekleştirin.
  

•  Kanban Board içerisine card verilerini bağlamak için, KanbanBoard > Properties > CardOptions > Action alanından KanbanCardAll aksiyonunu seçin ve aşağıdaki alan tanımlamalarını gerçekleştirin.

Sortkey alanı tanımlanırsa kartlar sıralanır. Kartların sıralamasını manuel olarak yönetmek istiyorsanız bu alanı boş bırakabilirsiniz.

•  Kanban Board içerisindeki Lane Header’a tıklayın. Lane Header > Value > Field to display > Title tanımlamasını yapın.
  

•   Kanban Board içerisindeki Card Title’a tıklayın. Card Title > Value > Field to display > title tanımlamasını yapın.
  

•  Kanban Board içerisindeki Card description’a tıklayın. Card description > Value > Field to display > description tanımlamasını yapın.
  

•  Tanımlamalar sonrası Kanban Board içeriği aşağıdaki gibidir.
  

•  Kanban Board arka plan rengini KanbanBoard > Styling > Fill > “5ABFC1” olarak ayarlayın.
  

•  Kanban Lane stilini KanbanBoard > Properties > KanbanBoardLane alanına tıklayın. KanbanBoardLane > Styling > Fill > “D9D9D9” ve şeffaflığını aşağıdaki şekilde ayarlayın.
  

‍

Adım 5 - Kanban Board Elementine Aksiyon Ekleme

Lane işlemleri için:

• Kanban Board üzerinde Lane sürükleme düzenleme işlemleri için KanbanBoard > Properties > Add Action > onLaneDragged > Custom > Managed DB > DragKanbanLane aksiyonunu ekleyin.
  

• DragKanbanLane Aksiyonu içerisindeki newLaneIndex > Components > KanbanBoard > laneTargetIndex tanımlamasını yapın.
• DraggedLaneIndex alanına  Components > KanbanBoard > laneOptions > Selected > laneindex tanımlamasını yapın.
  

• DraggedElementId alanına  Components > KanbanBoard > laneOptions > Selected > Id tanımlamasını yapın.
  

• Son süreçte DragKanbanLane aksiyonu bağlantıları aşağıdaki gibidir.
  

• Lane taşıma işlemlerinden sonra güncel bilgileri alabilmek için KanbanBoard > Properties > Add Action > onLaneDragged > Custom > Managed DB > KanbanLaneAll aksiyonunu ekleyin.
  

Card işlemleri için:

• Kanban Board üzerinde Card sürükleme düzenleme işlemleri için KanbanBoard > Properties > Add Action > onCardDragged > Custom > Managed DB > DragKanbanCard aksiyonunu ekleyin.
  

• Aksiyon içerisinde currentLaneId alanına Components > KanbanBoard > cardLaneId > To Guid tanımlamasını yapın.
  

• targetLaneId alanına Components > KanbanBoard > cardTargetLaneId > to Guid tanımlamasını yapın.
•  targetCardIndex alanına Components > KanbanBoard > cardTargetIndex tanımlamasını yapın.
  

•  currentCardIndex alanına Components > KanbanBoard > cardIndex tanımlamasını yapın.
  

•  draggedCardId alanına Components > KanbanBoard > cardId > to Guid tanımlamasını yapın.
•  Son süreçte DragKanbanCard aksiyonu bağlantıları aşağıdaki gibidir.
  

•  Card taşıma işlemlerinden sonra güncel bilgileri alabilmek için KanbanBoard > Properties > Add Action > onCardDragged > Custom > Managed DB > KanbanCardAll aksiyonunu ekleyin.
  

•  Kanban Board elementi üzerindeki tüm aksiyonlar aşağıdaki gibi olmalıdır.
  

Adım 6 - Yeni Madde Ekleme Sayfası 

•  Kanban Board elementine yeni madde eklemek için sol yan panelden Screens > New Screen alanından KanbanForm adında yeni sayfa oluşturun.
  

• Sayfaya Lane içerisinde yeni bir card eklerken tercih yapabilmek için KanbanForm Page > Properties > Add Action > Inıtial Action > Custom > Managed DB > KanbanLaneAll aksiyonunu ekleyin.
  

Kanban Lane Oluşturma:

• Sayfa içerisine Elements > Container > Form elementini sürükleyip bırakın. Açılan alanlara aşağıdaki tanımlamaları yapın.
  

•  Devamındaki sayfada seçili laneindex alanını kaldırıp kaydedin.
  

• Form elementi altına Elements > Navigation > Button elementini sürükleyip bırakın.
• Button elementi adını Button > Properties > Label > “Create Kanban Lane” olarak güncelleyin.
  

• Button içerisine kayıt işlemleri için Button > Properties > Add Action > onClick > Custom > Managed DB > CreateKanbanLane aksiyonunu ekleyin.
• CreateKanbanLane aksiyonundaki title alanını Components > title > value tanımlamasını yapın.
  

• description alanını Components > description > value tanımlamasını yapın.
  

•  Lane kayıt sonrası sayfaya geri dönebilmek için Button > Properties > Add Action > Navigation > Go Back aksiyonunu ekleyin.
  

Kanban Card Oluşturma:

• Sayfa içerisine Elements > Container > Form elementini sürükleyip bırakın. Açılan alanlara aşağıdaki tanımlamaları yapın.
  

•   Devamındaki sayfada seçili cardIndex alanını kaldırıp kaydedin.
  

• Form elementi altına Elements > Navigation > Button elementini sürükleyip bırakın.
• Button elementi adını Button > Properties > Label > “Create Kanban Card” olarak güncelleyin.
  

•  Button içerisine kayıt işlemleri için Button > Properties > Add Action > onClick > Custom > Managed DB > CreateKanbanCard aksiyonunu ekleyin.
  

•  CreateKanbanCard aksiyonundaki laneId alanını Components > title > value tanımlamasını yapın.
  

• title alanını Components > title > value tanımlamasını yapın.
  

•  description alanını Components > description > value tanımlamasını yapın.
  

•  Lane kayıt sonrası sayfaya geri dönebilmek için Button > Properties > Add Action > Navigation > Go Back aksiyonunu ekleyin.
  

•  LaneId alanında seçim yapabilmek için LaneId yazılı Select Box elementine tıklayın ve Options > KanbanLaneAll aksiyonunu seçin aşağıdaki tanımlamaları yapın.
  

•  Tüm işlemlerin sonunda Kanban kayıt oluşturma sayfasını sol yan panelden Screens alanından Kanban Board elementinin oluşturulduğu sayfaya ilerleyin. Sayfada bulunan Add Task Button elementine > Properties > Add Action > onClick > Navigation > Navigate aksiyonunu ekleyin.
  

•  Navigate aksiyonu parametrelerini To Screen > KanbanForm, Open As > Drawer ve Width > 50 Vw olarak ayarlayın.
  

Preview:

Kanban Board elementi, Lane’ler altında kartların listelendiği ve sürükle-bırak ile yönetilebildiği bir görev takip yapısı sunar. Kullanıcılar yeni lane ve kart ekleyebilir, kartları farklı lane’ler arasında taşıyabilir veya aynı lane içerisinde sıralayabilir. Ayrıca lane ve kartlar üzerindeki aksiyonlar ile kayıtlar silinebilir ve süreç dinamik olarak yönetilebilir.

4. Ortak Özellikler (Properties)

Kanban Board elementi üzerinde yer alan bazı alanlar tüm UI elementlerinde ortak olarak kullanılır. Bu nedenle, aşağıdaki özelliklerin detaylı açıklamaları ilgili genel kılavuz sayfalarında yer almaktadır:

• Authorization (Yetkilendirme) Ayarları
• Visibility (Görünürlük)
• Editability (Düzenlenebilirlik)
• Style Panel (Stil Ayarları)

5. Kullanım Tavsiyeleri (Best Practices)

• Sütunları net ve anlamlı adlandırın. “Yapılacak”, “Devam Ediyor”, “Tamamlandı” gibi durum bazlı isimler iş akışını hızlandırır.
• Kart hareketlerini mutlaka veriyle senkronize edin. onCardDragged event’i ile kartın yeni durumunu backend veya state’e kaydetmeniz önerilir.
• Sütun sıralamasını kullanıcı bazlı saklayın. onLaneDragged ile yapılan düzenlemeler kullanıcı deneyimini kişiselleştirir.
• Kart içeriğini sade tutun. Başlık ve kısa açıklamalar, panonun okunabilirliğini artırır.
• Sürükle–bırak aksiyonlarını hızlı çalışacak şekilde tasarlayın. Drag & drop sonrası tetiklenen işlemler kullanıcı akışını kesmemelidir.

6. Kısıtlamalar

• Kanban Board elementi yalnızca web uygulamalarında desteklenir.
• Aksiyonlar sadece drag & drop event’leri (onLaneDragged, onCardDragged) üzerinden tetiklenebilir.
• Çok büyük veri setleri (çok fazla kart/sütun) performans sorunlarına yol açabilir.