1. Breadcrumb Elementine Genel Bakış

Kuika’nın Breadcrumb elementi, web uygulamalarında kullanıcıların uygulama içindeki mevcut konumlarını ve sayfa hiyerarşisini kolayca takip etmelerini sağlamak amacıyla geliştirilmiş bir navigasyon elementidir. Dinamik yapısı sayesinde menü ve sayfa yapınızla uyumlu çalışarak kullanıcı deneyimini güçlendirir.

Breadcrumb, kullanıcıya yalnızca bulunduğu ekranı göstermekle kalmaz; aynı zamanda önceki seviyelere hızlıca geri dönmesine olanak tanır. Bu sayede özellikle çok katmanlı ve karmaşık uygulamalarda yön kaybını önler ve gezinmeyi kolaylaştırır.

Breadcrumb elementi yalnızca web uygulamalarında desteklenmektedir.

1.1. Sık Kullanım Senaryoları

• Çok seviyeli sayfa yapılarında kullanıcının bulunduğu konumu netleştirmek
• Yönetim panelleri ve admin ekranlarında modül → alt modül → ekran akışını göstermek
• E-ticaret uygulamalarında kategori → alt kategori → ürün detay hiyerarşisini sunmak
• İçerik yönetim sistemlerinde (CMS) sayfa ve içerik yapısını görselleştirmek
• Raporlama ve analiz ekranlarında kullanıcıyı ilgili veri yolunda yönlendirmek
• Dokümantasyon ve yardım sayfalarında başlık ve alt başlık ilişkilerini göstermek
• Karmaşık navigasyon yapılarında geri dönüş yollarını kullanıcıya açıkça sunmak

2. Temel Özellikler

• Hiyerarşik navigasyon desteği. Kullanıcının bulunduğu sayfanın üst–alt ilişkilerini görsel olarak gösterir.
• Dinamik veriyle çalışma. Menü yapısı veya sayfa hiyerarşisine bağlı olarak otomatik güncellenebilir.
• Tıklanabilir adımlar. Kullanıcılar önceki seviyelere tek tıklamayla geri dönebilir.

2.1. Breadcrumb Elementi Özellikleri

Breadcrumb elementi, uygulamanın bulunduğu ekranı current (mevcut sayfa) olarak işaretlerken, ona ait üst seviye parent menüleri sol tarafa dinamik olarak yerleştirir. Menü yapısına bağlı olarak otomatik güncellenir ve herhangi bir manuel müdahale olmadan hiyerarşik olarak çalışır.

Properties paneli üzerinden özelleştirilebilecek başlıca ayarlar:

• Options: Menü öğeleri bu alanda tanımlanır. Her bir öğe için etiket (label), hedef (path) ve isteğe bağlı olarak action (tıklama sonrası tetiklenecek işlem) tanımlanabilir.
• Active Item Color: Mevcut (aktif) sayfayı temsil eden breadcrumb öğesinin rengini belirler.
• Title Field: BreadCrumb üzerinde görünecek başlıkların bulunduğu alandır.
• Parent Key Field: BreadCrumb içerisindeki bir step’in parent (üst seviye) step’ini belirler.
• Link Field: BreadCrumb üzerindeki steplere tıklanarak NAVIGATE işleminin gerçekleşmesini sağlar. Bu alana proje içerisindeki ekran isimleri bağlanmalıdır.
• Key Field: Tabloda genellikle “Id” gibi unique bir değeri temsil eder ve her satırı ayırt etmek için kullanılır.

2.2. Elemente Eklenebilen Aksiyonlar

Breadcrumb elementi, kullanıcı sekme/konum değişikliğini yakalayabilmek için OnChange tetikleyicisini destekler. Bu tetikleyici, kullanıcının aktif breadcrumb adımı değiştiğinde çalışır.

OnChange aksiyonu ile yapılabilecek işlemler:

• Kullanıcı farklı bir breadcrumb seviyesine geçtiğinde ilgili sayfa veya içerik bilgisini güncellemek
• Aktif breadcrumb’a göre liste, tablo veya form içeriğini yeniden yüklemek
• Sayfa başlığı, açıklama veya üst bilgi alanlarını dinamik olarak değiştirmek
• Seçilen breadcrumb seviyesine göre filtreleme veya veri kısıtlama işlemleri yapmak
• Breadcrumb değişimine bağlı olarak farklı UI elementlerinin görünürlüğünü kontrol etmek

OnChange tetikleyicisi sayesinde Breadcrumb, yalnızca pasif bir navigasyon göstergesi olmaktan çıkarak, sayfa içeriğiyle senkron çalışan daha dinamik bir yapı haline gelir.

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

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

Senaryo: Profil Ayarları için Breadcrumb Kullanımı

Bir uygulamada kullanıcıların ayar ekranlarında kaybolmadan ilerleyebilmesi için breadcrumb menü yapısı önemli bir rehber görevi üstlenir. Bu senaryoda breadcrumb yapısı, kullanıcıyı profil düzenleme ekranına adım adım yönlendirmek amacıyla kullanılır.

Senaryoda:

• Breadcrumb yapısı, BreadCrumbMenu tablosunda tutulan hiyerarşik kayıtlar üzerinden oluşturulur.
• Kullanıcı Profil Bilgileri sayfasına ulaştığında breadcrumb alanında Ana Sayfa > Ayarlar > Hesap > Profil Bilgileri yolu görüntülenir.
• Kullanıcı breadcrumb üzerindeki Ayarlar veya Hesap adımlarına tıklayarak ilgili üst sayfalara kolayca geri dönebilir.
• Bu yapı sayesinde kullanıcı, ayarlar içerisinde bulunduğu konumu net bir şekilde görür ve geri dönüşlerde ekstra menü kullanmak zorunda kalmaz.

