1. Panel Elementine Genel Bakış

Panel elementi, kullanıcı arayüzünde içerikleri düzenli bir şekilde gruplandırmak, ayırmak ve belirgin hale getirmek için kullanılan temel bir layout elementidir. Sayfa içinde belirli bir alan oluşturarak kullanıcıların belirli bilgi bloklarına odaklanmasını sağlar. Panel, arka plan rengi, kenarlık, gölge, iç boşluk (padding) gibi görsel düzenlemelerle zenginleştirilebilir ve kart yapıları, bilgi kutuları, form bölümleri, özet alanları veya liste başlıkları gibi pek çok senaryo için kullanılabilir.

Daha düzenli, profesyonel ve okunabilir arayüzler oluşturmak için Panel elementi sayfa tasarımında sıkça kullanılır. İçerisine metinler, ikonlar, butonlar, input alanları, tablolar veya diğer UI elementleri eklenerek işlevsel bileşenler oluşturulabilir.

Panel elementi, web ve mobil uygulamalarda desteklenmektedir.

1.1. Sık Kullanım Senaryoları

• Bilgi kartları oluşturmak. Örneğin: kullanıcı bilgileri, özet istatistikler, uyarı kutuları, profil kartları.
• Form alanlarını bölümlere ayırmak. Büyük formlarda kullanıcı deneyimini artırmak için belirli alanları panel içinde toplamak.
• Sayfa düzeninde belirli bloklar oluşturmak. Dashboard kartları, liste başlık alanları gibi düzenli bloklar için kullanılabilir. 
• İçerik gruplama.  Birbirine bağlı bilgileri tek bir panel altında toplayarak daha okunabilir bir yapı sağlamak.
• Mobil arayüzlerde kompakt bilgi alanları oluşturmak
• Buton, metin ve ikon kombinasyonlarını bir araya getirmek. Örneğin: aksiyon kutuları, hızlı erişim panelleri.

2. Temel Özellikler

• Kapsayıcı (container) bir düzen elementi olarak çalışma. Panel içerisine metin, ikon, buton, input, liste, tablo ve diğer tüm UI elementleri yerleştirilebilir. Tüm bu içerikleri tek bir grupta toplar.
• Görsel stil özelleştirmeleri Arka plan rengi, kenarlık (border), köşe yumuşatma (border radius), gölge (shadow) ve padding gibi görsel ayarlar ile Panel’in görünümü tamamen kişiselleştirilebilir.
• İçerik düzenini okunabilir hale getirme. Panel, sayfa üzerindeki yoğun bilgiyi bölümlere ayırarak kullanıcıların ilgili alana odaklanmasını sağlar.
• Mobil ve web için uyumlu responsive yapı. Panel, tüm ekran boyutlarında tutarlı bir düzen sağlar ve mobil cihazlarda kompakt kart yapıları sunar.
• Grup mantığı ile bilgi blokları oluşturma. Birbirine bağlı bilgileri tek bir Panel altında toplayarak daha düzenli bir hiyerarşi sağlar.

2.1 Element Ayarları (Properties) 

Panel elementini seçtiğinizde, sağ tarafta yer alan Properties paneli üzerinden Panel’in görsel yapısını, davranışını ve dinamik özelliklerini yapılandırabilirsiniz. Aşağıdaki tüm özellikler detaylı olarak açıklanmıştır:

Scrolling (Kaydırma Ayarları)

Panel içeriğinin taşması durumunda nasıl davranacağını belirler.

• Hidden: Panel içeriği taşsa bile kaydırma çubuğu gösterilmez ve taşan içerik gizlenir. Temiz bir görünüm sağlar ancak çok büyük içerikler kesilebilir.
• Vertical: İçerik dikey yönde taşarsa dikey kaydırma çubuğu otomatik olarak görüntülenir. Uzun metin, liste veya form alanlarında kullanılır.
• Horizontal: İçerik yatay yönde taşarsa yatay kaydırma çubuğu gösterilir. Yatay geniş elemanlar veya ikon listeleri için uygundur.
• Auto: Hem yatay hem dikey taşmalarda kaydırma çubukları gerektiği durumda otomatik olarak görünür.

Scroll Back Color / Width / Radius

Kaydırma çubuğu (scrollbar) görünümünü özelleştirmek için kullanılır.

