1. Pagination Elementine Genel Bakış

Pagination elementi, büyük veri setlerinin kullanıcıya tek bir ekranda yüklenmesi yerine sayfalara bölünerek sunulmasını sağlar. Bu yaklaşım, hem performansı artırır hem de kullanıcıların veriler arasında daha rahat gezinmesini mümkün kılar. Kullanıcılar sayfa numaraları, ileri–geri kontrolleri veya belirli bir sayfaya doğrudan geçiş seçenekleri sayesinde veri setinin farklı bölümlerine kolayca erişebilir.

Pagination elementi, web ve mobil uygulamalarda desteklenmektedir.

1.1. Sık Kullanım Senaryoları

• Uzun veri listelerinin sayfalara bölünmesi. Örneğin: kullanıcı listeleri, sipariş kayıtları. 
• Table elementi ile birlikte kullanılarak tablo performansının artırılması. Büyük veri setlerinde tek seferde tüm kayıtların yüklenmesi yerine sayfa bazlı gösterim sağlanır. 
• Arama sonuçlarının sayfalı olarak gösterilmesi. Kullanıcı arama yaptıkça sonuçlar belirli sayfa boyutlarında sunulur.
• Raporlama ekranları. Finansal raporlar, işlem geçmişi veya analiz tablolarında veri yoğunluğunu azaltmak için kullanılır.
• Galeri veya kart bazlı listeleme senaryoları. Ürün katalogları, içerik listeleri veya medya galerilerinde sayfa geçişleri sağlanır.
• Mobil uygulamalarda daha akıcı gezinme. Küçük ekranlarda uzun listelerin bölünerek gösterilmesi kullanıcı deneyimini iyileştirir.

2. Temel Özellikler

• Sayfa bazlı gezinme desteği. Kullanıcılar ileri–geri butonları, sayfa numaraları veya doğrudan sayfa seçimi ile veri seti içinde kolayca hareket edebilir.
• Veri tekrarlayıcı elementlerle uyumlu çalışma. Table, Gallery View gibi elementlerle birlikte kullanılarak veri gösterimi daha düzenli hale getirilir.
• Sayfa boyutu kontrolü. Her sayfada kaç kayıt gösterileceği yapılandırılarak kullanıcıya daha okunabilir bir içerik sunulabilir.
• Dinamik veri kaynaklarıyla kullanım. Pagination, SQL, REST API veya Managed DB üzerinden gelen verilerle birlikte çalışarak dinamik veri setlerini destekler.
• Kullanıcı etkileşimine dayalı veri yenileme. Sayfa değiştiğinde ilgili veri aralığı yeniden çağrılarak yalnızca gerekli kayıtlar yüklenir.
• Performans ve kullanıcı deneyimi iyileştirmesi. Özellikle büyük listelerde, hem yükleme süresi kısalır hem de arayüz daha akıcı çalışır.
• Web ve mobil uyumluluk. Pagination yapısı farklı ekran boyutlarına uyum sağlayarak tutarlı bir gezinme deneyimi sunar. 

2.1. Pagination Elementi Özellikleri

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

Pagination elementi, tabloya bağlı kayıt sayısı 10'dan fazla olduğunda otomatik olarak görünür.

• Total: Toplam içerik sayısını belirler. Statik bir değer girilebilir. Sayfa başına gösterilecek içerik sayısına göre toplam sayfa sayısı değişiklik gösterir.
• Page Size: Her sayfada gösterilecek içerik sayısını statik veya dinamik olarak ayarlayabilirsiniz.
• Current: Ekran açıldığında varsayılan olarak gösterilecek sayfa numarasını belirler.
• Show Less Items: Sayfa numaratörlerinde daha az sayının görüntülenmesini sağlar.
• Show Quick Jumper: Kullanıcıların doğrudan bir sayfa numarası girerek hızlı geçiş yapabilmesini sağlar.
• Show Size Changer: Kullanıcıların sayfa başına görüntülemek istedikleri içerik sayısını değiştirebilmelerini sağlar.
• Size Changer Options: Sayfa başına görüntülenecek kayıt sayısı seçeneklerini belirler. Örneğin, 10, 20 veya 100 kayıt gibi.
• Selected Border Color: Seçili sayfa numarasının çerçeve rengini belirler.
• Show First Page Button: Kullanıcının bulunduğu sayfadan bağımsız olarak, ilk sayfaya geçmesini sağlayan butonu görünür hale getirir.
• Show Last Page Button: Kullanıcının bulunduğu sayfadan bağımsız olarak, son sayfaya geçmesini sağlayan butonu görünür hale getirir.
• Show Numbers: Sayfa numaralarını gizler. Bu durumda sadece ileri/geri butonları görüntülenir.
• Show Text: İleri ve geri butonlarındaki metinlerin görüntülenmesini sağlar.