Örneğin:

• Kullanıcı Profil Bilgileri sayfasındayken breadcrumb üzerindeki Hesap adımına tıkladığında, doğrudan Hesap Ayarları sayfasına yönlendirilir.
• Kullanıcı breadcrumb üzerinden Ana Sayfa bağlantısını seçerek, mevcut sayfadan çıkmadan ana ekrana hızlıca geri dönebilir.

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

DataSources modülünde tablo oluşturma: 

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

• Önemli Alan adları:
  
  • IconName: Menü öğesiyle birlikte gösterilecek ikonun adını ifade eder. UI tarafında breadcrumb öğesinin görsel olarak desteklenmesini sağlar.
  • Name: Breadcrumb üzerinde kullanıcıya gösterilen metin bilgisini tutar. Sayfanın veya menü adımının okunabilir adıdır.
  • PageName: Breadcrumb öğesinin yönlendirme yaptığı sayfanın sistemdeki adını belirtir. Tıklama işlemlerinde ilgili sayfaya geçiş bu alan üzerinden sağlanır.
  • ParentId: Breadcrumb öğesinin bağlı olduğu üst menü kaydını ifade eder. Bu alan sayesinde sayfalar arasında hiyerarşik (üst–alt) ilişki kurulur ve breadcrumb zinciri oluşturulur.

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

DECLARE @HomeId UNIQUEIDENTIFIER = NEWID();
DECLARE @SettingsId UNIQUEIDENTIFIER = NEWID();
DECLARE @AccountId UNIQUEIDENTIFIER = NEWID();
DECLARE @ProfileId UNIQUEIDENTIFIER = NEWID();

-- Ana Sayfa
INSERT INTO BreadCrumbMenu (Id, IconName, Name, PageName, ParentId)
VALUES (
    @HomeId,
    'home',
    N'Ana Sayfa',
    'HomePage',
    NULL
);

-- Ayarlar
INSERT INTO BreadCrumbMenu (Id, IconName, Name, PageName, ParentId)
VALUES (
    @SettingsId,
    'settings',
    N'Ayarlar',
    'SettingsPage',
    @HomeId
);

-- Hesap
INSERT INTO BreadCrumbMenu (Id, IconName, Name, PageName, ParentId)
VALUES (
    @AccountId,
    'manage_accounts',
    N'Hesap',
    'AccountSettings',
    @SettingsId
);

-- Profil Bilgileri
INSERT INTO BreadCrumbMenu (Id, IconName, Name, PageName, ParentId)
VALUES (
    @ProfileId,
    'person',
    N'Profil Bilgileri',
    'ProfileDetails',
    @AccountId
);

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

• Verileri Sağlayan Aksiyon (GetBreadCrumbMenu):

SELECT * FROM BreadCrumbMenu;

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

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

‍

Adım 4 - Elementleri Ekleme ve Ayarlama

• Sol panelden Elements > Navigation > Breadcrumb elementini sayfaya sürükleyip bırakın.
  

• Breadcrumb elementinde kullanılacak aksiyonu Breadcrumb > Properties > Options > Action > GetBreadcrumb bağlayın ve aşağıdaki tanımlamaları yapın.

Adım 5 - Yeni Sayfaları Oluşturma

• Tüm sayfalar benzer yapıda olacak sadece isimleri farklı üç sayfa oluşturulacaktır. Sol yan panelden Screens alanına tıklayın.
• Breadcrumb’ın eklendiği HomePage sayfasının seçeneklerinden Duplicate seçeneğine tıklayın.
  

• Kopyalanan sayfanın adını “SettingsPage” olarak değiştirin.
  

• Benzer şekilde diğer “AccountSettings” ve“ProfileDetails” sayfalarını da “Duplicate” seçeneğine tıklayıp oluşturun.

• HomePage sayfasına tıklayın ve ana sayfa içerisine Elements > Navigation > Button elementini ekleyin. 
• Button elementinin adını Button > Properties > Label > “Profil Detayları Sayfası” olarak ayarlayın.
  

• Button elementine Button > Add Action > onClick > Navigation > Navigate aksiyonunu ekleyin.
  

• Navigate aksiyonunda ana sayfadan son sayfaya ilerleyip breadcrumb elementini deneyimleyebilmek için To Screen > AccountSettings sayfasını ekleyin.
  

Preview

Uygulama test edildiğinde, Ana Sayfa ekranında yer alan “Profil Detayları Sayfası” butonuna tıklanarak ilgili sayfaya geçiş yapıldığında, ekranın alt bölümünde breadcrumb elementi görüntülenir. Breadcrumb yapısının, tanımlanan ParentId hiyerarşisine göre Ana Sayfa / Ayarlar / Hesap / Profil Bilgileri sıralamasıyla oluşturulduğu gözlemlenir.

Bu yapı sayesinde kullanıcı, bulunduğu sayfanın uygulama içerisindeki konumunu net bir şekilde takip edebilir ve breadcrumb üzerindeki adımları kullanarak üst sayfalara kolayca geri dönüş sağlayabilir.

‍

4. Ortak Özellikler (Properties)

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

• Breadcrumb yapısını uygulamanın gerçek navigasyon hiyerarşisiyle birebir uyumlu olacak şekilde kurgulayın.
• Dinamik breadcrumb kullanıyorsanız, veri kaynağının her zaman güncel olduğundan emin olun.
• onChange tetikleyicisini yalnızca gerekli senaryolarda kullanarak gereksiz yönlendirme veya veri çağrılarından kaçının.

6. Kısıtlamalar

• Breadcrumb elementi yalnızca web uygulamalarında desteklenmektedir.