• Scroll Back Color: Scrollbar arka plan rengini belirler. Tema renklerine göre uyumlu görsel yapı sağlar.
• Scroll Back Width: Kaydırma çubuğunun kalınlığını ayarlar. Daha ince (minimal) veya daha geniş (erişilebilirlik odaklı) scrollbar tasarımları yapılabilir.
• Scroll Back Radius: Scrollbar köşe yumuşatma değerini belirler. Yüksek radius değeri daha yuvarlak bir kaydırma çubuğu tasarımı sağlar.

Dynamic Background Color

• Panel’in arka plan renginin veri tablosundan gelen bilgilere göre otomatik değişmesini sağlar.
• Örneğin: Durum = “Approved” ise yeşil, “Pending” ise sarı arka plan gösterilebilir.

Dynamic Font Color

• Panel içindeki metinlerin yazı rengini veri tabanından gelen değerlere göre dinamik olarak ayarlar.
• Örneğin: Kritik uyarılar kırmızı, bilgilendirme mesajları gri olarak gösterilebilir.

Dynamic Background Image

• Panel’in arka planına veri tabanından gelen bir görüntüyü otomatik olarak ekleyebilirsiniz.
• Profil kartları, ürün kartları veya banner alanları için sıklıkla kullanılır.

Hover Background Color

• Kullanıcı Panel üzerine geldiğinde (hover) arka plan renginin değişmesini sağlar.
• Etkileşimli kart yapıları veya liste elemanları için kullanıcı deneyimini iyileştirir.

Hover Font Color

• Panel üzerine gelindiğinde içindeki yazıların rengini değiştirir.
• Özellikle seçenek listeleri, aksiyon kartları veya tıklanabilir alanlar için okunabilirliği artırır.

2.2. Elemente Eklenebilen Aksiyonlar

Panel elementi, düzenleyici bir bileşen olmanın yanında kullanıcı etkileşimlerine göre aksiyon tetikleyebilen bir UI elemanıdır. Panel seçildiğinde sağ tarafta bulunan ADD ACTION butonu üzerinden aşağıdaki tetikleyici kullanılabilir:

onClick

Kullanıcı Panel üzerine tıkladığında tetiklenen aksiyondur. Panel’i tıklanabilir hale getirerek hem kart yapılarında hem de bilgi bloklarında etkileşimli alanlar oluşturabilirsiniz.

Sık Kullanılan onClick Senaryoları:

• Bir detay sayfasına yönlendirme (Ör. Panel bir kullanıcı kartı ise → “UserDetail” ekranına gitme)
• Modal veya pop-up açma (Ör. Panel bir ürün kartı ise → “ProductInfoModal” açma)
• Veri sorgusu veya filtre çalıştırma (Ör. Panel bir kategori kutusu ise → ilgili ürünleri listeleme)
• Form doldurma ekranına geçiş (Ör. Başvuru kartına tıklandığında form ekranını açma)
• Dinamik içerik yükleme (Ör. Panel bir rapor kutusu ise → grafiği güncelleyen aksiyon tetikleme)
  

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

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

Senaryo: Toptancı Dağıtım Durumu Kartları Oluşturma

Bir toptancı veya dağıtım yönetimi uygulamasında, günlük siparişlerin durumlarını kullanıcıya hızlı ve görsel olarak anlaşılır bir şekilde göstermek önemlidir. Panel elementi, her sipariş için ayrı bir durum kartı oluşturarak renklerle zenginleştirilmiş bir görünüm sunar.

Bu senaryoda, her siparişin durumu, kodu, müşteri adı, açıklaması ve güncelleme zamanı tek bir Panel içinde gösterilmekte, Panelin arka plan rengi ilgili sipariş durumuna göre dinamik olarak değişmektedir.

Senaryoda:

• "Bekliyor", "Hazırlanıyor", "Yolda", "Teslim Edildi" ve "İptal Edildi" gibi sipariş durumları için ayrı renklerle panel kartları oluşturulur.
• Dinamik renk alanları sayesinde kullanıcı, siparişlerin ilerleme durumunu tek bakışta kolayca ayırt edebilir.

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

DataSources modülünde tabloları oluşturma: 

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

• Önemli Alan adları:
  
  • StatusName: Sipariş durumunun adını ifade eder. Örn: Bekliyor, Hazırlanıyor, Yolda, Teslim Edildi, İptal Edildi.
  • BgColor: İlgili sipariş durumunun panel arka plan rengini tanımlar. HEX formatında saklanır.
  • FontColor: Panel üzerindeki metinlerin hangi renkte görüneceğini belirler.
    
