1. Kuika platformuna giriş yapın.
2. Apps ekranından çalışacağınız projeyi açın.
3. UI Design modülüne gidin.

4. Sol kenardaki Elements panelinden Special kategorisini seçin.
5. Kanban Board elementini çalışma alanına sürükleyip bırakın.

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: 

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;

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

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. 

Senaryo: Yazılım Geliştirme Projesi

Bir yazılım geliştirme projesinde aşağıdaki kategoriler kullanılacaktır: 

• Todo (Yapılacak)
• In Progress (Devam ediyor)
• Completed (Tamamlandı)

Her kategoride belirli görevler yer alacak ve bu görevler yazılım geliştirme sürecindeki iş adımlarını temsil edecektir. 

1. Kanban Board Elementinin Eklenmesi ve Yapılandırılması

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: Kategori verileri için “Categories” veri kaynağına bağlayın. 
• Field To Lane ID: Kategorilerin benzersiz ID’sini belirlemek için Categories veri kaynağındaki “id” alanını kullanın. 
• Field To Lane Index: Kategorilerin sıralanması için “index” alanını kullanın.   

"Action": "Categories",  
"Field to Lane ID": "id",  
"Field to Lane Index": "index"

Card Ayarları (Görev Yapılandırması) 

• Action: Görev verileri için “Tasks” veri kaynağını bağlayın. 
• Field To Card ID: Her görevin benzersiz ID’si, Tasks veri kaynağındaki “task_id” alanından alınacaktır. 
• Field To Card Lane ID: Her görevin ait olduğu kategori ID’si “lane_id” alanından alınacaktır. 
• Field To Card Index: Görevlerin sıralanması için “task_index” alanı kullanılacaktır. 

 "Action": "Tasks",  
 "Field to Card ID": "task_id", 
 "Field to Card Lane ID": "lane_id",  
 "Field to Card Index": "task_index"

2. ‍Kanban Board Olaylarının Yönetilmesi 

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. 

3. Görevleri Filtreleme ve Özelleştirme 

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. 

4. Veritabanı Güncellemeleri ve Senkronizasyon

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: 

• Görevlerin sıralanması ve kategori etkileşimi sayesinde iş akışı düzenleyebilir, 
• Veritabanı senkronizasyonu ile verilerin güncel kalmasını sağlayabilir,
• Olay yönetimi ile dinamik bir yapı oluşturabilirsiniz. 

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. 

Authorization (Yetkilendirme)

• Anonymous Access: Kullanıcıların hesap bilgisi girmeden erişmesini sağlar.
• All Roles Access: Kullanıcıların hesap bilgileri doğrulanarak erişim sağlanır.
• Element düzeyinde yetkilendirme için Properties panelinden Authorization ayarlarını düzenleyin.

Visibility (Görünürlük)

• Always Visible: Element her zaman görünür.
• Hidden: Element gizlenir.
• Sometimes Visible: Element, belirli bir koşula bağlı olarak görünür.

Ayarı yapılandırmak için:

1. Ekrandaki elementi seçin.
2. Sağ kenardaki Properties panelini açın.
3. Visibility alanında ihtiyacınıza göre bir seçenek belirleyin.

Editability (Düzenlenebilirlik)

• Enabled: Element düzenlenebilir.
• Disabled: Element düzenlenemez.
• Sometimes Enabled: Element, belirli koşullara göre düzenlenebilir veya düzenlenemez.

Style Panel ile Arayüz Tasarımı

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:

• Layout (Düzen): Boyutlandırma, hizalama ve iç boşluk (padding) ayarları. Ayarlar arasında Size, Min Size ve Align bulunur.
• Text (Metin): Yazı tipi, stil, renk, boyut ve aralık ayarları.
• Fill (Dolgu): Arka planı renk veya görsellerle özelleştirme.
• Border (Kenarlık): Kenarlık ekleme ve köşe yarıçapı ayarları.
• Shadow (Gölge): Elementlere derinlik katmak için gölge efekti ekleme.

Bu adımları takip ederek, Area Chart elementini ihtiyaçlarınıza uygun şekilde yapılandırabilirsiniz.

Actions (Aksiyonlar)

Kuika, aşağıdaki sistem aksiyonlarını destekler:

• Arithmetic, Authorization, Condition, Device, Export, Geolocation, Invers, Local Storage, Multi Language, Navigation, Notification, Payment, UI Control, Process Administration, Process Automation, Trigger, Process Automation, Process Administration ve String Operations.
• Kendi oluşturduğunuz SQL aksiyonlarını da kullanabilirsiniz.
• Aksiyon eklemek için Properties panelinden +ADD ACTION butonunu kullanabilirsiniz.

Actions desteği bazı elementlerde geçerli olmayabilir.