1. Horizontal Grid Elementine Genel Bakış

‍

Horizontal Grid elementi, içeriklerinizi yatay bir düzende listelemenizi sağlayan kullanıcı dostu bir düzen elementidir. Kullanıcılar sağa veya sola kaydırarak öğeler arasında gezinebilir, böylece özellikle geniş yatay listelemelerde akıcı bir deneyim sunulur. Bu yapı, kategoriler, ürün kartları, kısa bilgi kutucukları, banner stripleri veya yatay kaydırma gerektiren tüm içerikler için ideal bir çözüm sağlar.

Horizontal Grid, esnek yapısı sayesinde hem web hem mobil cihazlarda doğru şekilde ölçeklenir ve kullanıcıların alışık olduğu yatay kaydırma deneyimini modern bir tasarım ile bir araya getirir. Görsel ağırlıklı uygulamalarda kullanım kolaylığı sağlar ve ekran alanından tasarruf ederek daha çok içeriği kompakt şekilde sunmanıza imkan tanır.

Horizontal Grid elementi, web ve mobil uygulamalarda desteklenmektedir.

1.1. Sık Kullanım Senaryoları

• Yatay ürün listeleri oluşturmak. E-ticaret uygulamalarında, belirli bir kategoriye ait ürünlerin yatay kaydırmalı şekilde sunulması için kullanılır. 
• Banner veya kampanya alanları göstermek. Duyurular, reklamlar veya kampanya görselleri yatay kaydırma ile etkileyici şekilde sunulabilir.
• Portföy veya galeri içerikleri listelemek. Görsel ağırlıklı çalışmalarda yatay akış, kullanıcıların içerikleri hızlıca taramasını sağlar.
• Kart tabanlı kısa bilgi alanları (info cards). Örneğin eğitim modülleri, içerik serileri veya önerilen içerikler yatay grid yapısında sergilenebilir.

2. Temel Özellikler

• Esnek kart yerleşimi. İçerikler kart yapısında düzenlenebilir; Grid içine farklı UI elementleri eklenerek istenilen görünüm elde edilir.
• Responsive tasarım uyumu. Hem mobil hem web ekranlarında yatay akış yapısı otomatik uyum sağlar. Kart boyutları ekran genişliğine uygun şekilde hizalanır.
• Dinamik veri bağlama desteği. Datasource veya aksiyonlar üzerinden gelen kayıtlar otomatik olarak yatay grid içinde sıralanır.
• Yatay ızgara yapısı. Çok sayıda elemanın ekrana sığması gerektiğinde yatay yerleşimi optimize eder; ekrana sığmayan içerikler kaydırılarak görüntülenir.
  

2.2 Horizontal Grid Elementi Özellikleri (Properties)

Horizontal Grid elementini seçtiğinizde sağ panelde yer alan Properties alanında, slayt davranışlarını, boş veri durumlarını, kaydırma ayarlarını ve görsel etkileşimleri yapılandırabilirsiniz.

Aşağıda tüm özellikler detaylı biçimde açıklanmıştır:

Veri ve Boş Durum Ayarları

• Datasource: Horizontal Grid içinde listelenecek verilerin kaynağını belirler. Datasource veya aksiyon üzerinden gelen veri, grid içindeki kartlara otomatik uygulanır.
• No Data Found Message: Veri kaynağı boş olduğunda kullanıcıya gösterilecek mesajı tanımlar. Örn: “Gösterilecek içerik bulunamadı.”
• Show No Data Found Image: Veri olmadığında görüntülenecek özel resmin seçilmesini sağlar. Boş ekran deneyimini iyileştirmek için kullanılabilir.

Geçiş ve Slayt Davranışı Ayarları