2.2. Pagination Elementine Eklenebilen Aksiyonlar (onChange)

Pagination elementi, kullanıcı etkileşimine bağlı olarak onChange tetikleyicisini destekler. Kullanıcı sayfa numarasını değiştirdiğinde veya ileri–geri navigasyon yaptığında bu aksiyon otomatik olarak çalışır.

onChange tetikleyicisinin kullanım amacı ve davranışı:

• Kullanıcı farklı bir sayfaya geçtiğinde tetiklenir.
• Seçilen yeni sayfa bilgisi (current page, page size vb.) aksiyonlara parametre olarak iletilebilir.
• Sayfa değişimine bağlı olarak veri kaynağının yeniden çağrılmasını sağlar.
• Büyük veri setlerinde yalnızca ilgili sayfanın verilerinin yüklenmesine olanak tanır.
• Table, Gallery View gibi veri tekrarlayıcı elementlerin içeriğini senkron şekilde günceller.
• Filtreleme veya sıralama ile birlikte kullanıldığında, aktif filtre ve sıralama koşullarına göre yeni sayfa verileri getirilir.

Örnek kullanım senaryoları:

• Kullanıcı 2. sayfaya geçtiğinde SQL veya REST API aksiyonunun yeniden çalıştırılması
• Pagination ile bağlı bir tablonun veya galeri görünümünün otomatik yenilenmesi
• Mobil ve web arayüzlerinde aynı sayfalama davranışının korunması

Pagination elementi, doğrudan veri göstermeyen bir kontrol elementi olduğu için yalnızca onChange üzerinden aksiyon tetikler; farklı bir event (onClick vb.) desteklemez.

3. Pagination Elementi Nasıl Kullanılır? 

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

Senaryo: Master Screen Menü Yapısı (Yan Menü – Hiyerarşik Navigasyon)

Bir iş yönetimi veya muhasebe uygulamasında, yüksek hacimli sipariş verilerinin kullanıcıya düzenli ve performanslı şekilde sunulabilmesi için Sipariş Listesi ekranında sayfalama (pagination) yapısı kullanılır. Bu yapı, kullanıcıların veriler arasında kolayca gezinmesini ve aradıkları kayda hızlıca ulaşmasını sağlar.

Senaryoda:

• Siparişler, sipariş tarihine göre en güncel kayıt en üstte olacak şekilde Tabloda listelenir.
• Ekranda aynı anda sınırlı sayıda kayıt gösterilir ve her sayfa belirli sayıda siparişi içerir.
• Kullanıcı, sayfa numaraları veya ileri–geri okları aracılığıyla sayfalar arasında geçiş yapabilir.
• Sayfa başına gösterilecek kayıt sayısı kullanıcı tarafından seçilebilir.
• “Go to page” alanı ile istenilen sayfaya doğrudan geçiş yapılabilir.

Adım 1 - Veri Kaynağı Oluşturma

DataSources modülünde tablo oluşturma: 

• Datasources modülüne gidin. 
• Ardından Tables sekmesine gidin.
• “Orders” adında yeni tablo oluşturun.
• Kurulması gereken tablo yapısı aşağıdaki gibidir:
  

• Önemli Alan adları:
  
  • CustomerName: Siparişi veren müşterinin adını tutar.
  • OrderDate: Siparişin oluşturulduğu tarih ve saati ifade eder.
  • OrderNumber: Siparişe ait takip numarasını belirtir.
  • Status: Siparişin mevcut durum bilgisini gösterir.
  • TotalAmount: Siparişin toplam tutarını ifade eder.
  • SalseRevenue: İlgili kategorinin toplam satış gelirini (ciro) belirtir.

Adım 2 - Gerekli Aksiyonların Tanımlanması

Arayüzde verileri göstermek ve veri eklemek için: 

• Üç Custom aksiyon tanımlamanız gerekir.
• Datasources modülü içerisinde Actions > New SQL Action sekmesinden yeni aksiyon ekleyin.

• Verileri Sayfalara Ayıran Aksiyon (GetPagedOrders):

SELECT *
FROM Orders
ORDER BY OrderDate DESC
OFFSET (@CurrentPage - 1) * @PageSize ROWS
FETCH NEXT @PageSize ROWS ONLY;

