1. Month Picker Elementine Genel Bakış

Month Picker elementi, kullanıcıların yalnızca ay seçmesine olanak sağlayan bir tarih elementidir. Yıl–ay formatında çalışan bu element, ay bazlı seçim gerektiren tüm uygulamalarda hızlı, hatasız ve kullanıcı dostu bir deneyim sunar.

Kullanıcı ay bilgisini ister manuel olarak girebilir ister ay seçici (month selector) üzerinden kolayca belirleyebilir. Yalnızca ay seçimini desteklediği için, tarih aralığı veya gün seçimi gerektirmeyen durumlarda form ve filtre alanlarını sadeleştirir.

Ay bazlı analiz, raporlama, fatura dönemleri, performans takibi, bütçe planlaması gibi senaryolarda özellikle tercih edilir. Kullanıcının geçerli bir ay seçmesini sağlayarak hatalı girişlerin önüne geçer ve uygulamada tarih uyumluluğunu artırır.

Month Picker elementi yalnızca web uygulamalarında desteklenmektedir.

1.1. Sık Kullanım Senaryoları

• Aylık raporlama ekranları: Finansal durum, satış performansı, bütçe takibi veya operasyon raporlamasında belirli bir ay seçimi için kullanılır.
• Fatura ve ödeme dönemleri seçimi: Kullanıcıların bir faturanın ait olduğu ayı veya bir ödemenin yapılacağı dönemi belirlemesini sağlar.
• Aylık veri filtreleme: Tablo, grafik veya liste bileşenlerinde sadece seçilen aya ait verilerin gösterilmesi için uygun bir seçim alanı oluşturur.
• Aylık rezervasyon veya planlama ekranları: Personel vardiya planlaması, araç kullanım takvimi, sınıf programı gibi yalnızca ay bazlı planlama gerektiren senaryolarda kullanılır.
• Aylık hedef ve performans takibi: Satış hedefleri, üretim miktarları veya aylık KPI değerlendirmelerinde kullanıcıya kolay seçim imkânı sunar.

2. Temel Özellikler

• Manuel giriş veya ay seçici ile kullanım: Kullanıcılar ay bilgisini doğrudan yazabilir veya açılır ay seçiciden hızlıca seçim yapabilir.
• Format özelleştirme desteği: Ayın görüntülenme formatı (MM/YYYY, YYYY-MM gibi) uygulamanın ihtiyacına göre ayarlanabilir.
• Clear desteği: Allow Clear özelliği ile kullanıcı seçimini tek tıklamayla temizleyebilir.
• Değişim tetikleme desteği: onChange tetikleyicisi sayesinde kullanıcı ayı değiştirdiğinde ilgili listeler, grafikler veya sorgular otomatik güncellenebilir.

2.1. Month Picker Elementi Özellikleri

Month Picker elementinin özelliklerini, sağ kenardaki Properties panelinden yapılandırabilirsiniz.

• Value: Statik bir ay değeri belirleyebilir veya Symbol Picker kullanarak dinamik değerler atayabilirsiniz.
• Placeholder: Kullanıcı bir seçim yapmadığında görüntülenen yer tutucu metni belirler. Örneğin, "Ay Seçin".
• Allow Clear: Kullanıcının seçtiği ayı tek bir tıklama ile temizlemesine olanak tanır. Sağ köşede beliren Delete (X) ikonu ile giriş sıfırlanabilir.
• Disable Before Date: Kullanıcının belirli bir aydan önceki ayları seçmesini engeller. Statik bir ay belirleyebilir veya Symbol Picker ile dinamik bir değer kullanabilirsiniz.

2.2. Elemente Eklenebilen Aksiyonlar

Month Picker elementi, kullanıcı bir ay seçtiğinde veya mevcut seçimi değiştirdiğinde aksiyon tetikleyebilmenizi sağlar. Bu element için kullanılabilen tek tetikleyici onChange Event’idir.

onChange

Kullanıcı ay seçtiğinde, ayı değiştirdiğinde veya seçimi temizlediğinde tetiklenir. Bu olay sayesinde seçilen ay değerini diğer bileşenlere aktarabilir, veri filtreleme veya sorgu çalıştırma gibi işlemleri otomatik hale getirebilirsiniz.

Sık Kullanım Senaryoları

• Seçilen aya göre tablo veya listeyi filtrelemek
• Seçilen ay bilgisine göre grafik güncellemek
• Raporlama ekranlarında kullanıcı ay seçtiğinde yeni verileri sorgulamak
• Formlarda ay seçimine bağlı alanların görünürlüğünü değiştirmek
• Ay değiştiğinde sayfadaki başka bir aksiyonu tetiklemek 

3. Month Picker Elementi Nasıl Kullanılır? 

Bu bölümde Month Picker elementinin uçtan uca kullanımını örnek senaryolar üzerinden ele alacağız.

Senaryo: Aylık Harcamaları Gösterme

Bir kişisel finans veya gider takip uygulamasında kullanıcılar, belirli bir ay ve yıla ait harcamalarını tek ekranda görüntülemek ister. Month Picker elementi, bu senaryoda hangi aya ait verilerin listeleneceğini seçmek için kullanılır.

Senaryoda:

• Kullanıcı, ay–yıl seçimi yaparak ilgili döneme ait harcamaları filtreleyebilir.
  Seçilen ay için; harcama türü ve tutar bilgileri tablo üzerinde listelenir.