• Slide To Show: Ekranda aynı anda görüntülenecek slayt (kart) sayısını belirler. Örn: 3 → ekranda 3 kart yan yana görünür.
• Slide To Scroll: Her kaydırma hareketinde kaç kartın kaydırılacağını ayarlar. Örn: 1 → her kaydırmada 1 kart ilerlenir.
• Fade: Yatay kaydırmada geçiş efektinin solma animasyonu ile yapılmasını sağlar.
• Autoplay: Slaytların kullanıcı etkileşimi olmadan otomatik olarak ilerlemesini sağlar.
• Autoplay Speed: Otomatik slayt geçiş hızını milisaniye cinsinden belirler. Örn: 2000 = 2 saniyede bir geçiş.
• Pause On Dots Hover: Navigasyon noktalarının üzerine gelindiğinde slayt geçişinin durmasını sağlar.
• Vertical: Grid yapısını yatay yerine dikey slayt akışı şeklinde görüntüler.
• Swipe: Dokunmatik cihazlarda parmak hareketi ile kaydırmayı etkinleştirir. Mobil deneyim için kritik bir ayardır.

• Show Page Indicator: Horizontal Grid’in sağ alt köşesinde, toplam kart sayısını ve kullanıcının hangi kart grubunda olduğunu gösteren sayısal bir gösterge (ör. 1 / 4) görüntüler.
  
  • Özellikle mobil uygulamalarda kullanıcıya “kaçıncı sayfadayım?” bilgisini verir.
  • Gösterge ek bir alan kapladığı için mevcut tasarımla uyumu kontrol edilmelidir.

Hover (Üzerine Gelme) Etkileşim Ayarları

• Hover Font Color: Kullanıcı slayt üzerine geldiğinde metin rengini değiştirir.
• Hover Bg Color: Kullanıcı slayt üzerine geldiğinde arka plan renginin değişmesini sağlar.

Bu iki özellik özellikle kartları vurgulamak için kullanılır.

Görsel Kontrol Ayarları

• Arrow Color: Slaytlar arasında geçiş yapmak için kullanılan ok ikonlarının rengini belirler. Tema uyumu için özelleştirilebilir.

2.3. Elemente Eklenebilen Aksiyonlar

Horizontal Grid elementi, yatay kaydırılabilir bir içerik listeleme yapısı olduğu için herhangi bir aksiyon ekleme veya tetikleyici (trigger) tanımlama özelliğini desteklemez.

Bu nedenle:

• onClick,
• onChange,
• veya başka herhangi bir aksiyon Horizontal Grid elementine eklenemez.

Kullanıcı etkileşimleri, doğrudan Horizontal Grid üzerinde değil, grid içerisine eklenen panel, buton, resim (Image), text veya özel UI elementleri üzerinden yönetilir.

Eğer kullanıcı bir kartı seçtiğinde işlem tetiklenmesi gerekiyorsa, bu aksiyon Horizontal Grid içinde yer alan ilgili elementlere bağlanmalıdır.

3. Horizontal Grid Elementi Nasıl Kullanılır? 

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

‍

Senaryo: Kampanyalı Benzer Ürünler Gösterimi

Bir e-ticaret uygulamasında, ürün detay sayfasında kullanıcıya ilgilendiği ürüne benzer ve kampanya kapsamında sunulan ürünleri öne çıkarmak amacıyla kampanyalı benzer ürünler alanı kullanılır. Bu alan, kullanıcının alternatif ürünleri indirimli fiyatlarla hızlıca keşfetmesini sağlayarak satın alma ihtimalini artırır.

Kullanıcı, kampanyalı ürün kartlarını yatayda kaydırarak benzer modelleri inceleyebilir ve indirimli ürünleri kolayca karşılaştırabilir. Bu yapı, kampanya fırsatlarının görünürlüğünü artırırken kullanıcıyı alışverişe yönlendiren etkili bir deneyim sunar.

Senaryoda:

