Progress Bar, bir sürecin tamamlanma yüzdesini (ör. satış hedefleri) doğrusal bir gösterge üzerinde sunmak için kullanılır; SelectBox ile dönem (period) filtrelemesi yapılabilir.
Bir işlemin, görevin veya sürecin ne kadarının tamamlandığını kullanıcıya anlık olarak aktarmanın en etkili yolu Progress Bar elementini kullanmaktır. Form tamamlamadan dosya yüklemeye, aylık satış hedeflerinden onboarding adımlarına kadar pek çok senaryoda doğrusal ve yüzdesel göstergeleriyle kullanıcıya süreç hakkında net bir geri bildirim sağlar.
Başlamak için Data Sources alanındaki Tables kısmından ekrandaki tabloyu oluşturun. Ardından sol yan panelde Managed DB altındaki Actions alanındaki artı simgesine basıp New SQL Action'ı seçin. InsertSalesTargets aksiyonunu yazıp "dbo." ile doğru şema adını ekleyin ve Test butonuna basın. Aynı işlemleri GetSalesTargets ve GetSalesTargetsPeriod aksiyonları için de tekrarlayın.
UI Design modülüne geçin ve bu aksiyonları sayfaya Initial Action olarak ekleyin; GetSalesTargets aksiyonu için açılan alanı Default Empty olarak tanımlayın. Sayfaya bir Label elementi ekleyin, altına bir Panel elementi yerleştirin. Styling alanındaki Layout bölümünden genişlik ve yüksekliği, Fill alanından arka planı beyaz olarak ayarlayın; Border alanından Radius değerini 40 olarak belirleyin. Panel içine bir Row elementi yerleştirip Desktop alanından "1" olarak ayarlayın ve içine Vertical Stack ekleyin. Vertical Stack içine Progress Bar elementini ekleyin; FirstGradientColor ve SecondGradientColor alanlarından renkleri kırmızı ve yeşil olarak ayarlayın. Progress Bar'ın altına SelectBox, onun altına ise bir Row elementi ekleyin. Row içindeki Column alanlarını Styling Layout'tan yatay ve dikeyde ortalayın ve içine Label elementi yerleştirin. Row'u Duplicate ile çoğaltın.
Progress Bar üzerinde Percent değerini GetSalesTargets, First ve CompletionRate ile bağlayın. SelectBox üzerinden Values ve Placeholder alanlarında PeriodLabel tanımlamasını yapın; Options alanından Action, Field to Display ve Field to Use as Key tanımlamalarını ekrandaki gibi tamamlayın. Add Action ile onChange üzerinden aksiyonu SelectBox'a bağlayın ve açılan SelectedPeriod alanını tanımlayın. Label elementlerini isimlendirip Properties panelindeki Value alanından tanımlamalarını yapın.
Preview butonuna bastığınızda, ilerleme göstergeleriyle süreçleri kolayca ve anlaşılır biçimde takip edebildiğinizi göreceksiniz.
