Kuika’nın Range Slider elementiyle kullanıcıların belirlediği fiyat aralığına göre ürün listesini anlık olarak filtreleyen dinamik bir ekran oluşturmayı adım adım öğrenin.
“Range Slider” elementi, kullanıcıların uygulama içerisinde belirli bir değer aralığında seçim yapmasını sağlayan görsel bir input elementidir.
Bu elementi kullanmak için öncelikle “Data Sources” modülündeki “Tables” alanından ekrandaki tabloyu oluşturun. “Actions” alanındaki “New SQL Action” alanından “InsertProductInventory” aksiyonunu oluşturun. “dbo.” şeklinde tablo isminizi yazın. Test edip “Create” butonuna tıklayın. Daha sonra “GetProductsByValueRange” aksiyonu için de aynı işlemleri takip edin. Ardından “UI Design” modülü ile sayfanıza “Range Slider” elementini sürükleyip bırakın. Ekran açıldığında aralık değerlerini “Start Value” ve “End Value” alanından “10” ve “75” olarak ayarlayın. “Range Slider” içerisindeki minimum ve maksimum değerleri “Min” ve “Max” alanından “0” ve “200” olarak ayarlayın. “Handle Color” ve “Slider Color” alanlarından rengi ayarlayın. Seçili aralık değerlerini görmek için “TooltipVisible” ayarını açık olarak ayarlayın. Ekrana “pageInit” aksiyonu ekleyin. Açılan alanda “minValue” ve “maxValue” alanlarının tanımlamalarını yapın. “Range Slider” elementine “GetProductsByValueRange” aksiyonunuzu “onChange” ile ekleyin. Aksiyon parametrelerinden alanlara tanımlamaları yapın. Sayfaya sol yan taraftaki “Action Tree” alanından “GetProductsByValueRange” aksiyonunun yanındaki mavi ikondan sayfaya sürükleyin. “Table” ve “Outputs” seçimlerini yapıp “Create” butonuna basın.
Uygulama test edildiğinde, ekranın üst kısmında yer alan “Range Slider” üzerinden minimum ve maksimum fiyat aralığı seçilerek ürün listesi dinamik olarak filtrelenir. Slider üzerinde belirlenen değerler anlık olarak güncellenir ve bu aralığa uyan ürünler tabloda otomatik şekilde görüntülenir. Kullanıcı, fiyat aralığını daraltıp genişleterek yalnızca bütçesine veya aradığı kriterlere uygun ürünleri hızlı ve kolay bir şekilde listeleyebilir.