• Month Picker sayesinde tarih seçimi sade ve kontrollü bir şekilde gerçekleştirilir.
• Tek sayfa üzerinde hem tarih 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.
• “MonthlyExpenseRecords” 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. Aylık filtreleme (Monthly 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 (InsertMonthlyExpenseRecords): Uygulamayı örnek verilerle test etmek için aşağıdaki SQL aksiyonunu ekleyin ve TEST butonuna basın.

INSERT INTO MonthlyExpenseRecords (Id, ExpenseDate, HarcamaTuru, Tutar)
-- 2025 EKİM
SELECT NEWID(), CAST('2025-10-02' AS date), N'Kira',      8500 UNION ALL
SELECT NEWID(), CAST('2025-10-05' AS date), N'Market',    3200 UNION ALL
SELECT NEWID(), CAST('2025-10-10' AS date), N'Ulaşım',    1200 UNION ALL
SELECT NEWID(), CAST('2025-10-15' AS date), N'Faturalar', 2100 UNION ALL
SELECT NEWID(), CAST('2025-10-28' AS date), N'Eğlence',   1400 UNION ALL

-- 2025 KASIM
SELECT NEWID(), CAST('2025-11-03' AS date), N'Kira',      8800 UNION ALL
SELECT NEWID(), CAST('2025-11-04' AS date), N'Market',    3400 UNION ALL
SELECT NEWID(), CAST('2025-11-11' AS date), N'Ulaşım',    1350 UNION ALL
SELECT NEWID(), CAST('2025-11-16' AS date), N'Faturalar', 2250 UNION ALL
SELECT NEWID(), CAST('2025-11-29' AS date), N'Eğlence',   1600 UNION ALL

-- 2025 ARALIK
SELECT NEWID(), CAST('2025-12-02' AS date), N'Kira',      9000 UNION ALL
SELECT NEWID(), CAST('2025-12-05' AS date), N'Market',    3700 UNION ALL
SELECT NEWID(), CAST('2025-12-10' AS date), N'Ulaşım',    1500 UNION ALL
SELECT NEWID(), CAST('2025-12-15' AS date), N'Faturalar', 2400 UNION ALL
SELECT NEWID(), CAST('2025-12-28' AS date), N'Eğlence',   1800;

Uygularken MonthlyExpenseRecords kısmını silip tekrar MonthlyExpenseRecords 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 (GetMonthlyExpensesByDate):
  

SELECT *
FROM MonthlyExpenseRecords
WHERE ExpenseDate >= @SelectedDate
  AND ExpenseDate < DATEADD(MONTH, 1, @SelectedDate)
ORDER BY ExpenseDate;

Uygularken MonthlyExpenseRecords kısmını silip tekrar MonthlyExpenseRecords 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 > MonthPicker elementini sürükleyip bırakın.
• Month Picker elementinde MonthPicker > Properties > Placeholder > “Ay Seçiniz” alanına yazısını ekleyin.
  

• Tarih seçimlerinden sonra listenin getirilmesi için Month Picker elementi seçiliyken aksiyon ekleyin. MonthPicker > Add Action > onChange > Custom > Managed DB > GetMonthlyExpensesByDate aksiyonunu ekleyin.
  
  

• Aksiyonda tarih parametresine GetMonthlyExpensesByDate > Components > MonthPicker > value tanımlamasını yapın.
  

• Aksiyonu doğrudan hazır tablo olarak kullanmak için sol yan paneldeki Action Tree alanına ilerleyin ve içerisindeki GetMonthlyExpensesByDate 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 ay 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 ay seçtiğinde, seçilen döneme ait harcama türü, tutar ve harcama tarihi bilgileri tablo üzerinde otomatik olarak listelenir. Böylece kullanıcı, ilgili aya ait tüm giderlerini tek ekranda düzenli ve anlaşılır bir şekilde görüntüleyebilir.

4. Ortak Özellikler (Properties)

Month 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:

• Authorization (Yetkilendirme) Ayarları
• Visibility (Görünürlük)
• Editability (Düzenlenebilirlik)
• Style Panel (Stil Ayarları)

5. Kullanım Tavsiyeleri (Best Practices)

• Ay seçiminde yıl bilgisini de kontrol edin. Month Picker yalnızca ay seçtirir; yıl kontrolü uygulama mantığında ayrıca yapılmalıdır. Örneğin, geçmiş yıllardaki ayların seçilmesini engellemek istiyorsanız validation eklemelisiniz.
• Disable Before Date özelliğini doğru kullanın. Kullanıcının belirli bir tarihten önceki ayları seçmemesi gereken senaryolarda (ör. üyelik başlangıç ayı, kampanya geçerlilik tarihi) bu özellik ile hatalı girişler tamamen önlenir.
• Filtreleme senaryolarında onChange’i etkin kullanın. Ay seçildiğinde tablo, grafik veya liste gibi bileşenleri otomatik güncelleyerek kullanıcı etkileşimini akıcı hale getirin.
• Placeholder metnini açıklayıcı yazın. Özellikle ay bazlı raporlama ekranlarında kullanıcıya hangi aralığı seçmesi gerektiğini net bir şekilde belirtmek deneyimi güçlendirir.
• Temizleme (Allow Clear) özelliğini aktif kullanın. Kullanıcının seçimini tek tıklamayla sıfırlabilmesi özellikle filtreleme ekranlarında büyük kolaylık sağlar.

6. Kısıtlamalar

• Yalnızca web uygulamalarında desteklenir. Month Picker elementi mobil uygulamalarda (iOS / Android) çalışmaz; mobil projelerde alternatif çözümler kullanılmalıdır.
• Yıl seçimi doğrudan yapılamaz. Kullanıcı sadece ay seçebilir; yıl bilgisi ek bir alanla alınmalıdır.
• Disable Before Date özelliği ay bazında çalışır, gün bazında değil. Örneğin 15 Mart’tan önce seçim yapılamaz gibi bir kural doğrudan uygulanamaz; sadece Mart ayı tamamen yasaklanabilir.