• “OrderStatusPanel” adında yeni bir tablo daha oluşturun.
• Kurulması gereken tablo yapısı aşağıdaki gibidir:

ColorId sütununu eklerken Type alanında OrderStatusColor seçmeniz yeterlidir.

• Önemli Alan adları:
  
  • OrderCode: Siparişe ait benzersiz kod bilgisini tutar. Kart üzerinde sipariş numarasının görüntülenmesini sağlar.
  • CustomerName: Siparişi veren müşterinin ad–soyad bilgisini içerir.
  • Status: Siparişin güncel durumunu belirtir. Örn: Bekliyor, Hazırlanıyor, Yolda, Teslim Edildi, İptal Edildi.
  • Description: Sipariş durumuna dair kısa açıklama veya süreç bilgisini tutar. Panel içinde detay metni olarak kullanılır.
  • LastUpdate: Sipariş durumunun son güncellenme tarih–saat bilgisidir. Kart alt kısmında gösterilir.
  • ColorId: Sipariş durumuna göre panelde kullanılacak arka plan ve yazı rengini belirleyen renk tablosuna (OrderStatusColor) bağlı kimlik bilgisidir.

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 (InsertProfileCardData): Uygulamayı örnek verilerle test etmek için aşağıdaki SQL aksiyonunu ekleyin ve TEST butonuna basın.

-- 1) Renk tablosu ID'leri için değişkenleri tanımla
DECLARE @Status1 UNIQUEIDENTIFIER = NEWID();
DECLARE @Status2 UNIQUEIDENTIFIER = NEWID();
DECLARE @Status3 UNIQUEIDENTIFIER = NEWID();
DECLARE @Status4 UNIQUEIDENTIFIER = NEWID();
DECLARE @Status5 UNIQUEIDENTIFIER = NEWID();

-- 2) OrderStatusColor tablosuna verileri ekleme
INSERT INTO OrderStatusColor (Id, StatusName, BgColor, FontColor)
VALUES
(@Status1, N'Bekliyor',       '#F5F5DC', '#000000'),
(@Status2, N'Hazırlanıyor',   '#FFD54F', '#000000'),
(@Status3, N'Yolda',          '#42A5F5', '#FFFFFF'),
(@Status4, N'Teslim Edildi',  '#66BB6A', '#FFFFFF'),
(@Status5, N'İptal Edildi',   '#EF5350', '#FFFFFF');

-- 2) OrderStatusPanel tablosuna verileri ekleme
INSERT INTO OrderStatusPanel (Id, OrderCode, CustomerName, Status, Description, LastUpdate, ColorId)
VALUES
(NEWID(), 'ORD-1001', N'Ahmet Demir',  N'Bekliyor',       
 N'Sipariş alınmayı bekliyor',     '2025-12-09 16:20', @Status1),
(NEWID(), 'ORD-1002', N'Burcu Yılmaz', N'Hazırlanıyor',   
 N'Depoda paketleme aşamasında',   '2025-12-09 17:05', @Status2),
(NEWID(), 'ORD-1003', N'Cem Kaya',     N'Yolda',          
 N'Kargo dağıtımda',               '2025-12-10 09:45', @Status3),
(NEWID(), 'ORD-1004', N'Deniz Acar',   N'Teslim Edildi',  
 N'Müşteriye teslim edildi',       '2025-12-08 14:10', @Status4),
(NEWID(), 'ORD-1005', N'Ece Tunç',     N'İptal Edildi',   
 N'Müşteri talebiyle iptal edildi','2025-12-11 11:30', @Status5);

Uygularken OrderStatusColor ve OrderStatusPanel kısmlarını silip tekrar OrderStatusColor  ve  OrderStatusPanel yazıp enter a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.

• Verileri Sağlayan Aksiyon (GetOrderStatusPanel):
  

SELECT 
    p.Id,
    p.OrderCode,
    p.CustomerName,
    p.Status,
    p.Description,
    p.LastUpdate,

    c.BgColor,
    c.FontColor

FROM OrderStatusPanel p
LEFT JOIN OrderStatusColor c
    ON p.Status = c.StatusName;

Uygularken OrderStatusColor ve OrderStatusPanel kısmlarını silip tekrar OrderStatusColor  ve  OrderStatusPanel yazıp enter a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.

