Tree List – Xpoda Bilgi Merkezi

Verileri hiyerarşik bir şekilde raporlamak için kullanılır. İstenen bilgiler bir ağaç listesi şeklinde görüntülenir.

Araç Kutusu'ndaki "Tree List" aracı simgesi

Tuvalde nasıl görünüyor

Uyumluluk

Free Form	Responsive Form	Mobile

Yukarıda paylaşılan görselinde olduğu gibi; Tree List komponentinin özellikler alanına ait detayları için kırmızı buton, aksiyonları için yeşil buton ve css tanımları yapabilmek içinde turuncu buton kullanılır.

Özellikler

Name: Aracın adı buraya yazılacaktır.
Text Size: Aracın boyutunu ayarlar.
Help Text: Mouse araç üzerine getirildiğinde yorum için girilen metindir.
Height / Width: Aracın yüksekliğini ve genişliğini ayarlar (Genişlik alanı Responsive Formlardan kaldırılmıştır).
From Left / Top: Takımın soldan ve üstten mesafesini ayarlar (Bu alan Responsive Formlardan kaldırılmıştır).
SQL Query: SQL sorguları buraya yazılacaktır.
Color Style (Field|Operation|Value|Type|Colors|Cell(0-1)): Belirtilen alan bilgisine göre belirtilen renk çizgiye veya alana uygulanır.
Sub Total (Field|Operation(count,sum,min,average)|Text): Ara toplam bilgilerinin liste altında görünmesini sağlar. Örneğin; miktar | toplam | Miktar Toplamı, miktarların alt toplamıdır.
Hide Column Heading: Listedeki sütun başlıklarını gizler.
Fit Horizontal: Aracı, kullanıcının ekranında tam ekrana sığdırır.
Pin Right: Aracı sağa sabitler.
Display: Aracın ekranda görünmemesini sağlar.
Detail Button: Rapordaki satırlara bir detay düğmesi ekler.

Aksiyonlar

When the row is selected: Satır seçildiğinde işleyicisi olarak bir "Aksiyon" atayın. Daha fazla bilgi için lütfen buraya tıklayın.

Satır seçildiğinde tıklama işleyicisi olarak bir örnek yapalım; satır seçildiğinde open form-list aksiyonunu kullanarak seçim sonrasında pop-up listesinin açılmasını sağlayalım.

Tree list aracımızı seçelim ve yukarıda paylaşılan ekran görselinin sol tarafında görünen aksiyonu oluşturalım. Aksiyonumuzu kendi kaydet butonuyla kaydedelim. Açılacak open formun ölçeklendirmesinin yapılması unutulmamalıdır, aksiyonda Form Widhth/Height alanlarından ölçeklendirme yapılır. Sonrasında Formumuzu kaydedip Run ile client ekranımıza gidelim. Ekran görselinin sağındaki client görüntüsünde tree list’ten satır seçildikten sonra form açılmıştır.

When double clicked on row: Çift tıklama işleyicisi olarak bir "Eylem" atayın. Daha fazla bilgi için lütfen buraya tıklayın.

Çift tıklama işleyicisi olarak bir örnek yapalım; forma eklenen text box bir alana listedeki satırı çift tıklayarak seçim yaparak UserTableID değerini sadece formda özelliği açık text box içinde gösterelim.

Tree list aracımızı seçelim ve yukarıda paylaşılan ekran görselinin sol tarafında görünen aksiyonumuzu oluşturup, kendi kaydet butonu ile aksiyonummuzu kaydedelim. Sonrasında formumuzu kaydedip Run butonu ile client ekranına gidelim. Ekran görselinin sağındaki client görüntüsünde en alttaki satırın UserTableID değeri forma eklenen SatırID içinde gösterilmiştir.

Form Action: Tree List aracında bir olay eklemek gerekir. Form açıldığında tree list aracı için Değeri Güncelle  aksiyonu oluşturulur. Aşağıda paylaşılan ekran görselinde form açıldığında tree list’in çalışması için oluşturulan aksiyonun detayları paylaşılmıştır.

Kullanım Örneği

Formumuza bir Tree List aracı ekleyelim ve Tree List aracımızın SQL Query alanına aşağıdaki gibi bir sorgu yazalım.

SELECT 1 AS [|id], null AS [|parentId], 'FACULTY OF EDUCATION' AS 'Faculties and Departments', '39' AS Quantity 
UNION ALL 
SELECT 2, 1, 'Education Sciences', '16' 
UNION ALL 
SELECT 3, 1, 'Department of Computer and Instructional Technology Teacher Education', '2' 
UNION ALL  
SELECT 4, null, ' FACULTY OF ENGINEERING' , '21' 
UNION ALL  
SELECT 5, 4, 'Department of Computer Engineering','8' 
SELECT 6, 4, 'Department of Electrical and Electronics Engineering', '13'

Bu sorgunun client ekranındaki görünümü aşağıdaki gibi olacaktır.

Search alanında, liste içerisinde yer alan değerler arasından arama yapılır.

Bu sorguda kimlikleri 1 ve 4 olan satırlar, parentId alanları boş olduğundan üst köken olarak kabul edilebilir. Id 2 ve Id 3 satır kimliği, parentId alanı 1 olduğu için satır 1'in altında yer alır. Ve yine parentID alanı 4 olduğu için Id 5 ve Id 6’ya sahip satır 4 numaralı satırın altında listelenecektir.

Sol tarafta yer alan üçgenlere tıklanarak içerisinde yer alan değerlerde görüntülenir. 

Field: Field name to be checked for value

Operator: Comparison criterion or change format ( for numeric/datetime fields )

Value: (to write value to compare) or (to write numeric/datetime format)

Type:
0 = Metin rengini değiştirmek için
1 = Arka plan rengini değiştirme için
2 = Metin rengini ve yazı tipini kalın olarak değiştirmek için
3 = Metin rengini ve yazı tipi stilini italik olarak değiştirmek için
4 = Arka plan rengini ve yazı tipini kalın olarak değiştirmek için
5 = Arka plan rengini ve yazı tipi stilini italik olarak değiştirmek için
right =metni sağa hizala
left = metni sola hizala
center = metni merkeze hizala

Colors: İstenilen rengi yazın

Cell:
0 Stili tüm satıra uygulamak için
1 Stili seçili alana uygulamak için

Colored Area: Kontrol edilen değer alanı yerine başka bir alanın rengini değiştirmek için (Optional for Cell value=1)

Yukarıdaki renklendirme örneği Quantity sütunundaki sütunlarda 20'den büyük değere sahip sütunlar kırmızı renkle boyanacaktır.

İkinci satırda parentId sütunundaki sütunlarda 0'dan büyük değere sahip sütunların rengi mavi olur ve ilgili text’ler italik olarak gösterilir.

Tree-list aracından farklı olarak, Tree List aracında istenilen satırlar, sorgu sonunda parentID alanına gelecek değer ile parent alana bağlanabilir.

Liste Ağacı bir soy ağacı olarak düşünülebilir. List değerinin bağlı olduğu satır (parentID) ağaç yapısında (null) null ise, ebeveyn soy olarak listelenecektir.

{[{category.name}]}

Kullanım Örneği