Kuika'nın Kanban Board elementi, projelerinizi ve görevlerinizi görsel olarak yönetmenizi sağlar. İş akışlarını düzenlemenize ve görevleri farklı kategorilere göre gruplandırmanıza olanak tanır. Kanban Board, özellikle proje yönetimi, ekip işbirliği ve görev takibi için idealdir. Bu kılavuzda, Kanban Board elementini nasıl kullanacağınızı, görevlerinizi nasıl düzenleyeceğinizi ve panonuzu nasıl özelleştirebileceğinizi öğreneceksiniz.
Bu eğitim içeriği aşağıdaki başlıklardan oluşur:
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.
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:
SELECT * FROM KanbanLane;
INSERT INTO KanbanLane (Id, laneIndex, title, description)VALUES ( NEWID(), (SELECT COALESCE(MAX(laneIndex), -1) + 1 FROM KanbanLane), @title, @description);
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);
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;
SELECT * FROM KanbanCard;
INSERT INTO KanbanCard (Id, laneId, cardIndex, title, description)VALUES ( NEWID(), @laneId, (SELECT COALESCE(MAX(cardIndex), -1) + 1 FROM KanbanCard WHERE laneId = @laneId), @title, @description);
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);
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
Card Options
Events
Bu örnek senaryoda, Kanban Board kullanarak bir yazılım geliştirme projesinde görevlerin ve kategorilerin nasıl yönetileceğini anlatacağız. Tasks (görevler) ve Categories (kategoriler) veri kaynaklarını kullanarak Kanban Board’un nasıl yapılandırılacağını, görevlerin sıralanmasının nasıl özelleştirileceğini ve olayların nasıl yönetileceğini ele alacağız.
Bir yazılım geliştirme projesinde aşağıdaki kategoriler kullanılacaktır:
Her kategoride belirli görevler yer alacak ve bu görevler yazılım geliştirme sürecindeki iş adımlarını temsil edecektir.
Kanban Board elementini UI Design modülünden ekleyerek projeyi başlatıyoruz.
Her kategoriye ait görevler Tasks veri kaynağından çekilecek ve her görev ait olduğu kategoriye yerleştirilecektir.
Lane Ayarları (Kategori Yapılandırması)
"Action": "Categories",
"Field to Lane ID": "id",
"Field to Lane Index": "index"
Card Ayarları (Görev Yapılandırması)
"Action": "Tasks",
"Field to Card ID": "task_id",
"Field to Card Lane ID": "lane_id",
"Field to Card Index": "task_index"
Görevlerin (cards) ve kategorilerin (lanes) taşınması sırasında gerçekleşen olayları işlemek, Kanban Board’un dinamik çalışmasını sağlar ve projelerin takibini kolaylaştırır.
onCardDragged Olayı (Görev Taşındığında)
Bir görev başka bir kategoriye taşındığında bu olay tetiklenir. Örneğin “Todo” kategorisindeki bir görev, In Progress kategorisine taşındığında aşağıdaki veri yapısı elde edilir.
"onCardDragged": {
"cardId": "task1",
"cardIndex": 2,
"cardLaneId": "lane_todo",
"cardTargetIndex": 1,
"cardTargetLaneId": "lane_in_progress"
Bu veri yapısı kullanılarak, görevin yeni kategorisine taşındığı takip edilebilir ve veritabanındaki kayıt güncellenebilir.
onLaneDaragged Olayı (Kategori Taşındığında)
Kategorilerin sıralaması değiştiğinde bu olay tetiklenir. Örneğin “In Progress” kategorisi, “Todo” kategorisinden sonra gelmek üzere taşındığında aşağıdaki veri yapısı oluşur:
"onLaneDragged": {
"laneId": "lane_in_progress",
"laneIndex": 1,
"laneTargetIndex": 2
Bu olay, kategorilerin sıralanmasını güncellemek ve arayüzdeki değişiklikleri yönetmek için kullanılabilir.
Görevleri belirli kriterlere göre filtrelemek ve özelleştirmek kullanıcı deneyimini iyileştirebilir. Örneğin, yalnızca yüksek öncelikli görevleri görmek isteyebilirsiniz.
Filtreleme Örneği
"filter": {
"priority": "high"
Bu yapı, yalnızca yüksek öncelikli görevleri gösterir.
Kanban Board’daki görev hareketleri, her zaman veri tabanı ile senkronize edilmelidir. onCardDragged ve onLaneDragged olayları, görevlerin ve kategorilerin sıralama bilgilerini veritabanına yansıtarak veri güncellemelerini sağlar.
Örneğin, bir görev bir kategoriye taşındığında veritabanında güncelleme yapabilirsiniz:
"updateCard": {
"cardId": "task1",
"newLaneId": "lane_in_progress",
"newIndex": 1
Kanban Board ile:
Bu örnek senaryoda, Tasks ve Categories veri kaynakları üzerinden yapılandırmalar sunuldu. Ancak daha kompleks projelerin için farklı veri kaynakları entegre edilerek genişletilmiş senaryolar oluşturulabilir.
Ayarı yapılandırmak için:
Elementlerinizi Styling Panel ile özelleştirerek, web ve mobil uygulamalarınız için etkileyici arayüzler oluşturabilirsiniz. Bu bölümde, aşağıdaki ayarları yapılandırabilirsiniz:
Bu adımları takip ederek, Area Chart elementini ihtiyaçlarınıza uygun şekilde yapılandırabilirsiniz.
Kuika, aşağıdaki sistem aksiyonlarını destekler: