/

Tree elementi, hiyerarşik veri yapılarının kullanıcıya katmanlı ve düzenli bir şekilde sunulmasını sağlayan güçlü bir görselleştirme elementidir. Bir öğenin alt öğelerini açıp kapatmaya imkân tanıyan bu yapı, karmaşık veri setlerini kolay anlaşılır bir formatta göstererek kullanıcı deneyimini artırır.

Bu elementi kullanabilmek için Data Sources modülündeki Tables alanından ProductCategories ve Products tablo yapılarını ekrandaki gibi oluşturun. Ardından InsertProductCategories adındaki aksiyonu oluşturun. Uygularken ProductCategories ve Products yazan yerleri silip, tekrar yazıp Enter’a basın. Test edip kaydedin. Böylece tablo adının önüne doğru şema adı eklenecektir. Actions, New SQL Action adımlarını izleyerek GetCategoryTree ve GetProducts aksiyonlarını oluşturun. Aynı adımları tekrarlayın. 

UI Design modülüne geçin. Initial Action ile sayfanıza GetCategoryTree aksiyonunu bağlayın. Ardından, “Tree” elementini sayfanıza sürükleyin. Options alanındaki Action, Field to display, Field to Use as Key, Field to Use as Parent, Field to Use as Checked alanlarını tanımlayın. İşaretleyip filtreleme yapabilmek için “Checkable” ayarını açık hale getirin.

Tree elementine, kategorilere tıklandığında filtrelenmesi için GetProducts aksiyonu ekleyip tanımlamasını yapın. Sol yan panelde yer alan Action Tree alanından GetProducts aksiyonunun yanındaki ikondan sayfaya sürükleyip bırakın.

Uygulama test edildiğinde, ekranın sol bölümünde hiyerarşik bir Tree yapısı yer alır. Bu yapı üzerinden kullanıcılar ürün kategorilerini üst ve alt kırılımlarıyla birlikte görüntüleyebilir ve birden fazla kategori için seçim yapabilir.