Report Table, Report Designer içerisinde dinamik veri kaynaklarından gelen bilgileri tablo formatında göstermek için kullanılan bir elementtir. Bağlı olduğu datasource üzerinden gelen veriye göre satır sayısı otomatik olarak oluşturulur ve veri değiştikçe tablo içeriği de dinamik olarak güncellenir.

Report Table, veri odaklı raporlar için tasarlanmıştır ve özellikle listeleme, özetleme ve raporlama senaryolarında kullanılır.

Report Table; işlem listeleri, fatura dökümleri, kullanıcı kayıtları, sipariş listeleri ve tarih bazlı raporlar gibi senaryolar için uygundur.

Ne Zaman Report Table Kullanılmalıdır?

Report Table aşağıdaki durumlarda tercih edilir:

• Tablo içeriği dinamik olarak değişecekse
• Veri bir SQL sorgusu, servis veya process çıktısından geliyorsa
• Satır sayısı önceden sabit değilse
• PDF veya baskı çıktısında listeleme yapılacaksa
• Manuel hücre birleştirme gerekmiyorsa

Dinamik veri listeleri için Report Table, sabit ve tasarım kontrollü tablolar için Static Table kullanılması önerilir.

Report Table Ekleme

1. Elements Paneli’nden Report Table elementini seçin.
2. Elementi sürükleyerek Canvas üzerine bırakın.
3. Report Table, seçildiğinde varsayılan tablo yapısıyla Canvas üzerinde görüntülenir.

Report Table Kullanım Ön Koşulları

Report Table’ın doğru şekilde çalışabilmesi ve çıktı alınabilmesi için aşağıdaki aksiyonların sırasıyla UI Designer modülüne eklenmesi gerekir:

1. Get Report Base64 aksiyonu eklenmelidir. Raporun veri ve tasarım bilgisinin Base64 formatında üretilmesini sağlar.
2. Ardından rapor çıktısı almak için aşağıdaki aksiyonlardan biri eklenmelidir:
   
   • Print PDF
   • Download PDF

Bu aksiyonlar tanımlanmadığı sürece Report Table:

• PDF çıktısında görüntülenmez,
• Baskı veya indirme senaryolarında çalışmaz.

Report Table Properties Paneli

Report Table’a ait tüm ayarlar Properties Paneli üzerinden yönetilir. Bu panel, tabloya ait genel ayarları, header özelliklerini ve kolon bazlı yapılandırmaları içerir.

Datasources

Report Table’ın hangi veri kaynağından besleneceğini belirler.

• Report Table, yalnızca bir datasource tanımlandığında veri ile render edilir.
• SQL sorguları, servis çıktıları veya process sonuçları datasource olarak kullanılabilir.
• Datasource seçildiğinde tablo satırları, gelen veri setine göre otomatik olarak oluşturulur.

Show Header

Tablo başlık satırının gösterilip gösterilmeyeceğini belirler.

• On: Kolon başlıkları görüntülenir.
• Off: Sadece veri satırları gösterilir.
  

Report Table Header Özellikleri

Report Table Header, tablonun en üst kısmında yer alan başlık alanını ifade eder. Bu ayarlar yalnızca Show Header aktifken uygulanır.

Writing Mode

Kolon başlıklarının yazım yönünü belirler.

Desteklenen modlar:

• Horizontal: Metin soldan sağa yazılır.
• Vertical: Metin dikey olarak gösterilir.

Dar kolonlarda başlıkların daha rahat okunabilmesi için kullanılabilir.

Column Titles

Her kolona ait başlık metninin tanımlandığı alandır.

• Başlıklar manuel olarak belirlenebilir.
• Datasource alan adlarından bağımsızdır.
• Kullanıcı dostu ve anlamlı başlıklar oluşturulmasını sağlar.

Report Table Column Properties Paneli

Report Table’da bir kolon seçildiğinde, o kolona ait ayarlar Properties Paneli üzerinden yönetilir. Kolonun yerleşim ve görsel davranışı bu ayarlar ile kontrol edilir.

Title

Seçili kolona ait başlık metnini belirler.

• Show Header açıkken görüntülenir.
• Datasource alan isminden bağımsız olarak düzenlenebilir.

Elements Direction

Bir kolon içerisine eklenen birden fazla elementin yerleşim yönünü belirler.

Desteklenen yönler:

• Horizontal: Elementler yan yana yerleştirilir.
• Vertical: Elementler alt alta yerleştirilir.

Bir kolonda birden fazla Label kullanıldığında veya başlık–değer yapıları oluşturulmak istendiğinde kullanılır.

Elements Gap

Elements Gap, kolon içerisindeki elementler arasındaki boşluğu kontrol eder.

• Horizontal yerleşimde yatay boşluk,
• Vertical yerleşimde dikey boşluk olarak uygulanır.

