Verileri hiyerarşik bir şekilde raporlamak için kullanılır. İstenen bilgiler bir ağaç listesi şeklinde görüntülenir.
| Araç Kutusundaki Görünümü | Free Formdaki Görünümü | Responsive Formdaki Görünümü |
| |
Uyumluluk
| Free Form | Responsive Form | Mobile |
Özellikler
- Name: Aracın adı buraya yazılacaktır.
- Text Size: Aracın içindeki metin boyutunu ayarlar.
- 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: Aracın soldan ve üstten mesafesini ayarlar (Bu alan Responsive Formlardan kaldırılmıştır).
- SQL Query: SQL sorguları buraya yazılacaktır.
- Formatting Field (Field|Operator|Value|Type|Colors|Cell(0-1)|Colored Area(Optional for Cell value=1): Belirtilen alan bilgisine göre belirtilen renk , metin özellikleri veya tarih formatı uygulanır.
- Hide Column Heading: Listedeki sütun başlıklarını gizler.
- Fit Horizontal: Aracı, kullanıcının ekranında sağa doğru 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ıra bir kez tıklandığında yapılacak işlemler için aksiyondur.
When the row is selected aksiyonu 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 aşağı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 aracından satır seçildikten sonra form açılmıştır.
- When double clicked on row: Listenin satırında çift tıklama ile yapılan aksiyondur.
When double clicked on row aksiyonu 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 aksiyonumuzu 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 Update Value aksiyonu oluşturulur. Aşağıda paylaşılan ekran görselinde form açıldığında tree list elemanının çalışması için oluşturulan aksiyonun detayları paylaşılmıştır.
Kullanılan Örnek 1:
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.
Formatting (Field|Operator|Value|Type|Colors|Cell(0-1)|Colored Area(Optional for Cell Value=1)); Tree list içindeki datada renklendirme yapılmak istenirse bu alan kullanılır. Renklendirme ile ilgili bir örnek verelim.
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. |
Kullanılan Örnek 2:
Projemize girip sol taraftaki form elemanları alanından ihtiyaç duyulan elemanları tasarım ekranına sürükleyerek sipariş oluşturma ekranı tasarlayalım ve sorgularını ekleyelim. Tasarımı yaptıktan sonra aşağıda ekran görüntüsündeki kırmızı ile işaretli alandan kayıt tuşundan kaydedip, run tuşuna basalım ve client ekranına geçelim.
Sipariş ekranındaki sipariş numarasına göre bilgileri girelim. Detay girip ekleyelim.
Bu örnekte 3 tane sipariş numarası ve detayları girilmiştir.
Daha sonra projemizde ikinci bir form ekleyip rapor olarak oluşturalım. Ekrana bir buton ve tree list elemanını sürükleyelim.
Buton içerisine tree list elemanını tetikleyecek şekilde When clicked – Update Value – TreeList_1 aksiyonunu ekleyelim.
Tree List elemanına tıklayalım. Sağ tarafta açılan özelliklerinden SQL Query alanına sorgumuzu ekleyelim.
Aşağıdaki sorgumuzu projemize uygun olarak ekleyelim.
SELECT
0 AS [|DetailID],
O.OrderNo AS [|OrderNo],
O.OrderNo AS [|id],
O.Customer,
O.OrderDate,
CASE O.Status WHEN 1 THEN 'Processing' WHEN 2 THEN 'Shipped' ELSE 'Delivered' END AS Status,
FORMAT(O.TotalAmount , 'N2', 'tr-TR') AS TotalAmount,
'' AS Product,
'' AS Quantity,
'' AS Discount,
'' AS UnitPrice,
ROUND(SUM(D.TotalPrice),2) AS TotalPrice,
NULL AS [|parentId]
FROM dbo.XPD_ORDERS O WITH (NOLOCK)
LEFT OUTER JOIN dbo.XPD_ORDERS_DETAIL D WITH (NOLOCK) ON O.OrderNo=D.OrderNo
GROUP BY O.OrderNo,O.Customer,O.OrderDate,O.Status,O.TotalAmount
UNION ALL
SELECT
UserDetailTableID ,
O.OrderNo ,
NULL AS [|id],
O.Customer,
O.OrderDate,
'' AS Status,
'' AS TotalAmount,
D.Product,
FORMAT(D.Quantity, 'N2', 'tr-TR') AS Quantity,
FORMAT(D.Discount, 'N2', 'tr-TR') AS Discount,
FORMAT(D.UnitPrice, 'N2', 'tr-TR') AS UnitPrice,
ROUND(D.TotalPrice,2) AS TotalPrice,
D.OrderNo AS [|parentId]
FROM dbo.XPD_ORDERS O WITH (NOLOCK)
LEFT OUTER JOIN dbo.XPD_ORDERS_DETAIL D WITH (NOLOCK) ON O.OrderNo=D.OrderNo
Sorgu yazarken dikkat edilmesi gerekenler;
- Sorguda detay açılabilmesi için ID alanlarına alias verilmeli. “id” ve “parentId” olarak eklenmeli.
- “id” aliası aynı şekilde küçük harflerle yazılmalı.
- “parentId“aliası için I harfi büyük diğerleri küçük aynı şekilde yazılmalı.
- “id” yazan kolondaki sayı değerleri her satır için farklı olmalı.
(Bu örnekte detay kısmındaki “id” kolonu için “null“ değer verildi.)
- “parentId” yazan kolondaki sayı değerleri “id” de yazan sayı değerlerini içermelidir. Eşleşecek olan değer bu kolondur. “parentId” si null olan satırlar ana satır olarak listeye gelmektedir. parentId boş veya 0 olarak yazılmamalı, null olarak yazılmalı.
Üstte yazan sorgunun sonucu olarak aşağıda ekran görüntüsü iletilmiştir. Ana satırların başındaki ok işaretinden detay satırı açılıp kapatılabilmektedir. Ok işaretine tıklandığında gelen satırların “parentId”si ile tıklanan ana satırın “id”si aynıdır.
Satırlarda renklendirme yapalım. Bunun için tree list elemanına tıklayalım. Özelliklerinden Formatting Field alanına koşulumuzu yazalım. Buradaki örnekte ana satırların rengini mavi yapalım. Bunun için ana satırlarımızın “id”si bulunmaktadır, aşağıda ekran görüntüsü bulunan “id”si 0’dan büyük olan olarak koşul eklenirse ana satırlar mavi olacaktır.
Yukarıda yazılan formatting field bilgisine göre, aşağıda tree list elemanı görünümü gösterilmiştir.
Tree list elemanının “When the row is selected” ve “When double clicked on row” olarak iki aksiyonu bulunmaktadır.
Bu iki aksiyon için örnekler aşağıda iletilmiştir.
Önce satıra tek tıklamada gerçekleşen aksiyon örneği ile başlayalım.
Önce tree list elemanının bulunduğu forma bir text box alanı ekleyelim. List unit price olarak ismini verelim. Daha sonra Tree list elemanını tıklayıp sağ taraftaki özellikler kısmından aksiyon sekmesini seçip add new action alanına tıklayalım. When the row is selected aksiyonunu seçelim.
When the row is selected aksiyonu için Update Value işlemini seçip yeni eklediğimiz alanı Value Area kısmından seçelim. SQL Query alanına listedeki sorgunun içinde bulunan UnitPrice alanındaki veriyi çekmek için $P olarak ekleyelim.
Client tarafında tree list elemanına veri dolduktan sonra ilk satıra tıklayalım. İlk satırın Unit price bilgisi olmadığı için ekrandaki List Unit Price alanına veri gelmemiş olacak.
Tree list elemanında ikinci satıra tıklandığında satırın unit price değeri olduğu için ekranda bulunan List Unit Price alanına veri gelecektir.
İkinci aksiyon örneği olarak When double clicked on row aksiyonunu kullanalım. Bu aksiyon içinde siparişi eklediğimiz formu açalım. Studio tarafında tree list elemanına tıklayıp aksiyonlarından eklemeyi yapalım. Bu aksiyon için Open Form Linked işlemini seçelim. Module ve Form isimlerini seçelim. Mapping list olarak eklediğimiz tree list ismini seçelim.
Mapping kısmında sihirbaza tıklayarak sipariş ekleme formu ile tree list içindeki kolon isimlerini eşleştirelim. Save and Exit butonuna basıp aksiyonu kaydedelim.
Client ekranında tree list elemanında ana satırlardan birine çift tıklayalım. Sipariş formu penceresi açılacaktır. Seçili satırın sipariş numarası açılan siparişi formuna eklenecektir. Formun tümü buna göre güncellenecektir.
Tree list elemanında ana satırın alt detaylarından bir satıra tıklayalım. Sipariş formu yeni pencerede açılacaktır. Bu satırın sipariş numarası ve detay ID bilgileriyle sipariş formu ekranına dolacaktır.