Uygularken Orders kısmını silip tekrar Orders yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.

• Toplam Veri Sayısını Getiren Aksiyon (GetTotalOrders):

SELECT COUNT(*) AS Total
FROM Orders;

Uygularken Orders kısmını silip tekrar Orders yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.

• Örnek Verileri Ekleyen Aksiyon (InsertOrders): Uygulamayı örnek verilerle test etmek için aşağıdaki SQL aksiyonunu ekleyin ve TEST butonuna basın.

INSERT INTO Orders
(Id, CustomerName, OrderDate, OrderNumber, Status, TotalAmount)
VALUES
(NEWID(), 'Ahmet Yılmaz',  '2025-12-02T09:15:00+03:00', 1001, 'Pending',   1250.50),
(NEWID(), 'Mehmet Kaya',   '2025-12-05T14:40:00+03:00', 1002, 'Completed',  980.00),
(NEWID(), 'Ayşe Demir',    '2025-12-08T11:05:00+03:00', 1003, 'Cancelled',  430.75),
(NEWID(), 'Fatma Çelik',   '2025-12-12T16:20:00+03:00', 1004, 'Completed', 2100.00),
(NEWID(), 'Ali Şahin',     '2025-12-15T10:30:00+03:00', 1005, 'Pending',    650.30),

(NEWID(), 'Zeynep Arslan', '2025-12-18T13:50:00+03:00', 1006, 'Completed', 1780.90),
(NEWID(), 'Emre Koç',      '2025-12-22T09:45:00+03:00', 1007, 'Pending',    320.00),
(NEWID(), 'Elif Aydın',    '2025-12-26T15:10:00+03:00', 1008, 'Completed',  890.40),
(NEWID(), 'Murat Yıldız',  '2025-12-29T12:25:00+03:00', 1009, 'Cancelled',  150.00),
(NEWID(), 'Selin Öztürk',  '2026-01-03T17:05:00+03:00', 1010, 'Completed', 2400.00),

(NEWID(), 'Hakan Güneş',   '2026-01-06T10:15:00+03:00', 1011, 'Pending',    730.25),
(NEWID(), 'Buse Karaca',   '2026-01-08T14:55:00+03:00', 1012, 'Completed', 1120.80),
(NEWID(), 'Onur Aksoy',    '2026-01-10T11:35:00+03:00', 1013, 'Pending',    540.00),
(NEWID(), 'Derya Polat',   '2026-01-12T16:45:00+03:00', 1014, 'Completed', 1890.60),
(NEWID(), 'Serkan Can',    '2026-01-14T09:20:00+03:00', 1015, 'Cancelled',  300.00),

(NEWID(), 'Ece Korkmaz',   '2026-01-16T13:10:00+03:00', 1016, 'Completed',  950.00),
(NEWID(), 'Burak Tunç',    '2026-01-17T15:30:00+03:00', 1017, 'Pending',    410.45),
(NEWID(), 'Ceren Şimşek',  '2026-01-18T10:05:00+03:00', 1018, 'Completed', 2750.00),
(NEWID(), 'Okan Erdem',    '2026-01-19T12:40:00+03:00', 1019, 'Pending',    620.00),
(NEWID(), 'Pınar Balcı',   '2026-01-20T18:15:00+03:00', 1020, 'Completed', 1340.90);

Uygularken Orders kısmını silip tekrar Orders 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 Ayarlamaları

• UI Design modülünü açın.
• Sayfaya Elements > Display > Label elementini sürükleyip bırakın.
• Label elementi yazısını Label > Properties > “Order List” olarak güncelleyin.
• Label yazı stilini Label > Styling > Text > Style > Heading 1 olarak ayarlayın.
  

• Sayfaya pageinit action Add Action > Initial Action > Custom > Managed DB > GetTotalOrders pageInit aksiyonunu ekleyin.

• Sayfaya Add Action > Initial Action > Custom > Managed DB > GetPagedOrders pageInit aksiyonunu ekleyin.
  

• Sol yan panelde yer alan Action Tree alanına ilerleyin ve GetPagedOrders aksiyonunu yanında bulunan mavi ikondan sürükleyip sayfaya bırakın.
  

• Açılan ekranda aşağıdaki seçimleri yapın.
  

• Sol yan panelden Elements alanına geri dönün ve sayfaya Elements > Interactive > Pagination elementini sürükleyip bırakın.
  