• Kampanyalı benzer ürünler alanı içerisinde her bir ürün kartı; ürün görseli, ürün adı, kampanya bilgisi ve indirimli fiyatı gösterecek şekilde yapılandırılmıştır.
• Kartın üst bölümünde ürün adı ve kampanya etiketi yer alırken, orta bölümde ürüne ait görsel ön plana çıkarılır. Kartın alt bölümünde ise indirimli fiyat bilgisi kullanıcıya net ve dikkat çekici biçimde sunulur.
• Bu yapı sayesinde kullanıcı, kampanyalı benzer ürünleri tek bakışta inceleyebilir, avantajlı fiyatları kolayca fark edebilir ve alışveriş kararını daha hızlı verebilir.

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

DataSources modülünde tablo oluşturma: 

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

‍

Price sütunu eklenirken Decimal veri türünde Decimal Scale > 2 olarak ayarlayın.

• Önemli Alan adları:
  
  • ProductName: Ürünün ad bilgisini tutar. Galeri veya kart yapısında kullanıcıya gösterilen ana metindir ve ürünün ne olduğunu hızlıca anlamasını sağlar.
  • ImageUrl: Ürüne ait görselin URL bilgisini içerir. Ürün galerisi veya liste ekranlarında gösterilen ana görsel bu alan üzerinden yüklenir.
  • Price: Ürünün satış fiyatını ifade eder. Kullanıcıya küsuratlı fiyat bilgisiyle birlikte gösterilir ve ürün karşılaştırmalarında kullanılır.
  • StockStatus: Ürünün stok durumunu belirtir (ör. Stokta, Sınırlı Stok, Tükendi). Kullanıcının satın alma kararını yönlendiren bilgilendirici bir alandır.
• İkinci bir “CampaignSimilarProducts” adında yeni tablo oluşturun.
• Kurulması gereken tablo yapısı aşağıdaki gibidir:

‍
Price ve DiscountedPrice sütunları eklenirken Decimal veri türünde Decimal Scale > 2 olarak ayarlayın. BaseProductId type alanına BaseProduct tablo adını yazınız.

‍

• Önemli Alan adları:
  
  • BaseProductId: Kampanyalı benzer ürünün hangi ana ürüne bağlı olduğunu belirtir. Ürün detay sayfasında doğru benzer ürünlerin listelenmesini sağlar.
  • ProductName: Kampanyaya dahil olan ürünün ad bilgisini tutar. Kart veya galeri yapısında kullanıcıya gösterilen ana metindir.
  • ImageUrl: Ürüne ait görselin URL bilgisini içerir. Kampanyalı ürünlerin görsel olarak öne çıkarılmasını sağlar.
  • Price: Ürünün kampanya öncesi satış fiyatını ifade eder. İndirim oranının anlaşılabilmesi için referans olarak kullanılır.
  • DiscountedPrice: Kampanya kapsamında uygulanan indirim sonrası satış fiyatını tutar. Kullanıcıya avantajlı fiyatı göstermek için kullanılır.
  • CampaignLabel: Kampanyaya ait kısa bilgilendirici etiketi içerir (ör. %15 İndirim, Sepette %10). Kampanya farkındalığını artırır.
  • StockStatus: Ürünün stok durumunu belirtir (ör. Stokta, Sınırlı Stok, Tükendi). Kullanıcının satın alma kararını yönlendiren bilgilendirici bir alandır.

Adım 2 - Gerekli Aksiyonları Tanımlama

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

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

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

DECLARE @BaseProductId UNIQUEIDENTIFIER = NEWID();

-- Ana ürünü ekle (BaseProduct)
INSERT INTO BaseProduct
(Id, ProductName, Imageurl, Price, StockStatus)
VALUES
(
    @BaseProductId,
    N'Erkek Spor Ayakkabı',
    N'https://images.pexels.com/photos/19090/pexels-photo.jpg',
    3299.90,
    N'Stokta'
);

-- Kampanyalı benzer ürünleri ekle
INSERT INTO CampaignSimilarProducts
(Id, BaseProductId, ProductName, ImageUrl, StockStatus, CampaignLabel, Price, DiscountedPrice)
VALUES
(NEWID(), @BaseProductId, N'Koşu Ayakkabısı',  
 'https://images.pexels.com/photos/1598505/pexels-photo-1598505.jpeg',
 N'Sınırlı Stok', N'Yıl Sonu %15', 3899.90, 3314.92),