Yoğun veri içeren tablolarda okunabilirliği artırmak için kullanılır.

Görsel Düzenleme (Styling)

Report Table için görsel düzenlemeler Styling Paneli üzerinden yapılır.

• Fill Color: Tablo veya kolon arka plan rengi ayarlanabilir.
• Border: Tablo kenarlıkları aktif edilebilir, renk ve kalınlık düzenlenebilir.

Report Table Kullanım Senaryosu

Bir raporlama veya muhasebe uygulamasında, kullanıcıların oluşturulan faturaları dinamik veriyle güncellenen bir rapor üzerinden takip edebilmesi için tablo tabanlı bir fatura listesi kullanılır. Bu liste, veritabanından gelen fatura kayıtlarını tek bir rapor sayfasında düzenli ve okunabilir bir biçimde sunarak kullanıcının fatura durumunu hızlıca analiz etmesini sağlar.

Fatura listesinde; fatura numarası, fatura tarihi, alıcı firma bilgisi, fatura durumu, tutar ve para birimi gibi kritik alanlar sütunlar halinde gösterilir. Her satır, sistemde yer alan tek bir faturayı temsil edecek şekilde yapılandırılmıştır. Tablo içeriği, bağlı olunan veri kaynağından gelen kayıt sayısına göre otomatik olarak oluşturulur ve yeni faturalar eklendikçe rapor içeriği güncellenir.

Kullanıcı, rapor çıktısı üzerinden faturaları yukarıdan aşağıya doğru inceleyebilir. Fatura durumu alanı sayesinde “Paid” ve “Overdue” gibi durumlar net bir şekilde ayırt edilebilir ve hangi faturaların gecikmiş olduğu hızlıca analiz edilebilir. Tablo yapısı, veriye bağlı olarak genişleyebildiği için manuel bir düzenleme gerektirmez.

Report Table, PDF veya indirme çıktısı alındığında tablo yapısını ve veri düzenini koruyarak raporu oluşturur. Bu sayede kullanıcı, ekranda gördüğü fatura listesini aynı düzenle dışa aktarabilir ve raporlama veya paylaşım amacıyla kullanabilir.

Senaryoda:

• Fatura listesi Report Table elementi kullanılarak rapor içerisinde oluşturulur.
• Tablo içeriği, bir SQL sorgusu veya veri kaynağından gelen dinamik verilerle beslenir.
• Her satır, tek bir faturayı temsil eder.
• Fatura numarası, tarih, alıcı firma, durum, tutar ve para birimi bilgileri sütunlar halinde gösterilir.
• Fatura durumu alanı, ödenmiş ve gecikmiş faturaların kolayca ayırt edilmesini sağlar.
• Satır sayısı sabit değildir ve veri miktarına göre otomatik olarak değişir.
• Rapor çıktısı alındığında tablo, mevcut düzeni korunarak PDF veya dosya formatında oluşturulur.

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

DataSources modülünde tablo oluşturma: 

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

• Önemli Alan adları:
  
  • InvoiceNo: Faturanın benzersiz numarasını ifade eder. Liste ve tablo görünümlerinde kullanıcıya gösterilen ana referans bilgisidir ve faturanın hızlıca ayırt edilmesini sağlar.
  • InvoiceDate: Faturanın oluşturulduğu veya kesildiği tarih bilgisini tutar. Kullanıcı, faturaları tarih bazlı sıralamak ve dönemsel karşılaştırma yapmak için bu alanı kullanır.
  • RecipientName: Faturanın düzenlendiği alıcı firma veya müşteri adını belirtir. Fatura listesinde kimin adına kesildiğini net bir şekilde gösterir.
  • RecipientLogoUrl: Alıcı firmaya ait logo veya temsil görselinin URL bilgisini içerir. Liste satırlarında görsel destek sağlayarak faturaların daha kolay ayırt edilmesini sağlar.
  • Status: Faturanın güncel durumunu ifade eder (ör. Paid, Overdue, Draft). Kullanıcının ödeme durumunu hızlıca analiz etmesine yardımcı olan bilgilendirici bir alandır.
  • Amount: Faturaya ait toplam tutarı belirtir. Kullanıcıya sayısal ve karşılaştırılabilir bir değer sunarak finansal durumu değerlendirmesini sağlar.
  • Currency: Fatura tutarının hangi para birimiyle oluşturulduğunu ifade eder (ör. TRY, USD, EUR). Çoklu para birimi kullanılan senaryolarda tutarların doğru yorumlanmasını sağlar.

Adım 2 - Gerekli Aksiyonları Tanımlama

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

1. İki aksiyon tanımlamanız gerekir.
2. Datasources modülü içerisinde Actions > New SQL Action sekmesinden yeni aksiyon ekleyin.

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

