Conditional Styles ile elementlerin görünümünü verilerine göre dinamik olarak değiştirebilirsiniz. Tablodaki bir kolondan bir butona kadar her elemente, belirli bir koşul sağlandığında devreye giren stil kuralları tanımlayabilirsiniz. Böylece, örneğin durumu dolu olan satırları kırmızıyla vurgulayabilir veya kritik kayıtları farklı bir yazı tipiyle öne çıkarabilirsiniz.

Koşullu Stil Kuralı (Condition)

Conditional Styles bölümü, Styling panelinin en altında yer alır. "Add Condition" ile bir elemente sınırsız sayıda kural ekleyebilirsiniz. Her kural üç temel parçadan oluşur:

1. Name (Ad):
   
   • Kuralı tanımlayan addır. Varsayılan olarak Condition 1, Condition 2 gibi bir ad önerilir.
   • Ad alanı zorunludur. Aynı element üzerinde iki kurala aynı ad verilemez.
2. Will be styled if… (Koşul):
   
   • Kuralın hangi durumda uygulanacağını belirler. Koşul editörü, platformun diğer alanlarındaki koşul editörüyle aynıdır.
   • AND GROUP: Gruptaki tüm koşullar sağlandığında stil uygulanır.
   • OR GROUP: Gruptaki koşullardan herhangi biri sağlandığında stil uygulanır.

• Üç nokta menüsünden iç içe grup ekleyebilir (Add Nested Group) veya grubun türünü değiştirebilirsiniz (Change to OR GROUP / AND GROUP).

3. Stil Ayarları:
   
   • Bir kural seçiliyken Styling panelindeki Layout, Text, Fill, Border, Shadow ve Effects bölümleri o kuralı düzenler.
   • Seçili kuralın altında "The style sections above now edit this condition." notu görünür.
   • Henüz stil verilmemiş kurallarda kural adının altında "no style set" ifadesi yer alır.

Koşul Oluşturma (Add Condition)

Grubun yanındaki + ikonuna tıklayarak koşul ekleme penceresini açabilirsiniz.

Açılan ADD CONDITION penceresinde üç alan bulunur:

• Field (Alan): Koşulun kontrol edeceği veridir. Default, Components ve Action Results seçeneklerinden bağlanabilir. Tabloya bağlı elementlerde, satırın kendi verisini kullanmak için Current Row alanları listelenir.

• Operator (Operatör): Karşılaştırma türünü belirler (ör. Is Equal To, Is Not Empty).
• Value (Değer): Alanın karşılaştırılacağı değerdir. Seçilen operatöre göre gerekmeyebilir.

Öncelik Sırası

• Birden fazla kural aynı anda eşleşirse listede en üstteki kural uygulanır. Bir elementte iki veya daha fazla kural olduğunda panelde "When several match, the topmost wins." bilgisi görünür.
• Kuralların sırasını yukarı ve aşağı ok butonlarıyla değiştirebilirsiniz.

Koşullu Stilleri Yönetme

• Düzenleme: Kurala tıklayarak adını, koşulunu ve stil ayarlarını güncelleyebilirsiniz.
• Sıralama: Ok butonlarıyla kuralların önceliğini değiştirebilirsiniz.
• Tek özelliği temizleme: Bir stil özelliğinin yanındaki çöp kutusu ikonuyla yalnızca o kuralın ilgili değerini silebilirsiniz; kuralın koşulu korunur.
• Silme: Kuralın çöp kutusu ikonuyla kuralı tamamen kaldırabilirsiniz. Tüm kurallar silindiğinde bölüm ilk haline döner.

Elementlere Koşullu Stil Ekleme

1. Kuika platformuna giriş yapın ve Apps ekranından projenizi seçin.
2. UI Design modülüne tıklayın.
3. Stil vermek istediğiniz elementi seçin (ör. Table hücresindeki bir Label).
4. Styling panelini açın ve en alttaki Conditional Styles bölümünü genişletin.
5. Add Condition butonuna tıklayın ve kurala bir ad verin.
6. Will be styled if… alanında AND GROUP veya OR GROUP seçin, ardından + ikonuna tıklayın.
7. Açılan pencerede Field, Operator ve Value alanlarını doldurun (ör. Current Row.Status → Is Not Empty) ve CREATE butonuna tıklayın.
8. Kural seçiliyken Fill, Text, Border gibi bölümlerden uygulanacak stili belirleyin (ör. Fill → Color: FF0000).
9. Ekranı kaydedin ve sonucu görmek için Preview butonuna tıklayın.

Önemli Notlar

• Conditional Styles yalnızca Web ve Desktop projelerinde kullanılabilir. Mobil (iOS ve Android) ekranlarda ve Report Designer'da yer almaz.
• Koşullu stiller designer canvas'ında görünmez; yalnızca Preview ve çalışan uygulamada görüntülenir.
• Koşul her satır için ayrı değerlendirilir. Aynı tabloda bir satır boyanırken diğeri boyanmayabilir.
• Kural, elementin normal stilini ezer ama silmez; koşul sağlanmadığında normal stil geri gelir.
• Hover, Pressed, Focused ve Disabled renkleri kuralın önüne geçer. Örneğin fare eşleşen satırın üzerine geldiğinde Hover rengi görünür. Bu kasıtlı bir davranıştır ve boyalı satırlarda da fare geri bildiriminin korunmasını sağlar.
• Koşulu tanımlanmamış bir kural hiçbir elemente stil uygulamaz ancak listede kalmaya devam eder.
• Bu sürümde koşullar yalnızca satır verisine göre kurulabilir; ekran seviyesindeki değişkenlere göre koşul tanımlanamaz.

Bu adımları izleyerek uygulamanızdaki elementleri verilerine göre dinamik olarak stillendirebilir ve kullanıcılarınıza daha anlaşılır bir arayüz sunabilirsiniz.