(NEWID(), @BaseProductId, N'Günlük Ayakkabı',  
 'https://images.pexels.com/photos/1537671/pexels-photo-1537671.jpeg',
 N'Stokta', N'Sepette %10', 2199.50, 1979.55),

(NEWID(), @BaseProductId, N'Outdoor Ayakkabı', 
 'https://images.pexels.com/photos/2048548/pexels-photo-2048548.jpeg',
 N'Tükendi', N'Flash %12', 3599.95, 3167.96),

(NEWID(), @BaseProductId, N'Sokak Stili Ayakkabı',
 'https://images.pexels.com/photos/1456706/pexels-photo-1456706.jpeg',
 N'Stokta', N'Özel %20', 2499.90, 1999.92),

(NEWID(), @BaseProductId, N'Hafif Spor Ayakkabı',
 'https://images.pexels.com/photos/1537671/pexels-photo-1537671.jpeg',
 N'Sınırlı Stok', N'Hafta Sonu %10', 2899.50, 2609.55);

Uygularken Insert into yanındaki BaseProduct ve CampaignSimilarProducts kısımlarını silip tekrar yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.

• Ana Ürünü Sağlayan Aksiyon (GetBaseProduct):
  

SELECT TOP 1 * FROM BaseProduct;

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

• Benzer Kampanyalı Ürünleri Sağlayan Aksiyon (GetCampaignSimilarProducts):

SELECT * FROM CampaignSimilarProducts WHERE BaseProductId = @BaseProductId;

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

Başlangıçta anasayfada: 

• UI Design modülünü açın.
• Sayfada Add Action > Initial Action > Custom > Managed Db > GetBaseProduct aksiyonunu ekleyin.

‍

• Sayfada Add Action > Initial Action > Custom > Managed Db > GetCampaignSimilarProducts aksiyonunu ekleyin.

‍

• BaseProductId alanına Action Result > GetBaseProduct > First > Id tanımlamasını yapın.

‍

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

• Sol yan panelden Elements > Container > Panel elementini sayfaya sürükleyip bırakın. 
• Panel elementi boyutunu Panel > Styling > Layout > Width > 70 % olarak ayarlayın.

• Arka plan rengini Panel > Styling > Fill > Style > White Background olarak ayarlayın.

• Kenarları Panel > Styling > Border > Radius > 45 px olarak ayarlayın.

• Alt kısımda yer alan breadcrumb menü aracılıyla panel elementini bulunduran Col alanına tıklayın.

• Col elementinde Col > Styling > Align > dikeyde ve yatayda ortala olarak ayarlayın.

‍

• Panel içerisine Elements > Container > Row elementini sürükleyip bırakın.
• Row elementinde  Row > Properties > Desktop > iki pencere olarak ayarlayınız.

• Row içerisinde sol taraftaki Col alanını seçin. Col > Styling > Layout > Align bölümünden dikey hizalamayı Ortala, yatay hizalamayı ise Sola olarak ayarlayın.

• Sağ taraftaki Col alanını seçin. Col > Styling > Layout > Align bölümünden dikey hizalamayı Ortala, yatay hizalamayı ise Sağa olarak ayarlayın.

• Her iki Col içerisine Elements > Display > Label elementini sürükleyip bırakın.

•  Sağ taraftaki Label elementinde Label > Styling > Text > Style > Heading 6 olarak ayarlayın.

• Yazıların altına Panel içerisine Elements > Display > Image elementini sürükleyip bırakın.

‍

• Image elementinin yanındaki boşluğa tıklayıp Col alanına ilerleyin. Col > Styling > Layout > Align > Dikey ve yatay olarak ortalayın.
• Image elementine tıklayın. Boyutlarını Image > Styling > Layout > Width ve Height alanlarını sırasıyla 232 px ve 232 px olarak ayarlayın.

