Kuika’nın Year Picker elementi, kullanıcıların yalnızca yıl seçmesine olanak tanıyan bir seçim elementidir. Kullanıcılar yılı ister manuel olarak girebilir, ister yıl seçici aracılığıyla kolayca belirleyebilir. Yıl bazlı veri işlemleri, raporlama ekranları, filtrelemeler veya yıllık planlama süreçlerinde ideal bir kullanım sunar. Year Picker, geçerli yılın doğru şekilde seçilmesini sağlayarak hatalı veri girişlerini önler ve kullanıcı deneyimini basitleştirir.
Year Picker elementi hem web hem de mobil uygulamalarda desteklenmektedir.
1.1. Sık Kullanım Senaryoları
Yıl bazlı raporlama ekranları: Finansal raporlar, satış performansı, yıllık analizler veya KPI izleme gibi yalnızca yıl seçiminin yeterli olduğu durumlarda kullanılır.
Yıllık izin, sözleşme veya üyelik başlangıç yılı seçimi: Kullanıcıların bir sürecin hangi yılda başladığını veya geçerli olduğu yılı seçmesi gerektiğinde kullanılabilir.
Eğitim–öğretim yılı seçimi: Öğrenci takip sistemlerinde, kayıt yılları veya mezuniyet yılları gibi bilgilerin alınmasında kullanılabilir.
Grafik ve tablo filtreleme: Kullanıcı bir yılı seçtiğinde grafiklerin veya tabloların otomatik olarak ilgili yılın verisine göre güncellenmesi gereken ekranlarda sıkça tercih edilir.
Rapor veya belge oluşturma süreçlerinde yıl belirleme: Fatura yılı, beyanname yılı, faaliyet raporu yılı gibi resmî doküman oluşturma süreçlerinde kullanılır.
2. Temel Özellikler
Manuel giriş veya yıl seçici desteği: Kullanıcılar ister metin kutusuna yıl yazarak ister açılan liste üzerinden seçim yaparak yıl belirleyebilir.
Format uyumluluğu: Seçilen yıl, backend veya diğer bileşenlerle uyumlu olacak şekilde yalnızca “YYYY” formatında döndürülür.
Temizleme (Clear) özelliği: Allow Clear sayesinde kullanıcı tek tıklama ile seçili yılı sıfırlayabilir.
onChange tetikleyicisi ile anlık işlem yapma: Yıl değiştiğinde tablo, grafik, liste veya formun otomatik olarak güncellenmesi sağlanabilir.
2.1. Year Picker Elementi Özellikleri
Year Picker elementinin özelliklerini, sağ kenardaki Properties panelinden yapılandırabilirsiniz.
Value (Değer): Statik bir yıl değeri belirleyebilir veya Symbol Picker kullanarak dinamik değerler atayabilirsiniz.
Android uygulamalarda, Year Picker elementi için bir yıl seçilmediğinde, element boş (Null) veya belirlenmemiş bir değerle görüntülenebilir.
Placeholder: Kullanıcı bir seçim yapmadığında görüntülenen yer tutucu metni belirler. Örneğin, "Yıl Seçin".
Allow Clear: Kullanıcının seçtiği yılı tek bir tıklama ile temizlemesine olanak tanır. Sağ köşede beliren Delete (X) ikonu ile giriş sıfırlanabilir.
Min Year: Kullanıcının seçebileceği en düşük yıl değerini belirler.
Max Year: Kullanıcının seçebileceği en yüksek yıl değerini belirler.
2.2. Elemente Eklenebilen Aksiyonlar
Year Picker elementi, kullanıcı bir yıl seçtiğinde veya mevcut yılı değiştirdiğinde aksiyon tetikleyebilmesi için onChange olayını destekler. Bu tetikleyici sayesinde yıl değişimine bağlı veri filtreleme, liste güncelleme veya hesaplama gibi işlemler otomatik olarak yapılabilir.
onChange
Kullanıcı yıl alanında bir seçim yaptığında veya mevcut yılı değiştirdiğinde tetiklenir.
Kullanım Senaryoları:
Seçilen yıla göre tablo veya liste filtrelemek (Örneğin: “Sadece 2024 kayıtlarını göster.”)
Yıl bazlı raporların yeniden yüklenmesi
Chart elementlerinde seçilen yıla göre veri güncelleme
Formlarda dinamik alanların yıl seçimine göre değiştirilmesi
API çağrıları yaparak o yıla ait verilerin getirilmesi
Dashboard içinde yıllık özet verilerin yenilenmesi
Year Picker elementi yalnızca onChange aksiyonunu destekler; başka bir tetikleyici bulunmamaktadır.
3. Year Picker Elementi Nasıl Kullanılır?
Bu bölümde Year Picker elementinin uçtan uca kullanımını örnek senaryolar üzerinden ele alacağız.
Senaryo: Yıllık Harcamaları Gösterme
Bir kişisel finans veya gider takip uygulamasında kullanıcılar, belirli bir yıla ait harcamalarını tek ekranda görüntülemek ister. Year Picker elementi, bu senaryoda hangi yıla ait verilerin listeleneceğini seçmek için kullanılır.
Senaryoda:
Kullanıcı, yıl seçimi yaparak ilgili dönemlere ait harcamaları filtreleyebilir. Seçilen yıl için; harcama türü ve tutar bilgileri tablo üzerinde listelenir.
Year Picker sayesinde tarih seçimi sade ve kontrollü bir şekilde gerçekleştirilir.
Tek sayfa üzerinde hem yıl seçimi hem de listeleme işlemleri kolayca tamamlanır.
Adım 1 - Veri Kaynağı Oluşturma
DataSources modülünde tablo oluşturma:
Datasources modülüne gidin.
Ardından Tables sekmesine gidin.
“” adında yeni tablo oluşturun.
Kurulması gereken tablo yapısı aşağıdaki gibidir:
Önemli Alan adları:
ExpenseDate: Harcamanın gerçekleştiği tarih bilgisini tutar. Yıllık filtreleme (Year Picker) ve dönem bazlı raporlamalarda temel alınan alandır.
HarcamaTuru: Harcamanın kategorisini ifade eder (örn. Kira, Market, Ulaşım, Fatura). Grafikler, özet tablolar ve kategori bazlı analizlerde kullanılır.
Tutar: Harcamanın parasal değerini belirtir. Toplam, ortalama ve karşılaştırmalı finansal analizlerin hesaplandığı ana alandır.
Adım 2 - Gerekli Aksiyonları Tanımlama
Arayüzde verileri göstermek ve kaydetmek için:
Bu senaryoda iki aksiyon kullanılacaktır.
Datasources modülü içerisinde Actions > New SQL Action sekmesinden yeni aksiyon ekleyin.
Örnek Verileri Ekleyen Aksiyon (InsertYearlyExpenseRecords): Uygulamayı örnek verilerle test etmek için aşağıdaki SQL aksiyonunu ekleyin ve TEST butonuna basın.
INSERT INTO YearlyExpenseRecords (Id, ExpenseDate, HarcamaTuru, Tutar)
-- ======================
-- 2023-- ======================
SELECT NEWID(), CAST('2023-02-05' AS date), N'Kira', 5200 UNION ALL
SELECT NEWID(), CAST('2023-02-12' AS date), N'Market', 1800 UNION ALL
SELECT NEWID(), CAST('2023-06-08' AS date), N'Ulaşım', 750 UNION ALL
SELECT NEWID(), CAST('2023-06-18' AS date), N'Faturalar', 1100 UNION ALL
SELECT NEWID(), CAST('2023-09-22' AS date), N'Eğlence', 900 UNION ALL
-- ======================
-- 2024-- ======================
SELECT NEWID(), CAST('2024-01-03' AS date), N'Kira', 6500 UNION ALL
SELECT NEWID(), CAST('2024-01-14' AS date), N'Market', 2400 UNION ALL
SELECT NEWID(), CAST('2024-04-10' AS date), N'Ulaşım', 1100 UNION ALL
SELECT NEWID(), CAST('2024-04-20' AS date), N'Faturalar', 1600 UNION ALL
SELECT NEWID(), CAST('2024-08-25' AS date), N'Eğlence', 1300 UNION ALL
-- ======================
-- 2025-- ======================
SELECT NEWID(), CAST('2025-03-04' AS date), N'Kira', 8200 UNION ALL
SELECT NEWID(), CAST('2025-03-16' AS date), N'Market', 3100 UNION ALL
SELECT NEWID(), CAST('2025-07-09' AS date), N'Ulaşım', 1450 UNION ALL
SELECT NEWID(), CAST('2025-07-19' AS date), N'Faturalar', 2150 UNION ALL
SELECT NEWID(), CAST('2025-11-29' AS date), N'Eğlence', 1600;
Uygularken YearlyExpenseRecords kısmınısiliptekrar YearlyExpenseRecords yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.
Verileri Filtreleyip Sağlayan Aksiyon (GetYearlyExpensesByDate):
Aksiyon eklenirken kenarda bulunan SQL Action > Parameters alanında SelectedDate türünü string olarak ayarlayın.
Uygularken YearlyExpenseRecords kısmınısiliptekrar YearlyExpenseRecords yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.
Adım 3 - Element ve Aksiyon Ekleme
Sayfaya Elements > Date and Time Input > YearPicker elementini sürükleyip bırakın.
Year Picker elementinde YearPicker > Properties > Placeholder > “Yıl Seçiniz” alanına yazısını ekleyin.
Yıl seçiminden sonra listenin getirilmesi için Year Picker elementi seçiliyken aksiyon ekleyin. YearPicker > Add Action > onChange > Custom > Managed DB > GetYearlyExpensesByDate aksiyonunu ekleyin.
Aksiyonda tarih parametresine GetYearlyExpensesByDate > Components > YearPicker > value > To String tanımlamasını yapın.
Aksiyonu doğrudan hazır tablo olarak kullanmak için sol yan paneldeki ActionTree alanına ilerleyin ve içerisindeki GetYearlyExpensesByDate aksiyonunun yakındaki mavi ikondan sayfaya sürükleyin.
Açılan ekranda Table ve Outputs alan seçimlerini yapın ve Oluştur’a basın.
Son durumda ekran içeriğinin aşağıdaki gibi olması beklenir.
Preview:
Uygulama ilk açıldığında, üst bölümde yer alan yıl seçici alanı boş olarak görüntülenir ve kullanıcıdan harcama dönemi seçmesi beklenir. Bu durumda tabloda yalnızca alan adlarını temsil eden örnek değerler gösterilerek veri bekleme durumu ifade edilir.
Kullanıcı bir yıl seçtiğinde, seçilen yıla ait harcama türü, tutar ve harcama tarihi bilgileri tablo üzerinde otomatik olarak listelenir. Böylece kullanıcı, ilgili yıla ait tüm giderlerini tek ekranda düzenli ve anlaşılır bir şekilde görüntüleyebilir.
4. Ortak Özellikler (Properties)
Year Picker elementi üzerinde yer alan bazı alanlar tüm UI elementlerinde ortak olarak kullanılır. Bu nedenle, aşağıdaki özelliklerin detaylı açıklamaları ilgili genel kılavuz sayfalarında yer almaktadır:
Min Year ve Max Year aralıklarını mantıklı şekilde tanımlayın. Kullanıcının seçemeyeceği yılları gizleyerek daha kontrollü bir seçim deneyimi oluşturabilirsiniz. (Örn. Finansal rapor uygulamalarında 2000–2030 aralığı)
Seçilen yılı onChange ile işleyerek filtrelemeleri otomatikleştirin. Kullanıcının ekstra butona basmasına gerek kalmadan liste, tablo, grafik veya raporları güncelleyebilirsiniz.
Placeholder metnini açıklayıcı kullanın. "Yıl Seçin" yerine "Rapor Yılı" gibi bağlama uygun bir ifade UX’i geliştirir.
6. Kısıtlamalar
Sadece yıl seçimi yapılabilir; ay veya gün bilgisi alınamaz. Daha detaylı zaman seçimi gerekiyorsa Date, Date Time veya Date Range kullanılmalıdır.
Sadece onChange aksiyonunu destekler.
Min Year / Max Year değerleri yanlış ayarlandığında seçim tamamen engellenebilir. Aralık örtüşmediğinde kullanıcı herhangi bir yıl seçemez.