•  Pagination konumunu Pagination > Styling > Layout > Align > Dikeyde Ortala ve Sağa Hizala şeklinde ayarlayın.
  

•  Pagination içerisinde toplam sayfa sayısını Pagination > Properties > Total > Action Result > GetTotalOrders > First > Total olarak tanımlayın.
  

•  Sayfa sayısını Pagination > Properties > PageSize > 5 olarak ayarlayın.
  

•  Başlangıç sayfasını Pagination > Properties > Current > 1 olarak ayarlayın.
  

•  Daha az sayfa numarası gösterimi için Pagination > Properties > ShowLessItems > Açık olarak ayarlayın.
  

•  Sayfa numarasına doğrudan geçiş yapabilmek için Pagination > Properties > ShowQuickJumper > Açık olarak ayarlayın.
  

•  Sayfadaki veri sayısını seçebilmek için Pagination > Properties > ShowSizeChanger > Açık olarak ayarlayın.
  

• Veri sayısını seçebilmek için Pagination > Properties > ShowSizeOptions > Action > Fixed Option List tanımlamasını yapın. İsteğe bağlı olarak sayfa sayısını aksiyonla dinamik şekilde de sağlayabilirsiniz.
  

•  Sabit değerleri sağlamak için Fixed Data alanında aşağıdaki tanımlamayı yapın.
•  İlk sayfaya hızlı dönüş için Pagination > Properties > ShowFirstPageButton > Açık olarak ayarlayın.
  

•  Son sayfaya hızlı dönüş için Pagination > Properties > ShowLastPageButton > Açık olarak ayarlayın.
  

•  Sayfa ayarlarına ulaşmak için alt kısımda yer breadcrumb üzerinden sayfa adına tıklayın. Mevcut senaryoda isim PaginationScreen olarak kullanılmıştır.
  

•  Properties kısmında aksiyonlar alanında eklediğimiz GetPagedOrders aksiyonunda CurrentPage ve PageSize alanlarını Pagination Elementi üzerinden tanımlayın.
  
•  CurrentPage alanına  Components > Pagination > current tanımlamasını yapın.
  

• PageSize alanına  Components > Pagination > current tanımlamasını yapın.
  

•  Pagination elementine tıklayın. Pagination elementine Add Action > onChange > Custom > Managed DB > GetTotalOrders aksiyonunu ekleyin.
  

•  Benzer şekilde arkasından Add Action > onChange > Custom > Managed DB > GetPagedOrders aksiyonunu ekleyin.
  

• GetPagedOrders içerisine Adım 3.23 ve 3.24’teki gibi CurrentPage > Components > Pagination > current ve PageSize > Components > Pagination > current tanımlamalarını yapın.

Preview

Uygulama test edildiğinde, Order List ekranı, sipariş kayıtlarının tarih bazlı olarak listelendiği ve sayfalama (pagination) ile yönetildiği bir listeleme yapısı sunar. Siparişler en güncel kayıt en üstte olacak şekilde sıralanır ve ekranda belirlenen kayıt sayısı kadar veri gösterilir.

Kullanıcı, alt alanda yer alan sayfa numaraları ve ileri–geri okları ile sayfalar arasında geçiş yapabilir. Sayfa başına gösterilecek kayıt sayısı “per page” seçeneği üzerinden değiştirilebilir ve “Go to page” alanı ile istenilen sayfaya doğrudan erişim sağlanır. Bu yapı sayesinde uzun sipariş listeleri düzenli, okunabilir ve kullanıcı dostu bir şekilde görüntülenir.

4. Ortak Özellikler (Properties)

Pagination 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)

• Pagination elementini mutlaka veri tekrarlayıcı elementlerle (Table, Gallery View vb.) birlikte kullanın. Tek başına veri göstermez, yalnızca sayfalama kontrolü sağlar.
• Mobil ekranlarda çok fazla sayfa numarası göstermek yerine, sade bir sayfalama yapısı tercih edin.

6. Kısıtlamalar

• Pagination elementi tek başına veri göstermez; mutlaka bir veri kaynağına bağlı liste, tablo veya grid ile birlikte kullanılmalıdır.
• onChange dışında başka bir tetikleyici (onClick, onInit vb.) desteklemez.
• Veri kaynağı aksiyonu onChange ile yeniden çağrılmazsa, sayfa numarası değişse bile içerik güncellenmez.
• Pagination, yalnızca sayfa kontrolünü yönetir; filtreleme, sıralama veya veri doğrulama işlemlerini kendi başına yapmaz.