• Image elementi altına Panel elementi içerisine Elements > Container > Row elementini sürükleyip bırakın.
• Row elementinde Row > Properties > Desktop > bir pencere olarak ayarlayınız.
• Row içerisindeki Col alanına tıklayın. Col > Styling > Layout > Align bölümünden dikey hizalamayı Ortala, yatay hizalamayı ise Sağa olarak ayarlayın.
• Col içerisine Elements > Container > HorizontalStack elementini sürükleyip bırakın.

• Sayfaya Elements > Data > HorizontalGrid elementini ekleyin.

• Horizontal Grid içerisinde HorizontalGrid > Properties > Datasource > GetCampaignSimilarProducts aksiyonunu ekleyin.

• Değişen ürün sayısını HorizontalGrid > Properties > SlidesToScroll > 2 olarak tanımlayın.

• Gösterilecek ürün sayısını HorizontalGrid > Properties > SlidesToShow > 3 olarak tanımlayın.

• Sürüklemeyle değiştirmek için HorizontalGrid > Properties > Swipe > Açık olarak ayarlayın.

• Otomatik ilerlemesi için HorizontalGrid > Properties > Autoplay > Açık olarak ayarlayın.

• İlerleme hızını HorizontalGrid > Properties > AutoplaySpeed >3000 olarak tanımlayın.

• Horizontal Grid içeriklerini hizalamak için HorizontalGrid > Styling > Layout > Align > dikeyde ve yatay da ortalayın.

• Ana ürün için hazırladığımız Panel element grubunu kopyalamak için, panelin sağ tarafındaki boş alana tıklayın ve açılan seçenekler arasından üçüncü sırada yer alan “Kopyala” seçeneğine basın.

• Horizontal Grid elementine tıklayın. Gelen seçeneklerden Yapıştır‘a basın.

• Yapıştırdıktan sonra beklenen görüntü aşağıdaki gibidir.

• Image elementine tıklayın ve taşmaları düzeltin Image > Styling > Layout > Width ve Height > 150 px olarak ayarlayın.

• Image elementi üzerine Elements > Display > Label elementini sürükleyip bırakın.
• Label elementinin yanındaki boş alana tıklayın. Ardından Col > Styling > Layout > Align adımlarını izleyerek, diğer adımlarda olduğu gibi hem dikeyde hem yatayda ortalama ayarını yapın.

• Alt bölümde yer alan başlangıçtaki Label elementine tıklayın ve açılan seçenekler arasından Çoğalt seçeneğine basın.

• Son durumda beklenen yapı aşağıdaki gibidir.

• Alt kısımdaki ilk Label Elementine tıklayın. Label > Styling > Text alanında Color ve Decoration alanlarını aşağıdaki gibi ayarlayın.

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

Sayfaya eklenen initial aksiyonun elementlere bağlantısı:

• Ana ürün için Panel elementi içerisindeki ilk Label elementine tıklayın. Label elementinde  Label > Properties > Value > Action Results > GetBaseProduct > First > ProductName olarak ayarlayın.

• Sol kenardaki ikinci Label elementine tıklayın. Label elementinde Label > Properties > Value > Action Results > GetBaseProduct > First > StockStatus olarak ayarlayın.

• Image elementine tıklayın. Image elementinde Image > Properties > Value > Action Results > GetBaseProduct > First > ImageUrl olarak ayarlayın.

• Alt kenardaki ilk Label elementine tıklayın. Label > Properties > Value > Action Results > GetBaseProduct > First > Price olarak ayarlayın.

‍

• Alt kenardaki ikinci Label elementine tıklayın. Label > Properties > Value > Fixed Value > TL yazısını ekleyin. 

‍

Kur bilgileri üzerinden farklı kur fiyatlarını tablo üzerine ekleyip gösterebilirsiniz. Örnek senaryoda sadece TL kullanılmıştır.

• Ana ürün alanında beklenen görünüm aşağıdaki gibi olmalıdır.