Adım 3 - Initial Action Ekleme

1. UI Design modülünü açın.
2. Sayfaya ADD ACTION butonundan Initial Actions > Custom > Managed Db > GetOrderStatusPanel aksiyonunu ekleyin. 

Adım 4 - Element Ekleme ve Stil Düzenleme

Başlangıçta anasayfada: 

1. UI Design modülünü açın.
2. Sol yan panelden Elements > Data > GalleryView elementini sayfaya sürükleyip bırakın. 
3. Gallery View içerisine Elements > Container > Row elementini sürükleyip bırakın.
4. Row içerisinde Row > Properties > Desktop alanını bir sütun olarak ayarlayın.

5. Row içerisine Elements > Container > Panel elementini ekleyin.
6. Panel elementi içerisine Elements > Container > VerticalStack elementini sürükleyip bırakın.
7. Vertical Stack elementini VerticalStack > Styling > Layout > Align alanından dikeyde ortalayın.

8. Vertical Stack elementine tıklayın ve sol yan panelden Elements > Display > Label elementine beş kez tıklayıp alt alta beş tane label oluşturun.

Adım 5 - Element Ayarlamalarının Yapılandırılması

1. Sayfada alt kısımda yer alan BreadCrumb aracılığıyla istediğiniz elemente ulaşabilirsiniz. İlk Label elementine tıklayın ve BreadCrumbtan GalleryView elementine ilerleyin.

2. GalleryView elementinde GalleryView > Properties > Datasource alanında GetOrderStatusPanel aksiyonunu seçin.

3. Label elementlerinden birine tıklayın ve BreadCrumb üzerinden Panel elementine tıklayın.

4. Panel elementinde Panel > Properties > DynamicBackGroundColor alanına BgColor tanımlamasını yapın.

‍

5. Panel elementinde Panel > Properties > DynamicFontColor alanına FontColor tanımlamasını yapın.

6. Panel elementinin kenarlarında Panel > Styling > Border > Radius alanında 50 px tanımlaması yapın.

7. İlk Label elementine tıklayın Label > Properties > Value > Field to display alanında Status tanımlamasını yapın.

8. İkinci Label elementinde de benzer şekilde OrderCode tanımlamasını yapın. 

9. Üç, dört ve beşinci Label elementlerinde benzer şekilde sırasıyla CustomerName, Description ve LastUpdate alanlarını tanımlayın. Tanımlamalar sonrası beklenen aşağıdaki görseldeki gibidir.

Preview:

Uygulama test edildiğinde, Panel elementi Gallery View ile birlikte kullanılarak tüm dağıtım kayıtları kartlar hâlinde listelenir.

Her panel, sipariş durumuna göre dinamik arka plan rengi, yazı rengi ve bilgi alanları ile otomatik olarak biçimlendirilir. Böylece Yolda, Hazırlanıyor, Teslim Edildi, İptal Edildi ve Bekliyor gibi durumlar görsel olarak kolayca ayırt edilebilir ve kullanıcıya daha okunabilir bir dağıtım takip ekranı sunulur.

4. Ortak Özellikler (Properties)

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

• Panel’i bir “kart” gibi kullanırken onClick aksiyonundan yararlanın. Özellikle profil kartları, ürün kartları, dashboard kutuları gibi yapılarda Panel’i tıklanabilir yapmak kullanıcı akışını hızlandırır.
• Panel içeriğini sade ve odaklı tutun. Çok fazla bilgi veya element yerleştirmekkartın okunabilirliğini azaltır.
• Scroll ayarlarını içeriğe uygun seçin. Uzun listeli veya metin yoğun panellerde Vertical Scroll, geniş içeriklerde Horizontal Scroll tercih edin.
• Padding ve spacing ayarlarını dikkatli seçin. Çok dar boşluklar sıkışık bir görünüm yaratırken, aşırı geniş padding Panel’in gereksiz büyümesine neden olabilir.

6. Kısıtlamalar

• Panel, tek bir onClick aksiyonu destekler. Daha gelişmiş etkileşimler için Panel içine birden fazla element yerleştirilip onların aksiyonları kullanılmalıdır.
• Panel’in responsive davranışı tamamen iç elementlerin düzenine bağlıdır. Panel tek başına mobil uyumluluk sağlamaz; çocuk elementlerin uyumlu olması gerekir.