Kuika'nın Node Tree elementi, dinamik verileri hiyerarşik bir ağaç yapısı şeklinde görselleştirmenizi sağlar. Çok seviyeli ilişkisel veri yapılarının okunabilir biçimde sunulması gereken projelerde bir çözümdür. Kullanıcılar, dalları genişleterek veya daraltarak veri hiyerarşisini adım adım inceleyebilir.
Bu element; organizasyon şemaları, kategori–alt kategori yapıları, dosya dizinleri, ürün grupları, süreç ilişkileri veya kullanıcı rollerinin hiyerarşik gösterimi gibi senaryolarda sıkça tercih edilir. Node Tree, veri kaynaklarıyla entegre çalışarak kapsamlı yapıları dinamik olarak oluşturmanıza olanak tanır.
Node Tree elementi yalnızca web uygulamalarda kullanılabilir.
1.1. Sık Kullanım Senaryoları
Organizasyon Şemaları Oluşturma: Departman, ekip, rol ve alt-rol ilişkilerini hiyerarşik bir yapıda göstermek için kullanılabilir.
Kategori – Alt Kategori Yapıları: E-ticaret ürün grupları, içerik kategorileri veya çok seviyeli sınıflandırmalar için kullanılabilir.
Dosya / Klasör Yapılarının Görselleştirilmesi: Belgeler, klasörler veya proje yapıları gibi iç içe geçmiş dizinlerin gösteriminde etkilidir.
Hiyerarşik Bağımlılıkların Gösterimi: Süreç adımları, bağlı işlemler veya parent–child ilişkileri olan veri setleri için uygundur.
Kullanıcı – Rol – Yetki Haritaları: Bir kullanıcının hangi yetkilere sahip olduğunu veya yetki zincirini göstermek için kullanılabilir.
Ağaç Yapısında Navigasyon İçeren Arayüzler: Menülerin iç içe ilerlediği, alt başlıklara tıklayarak yeni ekranlara geçilen veya detaylara adım adım ulaşılan ekranlarda kullanılır.
2. Temel Özellikler
Hiyerarşik Veri Görselleştirme: Parent–child ilişkisine sahip veri yapıları çok seviyeli bir ağaç görünümünde gösterilebilir.
Dinamik Veri Yükleme: Node Tree, Datasource üzerinden gelen verilerle otomatik olarak yapı oluşturabilir. Böylece veri güncellendiğinde ağaç yapısı da güncellenir.
Tıklanabilir Node Yapısı: Her node tıklanabilir yapıdadır; bu sayede detay ekranı açma, seçim yapma veya başka işlemleri tetikleme gibi davranışlar uygulanabilir.
Özelleştirilebilir Node İçeriği: Node başlıkları, ikonları, renkleri ve metin yapıları iş ihtiyacına göre düzenlenebilir.
Esnek Veri Bağlama: Parent ID, Node ID, Display Name gibi alanların hangi veri kolonlarıyla eşleşeceği Properties üzerinden yapılandırılabilir.
2.1. Node Tree Elementi Özellikleri (Properties)
Node Tree elementini seçtiğinizde, sağ tarafta yer alan Properties paneli üzerinden ağacın veri kaynağını, görünüm yapısını ve node davranışlarını detaylı bir şekilde yapılandırabilirsiniz. Aşağıdaki tüm ayarlar madde madde açıklanmıştır.
Node Tree Genel Ayarları
Options: Node Tree’nin dinamik olarak oluşturulacağı veri kaynağını belirler. Bağlanan veri setinde en az şu alanlar bulunmalıdır:
Node ID
Parent ID
Display Name (Label)
Node Tree, bu veri üzerinden hiyerarşiyi otomatik olarak oluşturur.
Orientation: Ağaç yapısının hangi yönde çizileceğini belirler:
horizontal: Node’lar soldan sağa doğru dallanır.
vertical: Node’lar yukarıdan aşağıya doğru dallanır.
Initial Expand Level: Ağaç ilk yüklendiğinde kaç seviyenin açık (expanded) görüneceğini belirler. Örneğin:
1 → yalnızca root node açık
2 → root + 1. seviye node’lar açık
Level Distance: Node seviyeleri arasındaki dikey/yatay mesafeyi ayarlar. Değer arttıkça seviyeler birbirinden daha uzak görünür.
Siblings Margin: Aynı seviyedeki kardeş node’lar arasındaki boşluk miktarını belirler. Özellikle çok dallı yapılarda okunabilirliği artırmak için kullanılır.
Links Color: Node’lar arasındaki bağlantı çizgilerinin rengini belirler. Tema uyumu sağlamak için özelleştirilebilir.
siblingsHorizontalGap & siblingsVerticalGap: Kardeş node’lar arasındaki yatay ve dikey mesafeyi ayrı ayrı kontrol etmenizi sağlar.
Enable Zoom: Kullanıcıların NodeTree alanını yakınlaştırıp uzaklaştırmasını sağlar. Özellikle çok geniş hiyerarşik yapılarda büyük kolaylık sunar.
Node İçerisine Eklenen Label Elementi Özellikleri
Node Tree içine dilediğiniz kadar Label sürükleyebilirsiniz. Her eklenen element Node'un bir parçası olarak görünür. Aşağıdaki ayarlar, görselde işaretlenen Label elementine özeldir:
Label Elementi Ayarları (Node İçerisinde)
Value: Label üzerinde görüntülenecek sabit metni veya dinamik veriyi belirler. Symbol Picker üzerinden:
Current → columnName seçilerek node’a ait veri bağlanabilir.
Max Line: Label içeriğinin maksimum kaç satırda görüntüleneceğini belirler. Uzun başlıkların taşmasını engellemek için kullanılır.
Formatter: Label içeriğini biçimlendirmek için kullanılır. Örneğin:
Text → Uppercase
Number → Money formatı
Date → dd/MM/yyyy
Tooltip: Kullanıcı fareyi Label üzerine getirdiğinde gösterilecek açıklama metnini belirler. Özellikle uzun node isimleri için faydalıdır.
Node Tree Kullanımı ve Özelleştirme
Node içinde eklenen her UI elementi Symbol Picker → Current ile node verisine bağlanabilir.
Node Tree kendi düzenini otomatik oluşturur; Layout ayarları Node elementine değil Node Tree'e özeldir.
Ağaç yapısı veriye göre otomatik güncellenir; veri setini değiştirmek tüm yapıyı yeniden şekillendirir.
Görsel bütünlüğü sağlamak için Label, Image gibi elementler node kutusu içinde konumlandırılabilir.
2.2. Node Tree Elementine Eklenebilen Aksiyonlar
Node Tree elementi, hiyerarşik veri yapıları üzerinde kullanıcı etkileşimi sağlamaya yönelik olarak sınırlı fakat güçlü bir aksiyon yapısı sunar. Node Tree üzerinde yalnızca onNodeClick tetikleyicisi kullanılabilir. Element seçildiğinde Properties panelindeki ADD ACTION butonu üzerinden bu aksiyon tanımlanabilir.
Aşağıdaki maddeler Node Tree’nin aksiyon işleyişini açıklar:
Node Tree, yalnızca node bazlı tıklama etkileşimini destekler. Kullanıcı bir node üzerine tıkladığında onNodeClick tetiklenir.
onNodeClick, node’a ait verilerin (ör. NodeID, ParentID, Name vb.) aksiyona parametre olarak gönderilmesini sağlar. Bu sayede tıklanan node özelinde işlem yapılabilir.
Node Tree, tıklama dışında hover, selection, expand-change gibi aksiyonları tetiklemez. Genişletme/daraltma işlemleri yalnızca görsel davranıştır ve aksiyon üretmez.
Veri güncelleme veya başka ekranlara yönlendirme gibi işlemler onNodeClick aksiyonu üzerinden gerçekleştirilir.
Kullanıcı etkileşimi gerektiren senaryolar (ör. “node seçildiğinde detay aç”, “ilgili alt verileri getir”) tamamen onNodeClick üzerinden yönetilir.
Node Tree kendi içinde işlem başlatmaz; tüm iş mantığı tıklama sonrası tetiklenen aksiyon ile dışarıdan kontrol edilir.
Node Tree üzerinde birden fazla aksiyon tipi tanımlanamaz; element yalnızca tek bir kullanıcı etkileşimi (node tıklama) destekler.
3. Node Tree Elementi Nasıl Kullanılır?
Bu bölümde Node Tree elementinin uçtan uca kullanımını örnek senaryolar üzerinden ele alacağız.
Senaryo: Çalışan Hiyerarşi ve Liste Görünümü
Bir insan kaynakları uygulamasında, kurum bünyesinde yer alan çalışanların kolayca takip edilebilmesi ve organizasyon yapısının net bir şekilde görüntülenebilmesi için tablo tabanlı bir çalışan listesi ve hiyerarşik yapı birlikte kullanılır. Bu yapı, her çalışana ait temel bilgileri tek bir ekranda düzenli ve okunabilir bir biçimde sunarak yöneticilerin ekip yapısını hızlıca analiz etmesini sağlar.
Çalışan listesinde; ad–soyad, pozisyon/ünvan, bağlı olduğu yönetici, departman, işe giriş tarihi ve çalışma durumu gibi kritik alanlar sütunlar halinde gösterilir. Her satır tek bir çalışanı temsil edecek şekilde yapılandırılmış olup, çalışana ait profil görseli veya ikon bilgisi görsel destek olarak satırın başında konumlandırılır.
Kullanıcı, liste üzerinden çalışanları aşağı doğru kaydırarak inceleyebilir; departman, pozisyon veya çalışma durumuna göre filtreleme ve sıralama işlemleri gerçekleştirebilir. Hiyerarşik görünüm sayesinde yöneticiler ve onlara bağlı ekip üyeleri kolayca ayırt edilir. Bu yapı sayesinde insan kaynakları ekipleri, organizasyon şemasını net bir şekilde görüntüleyebilir ve personel yapısını hızlı ve kontrollü bir şekilde değerlendirebilir.
Senaryoda:
Çalışan listesi, tablo yapısı içerisinde satır bazlı olarak sunulur.
Her satırda sırasıyla çalışan adı, ünvan/pozisyon, departman, bağlı olduğu yönetici ve çalışma durumu bilgileri gösterilir.
Satırın sol bölümünde yer alan profil görseli veya ikon, ilgili çalışanı görsel olarak temsil eder.
Ünvan ve departman bilgileri, çalışanların organizasyon içindeki konumunu net bir şekilde ayırt edilebilir biçimde gösterir.
Kullanıcı, liste üzerinden çalışanlar arasında karşılaştırma yapabilir ve temel personel bilgilerine tek bakışta hızlıca erişebilir.
Adım 1 - Veri Kaynağı Oluşturma
DataSources modülünde tablo oluşturma:
Datasources modülüne gidin.
Ardından Tables sekmesine gidin.
“EmployeeHierarchy”adında yeni tablo oluşturun.
Kurulması gereken tablo yapısı aşağıdaki gibidir:
Önemli Alan adları:
Id: Çalışana ait benzersiz kimlik bilgisini ifade eder. Hiyerarşik yapı içinde her bir kaydın tekil olarak tanımlanmasını sağlar ve Node Tree yapısında ana düğüm kimliği olarak kullanılır.
ParentId: Çalışanın bağlı olduğu üst yönetici veya birim bilgisini temsil eder. Bu alan sayesinde çalışan–yönetici ilişkisi kurulur ve organizasyon hiyerarşisi ağaç yapısında doğru şekilde oluşturulur. Üst seviye (root) kayıtlar için boş bırakılabilir.
FullName: Çalışanın listelerde ve hiyerarşik görünümde gösterilen görünen ad bilgisidir. Kullanıcının çalışanı hızlıca tanımasını ve ayırt etmesini sağlar.
Name: Çalışana ait kısa ad, kod veya alternatif gösterim bilgisini tutar. Eğitim, demo veya kılavuz senaryolarında sade bir isimlendirme için kullanılabilir.
Title: Çalışanın organizasyon içindeki pozisyonunu veya ünvanını belirtir (ör. Üst Yönetici, İK Yöneticisi, Yazılım Uzmanı). Hiyerarşik yapının anlaşılmasını kolaylaştıran açıklayıcı bir alandır.
Department: Çalışanın bağlı olduğu departman bilgisini ifade eder. Liste ve filtreleme işlemlerinde departman bazlı analiz yapılmasını sağlar.
ProfileImageUrl: Çalışana ait profil görselinin URL bilgisini içerir. Liste veya Node Tree görünümünde görsel destek sağlayarak kullanıcı deneyimini güçlendirir ve kayıtların daha kolay ayırt edilmesine yardımcı olur.
Adım 2 - Gerekli Aksiyonları Tanımlama
Arayüzde verileri göstermek ve veri eklemek için:
İki aksiyon tanımlamanız gerekir.
Datasources modülü içerisinde Actions > New SQL Action sekmesinden yeni aksiyon ekleyin.
Örnek Verileri Ekleyen Aksiyon (InsertEmployeeHierarchy): Uygulamayı örnek verilerle test etmek için aşağıdaki SQL aksiyonunu ekleyin ve TEST butonuna basın.
DECLARE @Manager UNIQUEIDENTIFIER = NEWID();
DECLARE @HR UNIQUEIDENTIFIER = NEWID();
DECLARE @IT UNIQUEIDENTIFIER = NEWID();
DECLARE @Dev UNIQUEIDENTIFIER = NEWID();
INSERT INTO EmployeeHierarchy
(Id, ParentId, FullName, Name, Title, Department, ProfileImageUrl, Bio)
VALUES
(@Manager, NULL, N'Çalışan 001', N'EMP-001', N'Üst Yönetici', N'Yönetim',
N'https://i.pravatar.cc/300?img=12',
N'Kurumsal yönetim ve ekip koordinasyonu süreçlerinde görev alan yönetici.'),
(@HR, @Manager, N'Çalışan 002', N'EMP-002', N'İK Yöneticisi', N'İnsan Kaynakları',
N'https://i.pravatar.cc/300?img=32',
N'İşe alım ve çalışan ilişkileri süreçlerinde sorumluluk üstlenen yönetici.'),
(@IT, @Manager, N'Çalışan 003', N'EMP-003', N'BT Yöneticisi', N'Bilgi Teknolojileri',
N'https://i.pravatar.cc/300?img=56',
N'Teknik ekip ve sistem altyapılarının yönetiminden sorumlu yönetici.'),
(@Dev, @IT, N'Çalışan 004', N'EMP-004', N'Yazılım Uzmanı', N'Bilgi Teknolojileri',
N'https://i.pravatar.cc/300?img=8',
N'Uygulama geliştirme süreçlerinde aktif rol alan teknik uzman.');
Uygularken EmployeeHierarchy kısmınısiliptekrar EmployeeHierarchy yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.
Personelleri Sağlayan Aksiyon (GetEmployeeHierarchy):
SELECT
Id,
ParentId,
FullName,
Title,
Department,
ProfileImageUrl,
(Title + N' • ' + Department) AS DisplayText
FROM EmployeeHierarchy;
Uygularken EmployeeHierarchy kısmınısiliptekrar EmployeeHierarchy yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.
Personel Detayını Sağlayan Aksiyon (GetEmployeeDetail):
SELECT * FROM EmployeeHierarchy WHERE Id = @Id;
Uygularken EmployeeHierarchy kısmınısiliptekrar EmployeeHierarchy yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.
Image elementinde Image > Properties > Value > Action Results > GetEtmployeeDetail > First > ProfileImageUrl tanımlamasını yapın.
Image boyutunu Image > Styling > Width ve Height > 128 px olarak ayarlayın.
Resim altına Vertical Stack elementi içerisine Elements > Display > Label elementini ekleyin.
Label elementinde Label > Properties > Value > Action Results > GetEmployeeDetail > First > FullName tanımlamasını yapın.
Label elementi altına Vertical Stack içerisine yeni Elements > Display > Label elementi daha ekleyin.
Label elementinde Label > Properties > Value > Action Results > GetEmployeeDetail > First > Bio tanımlamasını yapın.
Son durumda detay sayfası aşağıdaki gibi olmalıdır.
Detay sayfasını ana sayfaya bağlamak için, sol yan panelde yer alan Screens alanından Node Tree elementinin bulunduğu ana sayfaya gidin.
Node Tree elementine tıklayın. Elemente NodeTree > Properties > Add Action > onNodeClick > Navigation > Navigate aksiyonunu ekleyin.
Navigate aksiyonunda To Screen alanını NodeDetail, Open As tipini Modal olarak ayarlayın ve Screen Inputs bölümünde Id değerini Components > NodeTree > Options > Selected > Id şeklinde tanımlayın.
Preview:
Uygulama test edildiğinde, çalışanların organizasyon yapısını hiyerarşik olarak gösteren bir Node Tree ana sayfası görüntülenir. Bu ekranda her bir çalışan, kart yapısı içerisinde profil görseli, çalışan adı ve ünvan–departman bilgileriyle birlikte sunulur. Kartların altında yer alan sayı göstergeleri, ilgili çalışana bağlı alt hiyerarşi sayısını ifade eder ve bu göstergeler sayesinde kullanıcı alt ekipleri açıp kapatarak hiyerarşik yapıyı kontrollü bir şekilde görüntüleyebilir; üst yönetici en üst seviyede konumlanırken, bağlı yöneticiler ve ekip üyeleri net ve anlaşılır bir biçimde gösterilir.
Kullanıcı, Node Tree üzerinde yer alan herhangi bir çalışanın kartına tıkladığında, seçilen çalışana ait detayların yer aldığı bir detay sayfası (modal) açılır. Bu ekranda çalışanın profil görseli, adı ve kısa biyografi bilgisi sade ve odaklı bir yerleşimle sunulur. Bu yapı sayesinde kullanıcı, organizasyon şemasını bozmadan çalışanlar hakkında hızlıca bilgi edinebilir ve hiyerarşik yapı içinde kontrollü bir şekilde gezinebilir.
4. Ortak Özellikler (Properties)
Node Tree 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:
Veri yapısını doğru kurgulayın. Node Tree’nin doğru çalışması için veri kaynağında mutlaka NodeID ve ParentID alanları bulunmalıdır. Hatalı hiyerarşi grafik yapısını bozar.
İlk yüklemede en uygun Expand Level değerini seçin. Çok geniş ağaç yapılarında InitialExpandLevel = 1 performansı ve okunabilirliği artırır.
Label içeriğini mümkün olduğu kadar veriyle bağlayın. Symbol Picker → Current ile dinamik veri bağlamak, Node Tree’nin veri güncellemelerine otomatik uyum sağlamasını sağlar.
Görünüm boşluklarını optimize edin. Çok dallı yapılarda LevelDistance ve siblingsMargin değerlerini artırmak görsel karmaşayı azaltır.
Tema uyumu için LinksColor ayarını uygulamanın genel renkleriyle eşleştirin. Böylece grafik bütünlük korunur.
6. Kısıtlamalar
Node Tree yalnızca web uygulamalarında desteklenir. Mobil uygulamalarda kullanılamaz.
Sadece bir adet aksiyon tipi destekler (onNodeClick). Node Tree üzerinde tıklama dışında başka aksiyonlar tetiklenemez.
Veri yapısı hatalıysa Tree oluşmaz. Eksik ParentID veya döngüsel (recursive) ilişkiler Node Tree’nin yüklenmesini engeller.