• Öneri ürünler için Horizontal Grid içerisindeki ikinci Label elementine tıklayın. Label > Properties > Value > Field to display > StockStatus olarak ayarlayın.

• Horizontal Grid içerisindeki ilk Label elementine tıklayın. Label > Properties > Value > Field to display > StockStatus olarak ayarlayın.

• Horizontal Grid içerisinde ortadaki üçüncü Label elementine tıklayın. Label > Properties > Value > Field to display > CampaignLabel olarak ayarlayın.

•  Horizontal Grid içerisinde Image elementine tıklayın. Image > Properties > Value > Field to display > ImageUrl olarak ayarlayın.

•  Alt kısımdaki ilk Label Elementine tıklayın. Label > Properties > Value > Field to display > Price olarak ayarlayın.

• Alt kısımdaki ikinci Label Elementine tıklayın. Label > Properties > Value > Field to display > DiscountedPrice olarak ayarlayın.

• Alt kısımdaki üçüncü Label elementine, çubuğu sağa kaydırarak ilerleyin ve tıklayın.

• Ardından Label > Properties > Value > Select Value Type > Symbol Picker > Fixed Value adımlarını izleyerek değeri TL olarak ayarlayın.

Preview:

Uygulama test edildiğinde, üst bölümde öne çıkan ana ürün kartı ve alt bölümde yan yana listelenen diğer ürün kartlarından oluşan bir ürün vitrini görüntülenir. Ana ürün kartında ürün adı, stok durumu, büyük ürün görseli ve fiyat bilgisi belirgin şekilde sunulurken; alt kısımdaki kartlarda kampanya oranları, stok durumu, ürün görselleri ve indirimli fiyatlar birlikte gösterilir.

Kullanıcı, farklı ayakkabı modellerini aynı ekranda inceleyebilir; kampanyalı ürünleri, indirim oranlarını ve stok bilgilerini kolayca karşılaştırabilir. Bu yapı sayesinde ürünler hem odaklı hem de karşılaştırılabilir bir düzende sunularak kullanıcı deneyimi güçlendirilir.

4. Ortak Özellikler (Properties)

Horizontal Grid 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)

• Kart boyutlarını tutarlı kullanın. Horizontal Grid içinde farklı yükseklik ve genişlikte kartlar kullanmak düzeni bozabilir. Mümkünse standart ölçüler tercih edin.
• Slayt geçiş ayarlarını kullanıcı deneyimine göre yapılandırın. Autoplay ve Autoplay Speed gibi ayarları çok hızlı yapmak kullanıcıları rahatsız edebilir.
• Mobil kullanım için Swipe özelliğini mutlaka aktif tutun. Mobil cihazlarda yatay kaydırma deneyimi için kritik bir özellik olduğundan açık bırakılmalıdır.
• Slide To Show ve Slide To Scroll değerlerini mantıklı seçin. Örn. Slide To Show = 4 / Slide To Scroll = 3 gibi kullanımlar akıcı gezinme sağlar.
• Hover efektlerini sade tutun. Hover Font Color ve Hover Bg Color gibi ayarlar, özellikle çok görselli ekranlarda aşırıya kaçmamalıdır.
• Boş veri durumunu iyi yönetin. No Data Found Message ve Show No Data Found Image özelliklerini kullanarak kullanıcıyı doğru bilgilendirin.

6. Kısıtlamalar

• Horizontal Grid elementi aksiyon desteklemez. Kullanıcı etkileşimleri doğrudan Horizontal Grid üzerinden değil, içindeki bileşenler üzerinden yönetilir.
• Responsive davranış kart boyutlarına bağlıdır. Çok geniş kartlar küçük ekranlarda hizalama sorunlarına neden olabilir.
• Fade ve Vertical ayarları tüm tasarımlarla uyumlu olmayabilir. Dikey slaytlar veya fade geçişler bazı grafik yoğun ekranlarda uyumsuz durabilir.