INSERT INTO Invoices
(
    Id,
    InvoiceNo,
    InvoiceDate,
    RecipientName,
    RecipientLogoUrl,
    Status,
    Amount,
    Currency
)
VALUES
(
    NEWID(),
    'AXZ-177',
    CAST('2022-06-07' AS DATETIMEOFFSET),
    'Figma Inc.',
    'https://simpleicons.org/icons/figma.svg',
    'Paid',
    351.02,
    'USD'
),
(
    NEWID(),
    'AXZ-922',
    CAST('2022-06-05' AS DATETIMEOFFSET),
    'Dribbble',
    'https://simpleicons.org/icons/dribbble.svg',
    'Overdue',
    710.68,
    'USD'
),
(
    NEWID(),
    'AXZ-703',
    CAST('2022-06-04' AS DATETIMEOFFSET),
    'Youtube',
    'https://simpleicons.org/icons/youtube.svg',
    'Paid',
    778.35,
    'USD'
),
(
    NEWID(),
    'AXZ-883',
    CAST('2022-06-02' AS DATETIMEOFFSET),
    'Spotify',
    'https://simpleicons.org/icons/spotify.svg',
    'Overdue',
    490.51,
    'USD'
),
(
    NEWID(),
    'AXZ-798',
    CAST('2022-06-02' AS DATETIMEOFFSET),
    'Discord',
    'https://simpleicons.org/icons/discord.svg',
    'Paid',
    275.43,
    'USD'
),
(
    NEWID(),
    'AXZ-154',
    CAST('2022-06-01' AS DATETIMEOFFSET),
    'Github',
    'https://simpleicons.org/icons/github.svg',
    'Paid',
    105.55,
    'USD'
);

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

• Verileri Sağlayan Aksiyon (GetInvoices):

SELECT * FROM Invoices;

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

Adım 3 – Report Designer Ön Koşullarını Tanımlama

Report Table kullanabilmek için aşağıdaki aksiyon eklenmelidir:

Başlangıçta anasayfada: 

• Report Designer modülünü açın.
• Sayfada Add Action > Initial Action > Custom > GetInvoices aksiyonunu ekleyin.

Adım 4 – Report Table Elementini Ekleme ve Stil Düzenleme

• Report Designer modülünü açın.
• Sol panelden Elements > Data > Report Table elementini sayfaya sürükleyip bırakın.
• Rapor sayfa boyutunu A4 olarak ayarlayın.
• Styling > Fill alanından arka plan rengini White olarak ayarlayın.
• Styling > Border alanından tablo Border’ını aktif edin.

Adım 5 – Report Table Ayarlarının Yapılandırılması

• Report Table seçiliyken veri kaynağını:
  
  • Report Table > Properties > Datasource > GetInvoices
    olarak ayarlayın.
• Başlık satırını göstermek için:
  
  • Show Header alanını açık hale getirin.
• Kolon başlıklarını kullanıcı dostu yapmak için:
  
  • Report Table Header > Column Titles alanından kolon adlarını düzenleyin:
    
    • No
    • Date
    • Recipient
    • Status
    • Amount
    • Currency
• Başlık görünümü için:
  
  • Report Table Header > Writing Mode alanını Horizontal (gerekiyorsa Vertical) olarak ayarlayın.

Adım 6 – Kolon İçeriklerinin Düzenlenmesi (Elements Direction / Gap)

• Bir kolonda birden fazla bilgi göstermek isterseniz:
  
  • Recipient kolonuna iki Label ekleyin.
• Kolon seçiliyken:
  
  • Report Table Column > Elements Direction: Vertical
  • Report Table Column > Elements Gap: 8 px
    olarak ayarlayın.

Bu sayede tutar ve para birimi alt alta, daha okunabilir şekilde gösterilir.

Adım 7- UI Design İşlemleri

• Tabloyu indirmek ya da yazdırmak için UI Design modülüne gidin.
• Button elementi ekleyin. 
• Ardından Button elementine Properties> Add Action> OnClick > Device > Get Report Base64 aksiyonunu ekleyin.
• Daha sonra aynı şekilde Properties> Add Action> OnClick > Device > Print PDF aksiyonunu ekleyin. 
• Report Designer modülüne dönün.
• Sağ üst köşedeki Preview butonuna tıklayın. 

Preview

Uygulama test edildiğinde, faturaların Report Table içerisinde satır bazlı olarak listelendiği bir Fatura Listesi Raporu görüntülenir. Her satırda sırasıyla fatura numarası, fatura tarihi, alıcı firma adı, fatura durumu, tutar ve para birimi bilgileri düzenli ve okunabilir biçimde sunulur.

PDF çıktısı alındığında tablo yapısı korunur ve ekranda görüntülenen fatura listesi aynı düzenle rapor çıktısına yansır. “Paid” ve “Overdue” durumları tek bakışta ayırt edilebilir; kullanıcı faturalar arasında hızlı karşılaştırma yapabilir.