Tutorials

/

Progress Circle Elementi Nasıl Kullanılır?

Progress Circle, görev tamamlama yüzdesini kompakt dairesel bir formda göstermek için kullanılır; SelectBox ile içerik/bağlam (context) bazlı filtreleme yapılabilir.

İlerleme durumlarını kompakt ve estetik bir dairesel formda sunmanın en iyi yolu Progress Circle elementini kullanmaktır. Görev tamamlama yüzdelerinden performans hedeflerine kadar pek çok süreci çember üzerinde görselleştiren bu element modern ve sade bir görünüm sunar.

Başlamak için Data Sources modülündeki Tables alanından ekrandaki tabloyu oluşturun. Ardından Actions alanındaki artı butonundan New SQL Action'a tıklayarak aksiyonlarınızı oluşturun. InsertTaskCompletion aksiyonunu yazın ve tablo adının önüne "dbo." ekleyerek doğru şema adını tanımlayın; Test edip kaydedin. Aynı işlemleri verileri sağlayan ve filtreleyen GetTaskCompletionStats ile içerik isimlerini sağlayan GetTaskCompletionContextName aksiyonları için de tekrarlayın.

Verilerin sayfa açılışında anında yüklenmesi için GetTaskCompletionStats aksiyonunu Initial Action ile Default Empty olarak tanımlayın; ardından GetTaskCompletionContextName aksiyonunu da Initial Action olarak ekleyin. Sayfaya bir Label elementi sürükleyin, yazınızı girin ve Styling panelindeki Style alanından Heading 2, Layout alanından ise ortalama ayarını yapın. Altına bir Panel elementi ekleyin; Styling panelinden Width ve Height değerlerini 275 ve 400 olarak, Fill alanından arka planı beyaz, Border alanındaki Radius değerini ise 40 olarak ayarlayın. Panel içine bir Row elementi sürükleyip Desktop alanını "1" olarak belirleyin; içine Vertical Stack ekleyip Progress Circle'ı yerleştirin ve Styling Layout alanından ortalayın. Altına bir SelectBox elementi sürükleyip bırakın. Panelin alt bölümüne iki sütunlu bir Row elementi ekleyin, Styling Layout alanından yatay ve dikey ortalama ayarını yapın ve Row içlerine Label elementleri ekleyerek Duplicate ile çoğaltın.

Progress Circle üzerinde Percent ve Placeholder ayarlarını yapılandırın. SelectBox'ın Options alanındaki Action, Field to Display ve Field to Use as Key alanlarını doldurun. Add Action ile onChange üzerinden GetTaskCompletionStats aksiyonunu bağlayın ve Selected Context alanını tanımlayın. Alt Label elementlerinin Value alanlarını sırasıyla yazı ve tanımlamalarla yapılandırın.

Preview butonuna tıkladığınızda, seçilen veri grubuna ait ilerlemeyi modern bir görünümle kolayca izleyebileceksiniz.