Ana içeriğe geç

2.1.3 Hvlng Framework Theme#

Eksen yazılım geliştirme altyapısı ön yüz (User Interface - UI) geliştirmek için kullanıcılarına angular tabanlı kütüphaneler sunmaktadır. Bu kütüphaneler angular ve PrimeNG 'nin son kararlı sürümleri ile uyumlu çalışması hedeflenerek geliştirilmektedir.

Theme paketi Eksen tarafından sağlanan 3 angular kütüphanesinden projeler için genel bir çatı sunan, hazır ekranlar ve bileşenler sağlayan pakettir.

Theme paketi sisteme giriş ile ilgili ekranlar (login, profil seçim, ikinci seviye doğrulama gibi), ana ekran, hata ekranları, kullanıcı kayıt ekranları, şifre işlemleri ile ilgili ekranlar ve yardım ekranı sağlar.

Ayrıca Theme paketi ekmek kırıntısı bileşeni, ana yerleşimle ilgili bileşenler (üst bar, alt bar, duyurular gibi) menü ve yükleniyor bileşeni gibi bileşenler sağlar. Ayrıca kullanıcı dostu yazdırma ile ilgili direktif sağlar.

Theme paketi Prime NG'nin default light temasının Eksen projeleri için özelleştirilmiş halini sunar. Bu özelleştirme bileşen görünümlerinde ve genel tema kurallarında bir takım değişiklikler içerir. Ayrıca bff, core ve theme paketleri ile sağlanan bileşenlerin görsel kuralları (scss kuralları) theme paketinde yer almaktadır.

Aşağıda sağlanan ekranlar ve bileşenler açıklanmıştır.

HvlLoginComponent#

Eksen ile geliştirilen projelerde kullanılmak üzere sunulmuş sisteme giriş ekranıdır.

Bu bileşen keysis ile uyumlu çalışacak şekilde geliştirilmiştir. Bu bileşenin kullandığı servisler BFF Security modülünde yer almaktadır.

Login ekranı çoklu dil desteğine sahiptir. Konfigürasyonda theme.language.supportedLanguages kısmında belirtilen diller için çoklu dil giriş desteği sağlanır.

Multi-tenant çalışacak projeler için giriş ekranı da multi-tenant girişi desteklemektedir. Giriş sırasında tenant seçimi sağlanmaktadır.

Giriş ekranında kullanıcı kayıt ekranına geçiş sağlanabilmektedir. Bu yeteneğin açılıp kapatılabilmesi Setting uygulaması üzerinden yapılabilmektedir. Bu sayede bu ayar dinamik olarak çalışma zamanında değiştirilebilir. Ayrıca kullanıcı kayıt ekranı ile ilgili konfigürasyon core.theme.register altında yer almaktadır. Kullanıcı kaydı için kvkk dosyası gösterimi ve kullanıcı kodu seçebilme gibi ayarlar bu konfigürasyonda yapılmaktadır.

Giriş ekranı farklı doğrulama yöntemlerini desteklemektedir. Bu yöntemler aşağıda açıklanmıştır:

  • Öntanımlı doğrulama yöntemi veritabanı üzerinden doğrulamadır. Bu yöntem kullanıcı kayıtlarının keysis veritabanında saklanıp doğrulama işleminin de bu kayıtlar üzerinden yapılmasını sağlandığı yöntemdir.
  • LDAP doğrulama yöntemi kullanıcı şifre eşleşmesinin keysis üzerinden bir ldap sunucuna yaptırıldığı yöntemdir. En bilinen LDAP sunucusu Microsoft Exchange Server'dır ve bir çok kurumda kullanılmaktadır. LDAP ile doğrulama yöntemi kullanıldığında kullanıcı hesabı yöntemi LDAP yöneticilerine devredilmiş olunur.
  • Kerberos doğrulama yöntemi desteklenen bir diğer kullanıcı doğrulama yöntemidir. Kerberos ile doğrulamada kullanıcı bilgileri kullanıcının kullandığı işletim sisteminden kerberos protokülü ile alınır. Bu yöntemde kullanıcı bilgisayarına giriş yaptığı kullanıcı kodu ile uygulamaya da giriş yapmış olur. Kullanıcıdan kullanıcı kodu şifre bilgisi istenmediği giriş sürecinin otomatik olduğu bu yöntem son kullanıcı için büyük kolaylık sağlamakla birlikte kritik uygulamalarda kullanımı sakıncalı olabilir. Özellikle kişisel bilgisayarların paylaşıldığı kurumlarda kullanımı sakıncalıdır. Kerberos doğrulama yöntemi yine Microsoft Exchange Server tarafından desteklenmektedir.

Geliştirilen proje birden fazla giriş yöntemini destekleyecek şekilde konfigüre edilebilir. Bu durumda giriş ekranında önce giriş yönteminin seçilmesi sağlanır.

Login ekranının Captcha desteği vardır. Bunun için konfigürasyonda core.security.captcha.enabled ayarı true verilmelidir. Ayrıca konfigürasyonda core.security.captcha altındaki captcha sağlayıcısı ile ilgili ayarlar ve diğer ayarlar da yapılmalıdır.

Login ekranı iki aşamalı doğrulamayı da desteklemektedir. E-Mail ve SMS üzerinden kod alarak iki aşamalı doğrulama yapılabilmektedir. İki aşamalı doğrulamanın konfigürasyonu keysis'te yapılmalıdır.

Login bileşenini projenizde kullanmak için ana modül routing konfigürasyonunda aşağıdaki gibi bir routing tanımı yapmanız yeterlidir. Oturum sonlanınca login ekranına yönlendirme işlemi BFF Core modülü Global Error Handler sınıfı tarafından ele alınmaktadır.

import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { HvlLoginComponent } from '@hvlng/framework-theme';

const routes: Routes = [
    ...
    { path: 'login', component: HvlLoginComponent },
    ...
]
@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
    providers: [],
})
export class AppRoutingModule {}

HvlMainComponent#

Bu bileşen Eksen projelerinde uygulamanın ana yerleşimini sağlayan bileşendir. Login'den sonra açılan bu ekran solda menü, üst'te üst bar, altta alt bar ve ortada uygulama ekranı gözükecek şekilde bir yerleşim düzeni sağlar. Ayrıca ortadaki uygulama ekranın üstünde ekmek kırıntısı (breadcrumb) bileşeni bulunur. Bu bileşen o an açık olan ekranın menüdeki yolunu gösterir.

Ekrandaki elemanların HvlMainComponent bileşenin sağladığı yerleşim düzeni ile ekrandaki yerleşimini gösteren örnek bir ekran görüntüsü aşağıda yer almaktadır.

HvlMainComponent bileşeni Eksen uygulamalarında ana yerleşim düzeni sağlayan tek bileşendir. Eğer bir proje farklı bir yerleşim düzeni tercih etmek isterse kendi yerleşim bileşenini geliştirmelidir.

AppComponent#

Bu bileşen Eksen projelerinde kullanılmak üzere sağlanmış root bileşendir.

Bu bileşen uygulama açılışnda BFF tarafından sağlanan güvenlikle ile igili servislerin ilklendirilmesini sağlar. Ayrıca giriş yapılan dile göre uygulama genelinde ilgili dilin kullanılmasını sağlar.

Bu bileşenin sağladığı bir diğer önemli yetenek ise sağdan sola dil (rtl) desteğidir. Giriş yapılan dil rtl bir dil ise ana yerleşimin ve bileşenlerdeki görünümün yatayda tersine dönmesini sağlar.

Yazdırma Desteği, HvlPrintDirective#

Theme modülü kullanıcı dostu yazdırma için HvlPrintDirective direktifini ve üstbar'da yazdırma butonunu sağlar. HvlPrintDirective direktifi geliştiricilere ekranda yazdırılabilir alan belirlemesini sağlarken yazdırma butonu da sadece istenilen alanın yazdırılması için yetenek sağlar. Bu özellikler menü, üstbar gibi yazıcı çıktısında gözükmesi istenmeyen alanların gizlenip sadece anlamlı kısımların çıktıda yer almasını sağlar.

Bu konu Kullanıcı Dostu Yazdırma kısmında detaylı olarak dökümante edilmiştir.

HvlTopbarComponent#

HvlTopbarComponent bileşeni ana ekranın üst kısmında yer alır ve arama, bildiriler, duyurular, oturum bilgileri, yazdırma, ve çoklu dil ile ilgili işlemleri sağlar. Bu bileşenin genel görünümü aşağıda yer almaktadır.

HvlTopbarComponent ilk olarak bir logo alanı sağlar. Buradaki logo .topbar-header-logo css sınıfı ile verilmiştir ve kullanan projeler bu kuralı ezerek kendi logolarını verebilirler.

Logo'dan sonra arama bar'ı yer almaktadır.

Arama barından sonra sırası ile bildirim ve duyurular, yazdırma, takvim ve sürüm bilgisi butonları yer almaktadır.

Bildirim ve duyurular butonu üzerinde kullanıcıya ait kaç adet bildirim olduğu gösterilir. Butonu tıklanınca da bildirimler ve duyurular görülebilir. Bildirimler Eksen Notification ürünü ile tam entegre çalışmaktadır.

Yazdırma butonu kullanıcı dostu yazdırma ile ilgili işlevler sunar ve Kullanıcı Dostu Yazdırma kısmında detaylı olarak açıklanmıştır. Takvim butonu kullanıcıya takvimi gösterir. Sürüm bilgisi butonu ise uygulamanın sürüm bilgisini gösterir.

En sağda ise oturum açmış kullanıcının bilgilerinin gösterildiği ve tıklandığında oturum ve kullanıcı ile ilgili işlevler sunan kısım yer alır. Bu kısımda kullanıcı uygulamanın dilini değiştirebilir, profil bilgilerini görebildiği ekranı açabilir, şifresini değiştrebilir, açık oturumların listesini görebilir ve sistemden çıkış yapabilir.

hvl-topbar İçin Custom Content Desteği#

hvl-topbar bileşeni artık iki farklı özel içerik alanını destekler:

  • topbarContent
  • userNameContent

Bu özellik, topbar alanının uygulamaya göre özelleştirilebilmesini sağlar.
Özellikle standart topbar içeriğine ek olarak:

  • solda/orta alanda özel aksiyonlar,
  • kullanıcı adı veya kimlik bilgisinin gösterimi,
  • IP adresi, ortam bilgisi, kurum bilgisi gibi ek metinler,
  • uygulamaya özel badge / icon / link grupları

gibi içerikleri kolayca yerleştirebilirsiniz.

Genel Kullanım#

hvl-topbar, Angular content projection mantığıyla çalışır.
Yani ilgili directive/attribute’u verilen içerikler, topbar içinde uygun alana taşınır.

Örnek#

<hvl-main>
  <hvl-topbar topbarContent>
    <span userNameContent>{{ personalIdentifier }} <br />{{ clientIp }}</span>
  </hvl-topbar>
</hvl-main>

Bu örnekte:

  • topbarContent ile topbar’a özel ana içerik alanı aktarılır.
  • userNameContent ile kullanıcı adı alanına özel içerik verilir.
  • personalIdentifier ve clientIp gibi bilgiler dinamik olarak gösterilebilir.

Kullanım Senaryoları#

1. Kullanıcı Bilgisi Gösterimi#

Topbar’da sadece kullanıcı adı değil, ek bilgi de gösterilmek isteniyorsa:

<hvl-topbar topbarContent>
  <div userNameContent class="user-info">
    <strong>{{ fullName }}</strong>
    <small>{{ department }}</small>
  </div>
</hvl-topbar>

2. Kimlik ve IP Bilgisi#

Operasyonel ekranlarda kullanıcı kimliği ve IP adresi göstermek için:

<hvl-topbar topbarContent>
  <span userNameContent>
    {{ personalIdentifier }} <br />
    {{ clientIp }}
  </span>
</hvl-topbar>

3. Ek Aksiyonlar ile Kullanım#

Topbar alanına aksiyon butonları veya shortcut’lar eklemek için:

<hvl-topbar topbarContent>
  <div class="topbar-actions">
    <button type="button" (click)="refreshPage()">Yenile</button>
    <button type="button" (click)="openHelp()">Yardım</button>
  </div>

  <span userNameContent>
    {{ userName }}
  </span>
</hvl-topbar>

topbarContent Nedir?#

topbarContent, hvl-topbar bileşeninin genel içerik alanını hedefler.

Bu alan:

  • topbar içine eklemek istediğiniz özel içeriklerin tamamı için kullanılabilir,
  • kullanıcıya özel metinler,
  • aksiyon butonları,
  • ek ikonlar,
  • status göstergeleri

gibi bileşenleri taşıyabilir.

Ne zaman kullanılır?#

Aşağıdaki durumlarda tercih edilir:

  • Topbar’a standart görünüm dışında eleman eklemek istiyorsanız.
  • Uygulamaya özel bir sağ/sol içerik yapısı kuracaksanız.
  • Topbar üzerindeki içerikleri projeye göre şekillendirecekseniz.

userNameContent Nedir?#

userNameContent, kullanıcı adı / kullanıcı bilgisi alanını özelleştirmek için kullanılır.

Bu alan, özellikle:

  • kullanıcı adı,
  • görüntülenecek kimlik bilgisi,
  • kısa profil bilgisi,
  • ikinci satırda ek açıklama

gibi verileri göstermek için idealdir.

Örnek Yapı#

<hvl-topbar topbarContent>
  <span userNameContent>
    John Doe <br />
    10.10.10.25
  </span>
</hvl-topbar>

Bu kullanımda kullanıcı adı birinci satırda, IP adresi ikinci satırda gösterilir.

Dikkat Edilmesi Gerekenler#

1. Attribute kullanımı önemlidir#

Özel içerik alanları tag adı ile değil, attribute/directive ile tanımlanır:

✅ Doğru: 

<span userNameContent>...</span>

❌ Yanlış: 

<userNameContent>...</userNameContent>

2. İçerik tamamen geliştirici sorumluluğundadır#

Projeye göre içerik yapısı belirlenebilir.
Bu nedenle:

  • CSS sınıfları,
  • responsive yapı,
  • metin kısaltma,
  • çok satırlı görünüm

gibi konular geliştirici implementasyonuna bağlıdır.

3. Dinamik veri bağlayabilirsiniz#

Sadece sabit metin değil, component içinden gelen değişkenler de gösterilebilir.

<hvl-topbar topbarContent>
  <span userNameContent>
    {{ userDisplayName }} <br />
    {{ sessionInfo }}
  </span>
</hvl-topbar>

Önerilen Kullanım Desenleri#

Basit kullanıcı bilgisi#

<hvl-topbar topbarContent>
  <span userNameContent>{{ userName }}</span>
</hvl-topbar>

Çok satırlı kullanıcı bilgisi#

<hvl-topbar topbarContent>
  <div userNameContent class="user-meta">
    <span>{{ personalIdentifier }}</span>
    <br />
    <span>{{ clientIp }}</span>
  </div>
</hvl-topbar>

Icon + metin kombinasyonu#

<hvl-topbar topbarContent>
  <div userNameContent class="d-flex align-items-center gap-2">
    <i class="pi pi-user"></i>
    <span>{{ userName }}</span>
  </div>
</hvl-topbar>

Topbar Görünürlük Yapılandırması (Geliştirici Kılavuzu V2)#

Bu doküman, config.json içerisindeki toolbarIcons konfigürasyonunun ne işe yaradığını, yeni eklenen özelliklerini ve geliştiricilerin bu değişkenleri yönetirken dikkat etmesi gereken kritik senaryoları açıklamaktadır.

Yapılandırma Şeması#

Ortam (environment) dosyalarında veya config.json içerisinde yer alan en güncel görünürlük yapılandırma şeması aşağıdaki gibidir:

config.json
"toolbarIcons": {
    "showCalendarButtonOnToolbar": true,
    "showSettingButtonOnToolbar": true,
    "showInfoButtonOnToolbar": true,
    "showPrintButtonOnToolbar": true,
    "showProfileMenuOnToolbar": true,
    "showProfileMenuItemsOnToolbar": {
        "showProfileMenuItem": false,
        "showLanguageChangeMenuItem": false,
        "showLogoutMenuItem": false,
        "showSettingMenuItem": false
    }
}

showPrintButtonOnToolbar

showPrintButtonOnToolbar değişkeni core->printing altından theme->topbarIcon altına taşınmıştır.

showTopbarProfileMenu

showTopbarProfileMenu değişkeni core->theme->showTopbarProfileMenu altından core->theme->topbarIcon->showProfileMenuItemsOnToolbar->showProfileMenuItem altına isim değişikliği ile birlikte taşınmıştır.

Ortam Değişkenleri Ne İşe Yarar?#

Bu boolean (true/false) değişkenler, uygulamanın çalıştığı ortama veya müşteri gereksinimlerine göre üst bilgi çubuğundaki (topbar) elementlerin HTML üzerinde render edilip edilmeyeceğini kontrol eder.

1. Ana Toolbar İkonları#

Doğrudan üst çubukta yer alan bağımsız ikonları yönetir:

  • showCalendarButtonOnToolbar: Takvim modülüne giden kısayol ikonunu (date_range) görünür kılar.
  • showSettingButtonOnToolbar: Genel uygulama ayarlarına (hvl-config) giden ana çark ikonunu açar.
  • showInfoButtonOnToolbar: Uygulama sürüm bilgisini açan info-circle ikonunu görünür kılar.
  • showPrintButtonOnToolbar: Ekrandaki mevcut içeriği yazdırmak için kullanılan yazıcı (print) ikonunu ve alt menülerini aktif eder.
  • showProfileMenuOnToolbar: Sağ üstteki ana kullanıcı profil alanının (avatar ve isim) tamamını gizlemek veya göstermek için kullanılan ana şalterdir.

2. Profil Menüsü Öğeleri (showProfileMenuItemsOnToolbar)#

showProfileMenuOnToolbar değeri true olduğu durumda, kullanıcı avatarına tıklandığında aşağıya doğru açılan (dropdown) menünün içerisindeki alt bağlantıları yönetir:

  • showProfileMenuItem: Kullanıcının kendi profil detaylarına, şifre değiştirme veya vekalet atama ekranlarına gitmesini sağlayan bağlantıyı açar.
  • showLanguageChangeMenuItem: Sistem dilini değiştirmek için kullanılan bayraklı menüyü aktif eder.
  • showSettingMenuItem: Profil açılır menüsü listesinde yer alan kişisel ayarlar kısayolunu açar.
  • showLogoutMenuItem: Sistemden güvenli çıkış (logout) butonunu görünür kılar.

Beraber Kullanımda Dikkat Edilmesi Gerekenler#

Geliştiricilerin bu flag'leri konfigüre ederken aşağıdaki senaryolara dikkat etmesi gerekir:

Önemli: Varsayılan Davranış (Fallback Render)

Uygulama, "gösterim öncelikli" bir yaklaşımla tasarlanmıştır. Eğer ortam değişkenleri içerisinde toolbarIcons objesi hiç oluşturulmazsa veya bazı alt değişkenler eksik bırakılırsa, ilgili HTML elementleri için render işlemi yine de gerçekleşecektir (sistem eksik değerleri true kabul eder). Bu yapı, yeni bir ortam ayağa kaldırılırken veya konfigürasyon atlanıldığında menülerin kırılmasını veya kaybolmasını engeller.

Profil Menüsü Hiyerarşisi (Ana Şalter)

showProfileMenuOnToolbar değişkeni bir ana şalter görevi görür. Eğer bu değişken false yapılırsa, HTML'deki kapsayıcı element tamamen gizlenir. Bu durumda, showProfileMenuItemsOnToolbar içerisindeki alt değişkenlerin (dil, çıkış vb.) true olmasının hiçbir etkisi kalmaz; profil alanı bütünüyle ortadan kalkar.

Boş Açılır Menü (Empty Dropdown) Sorunu

Eğer ana şalter (showProfileMenuOnToolbar) açık (true) bırakılıp, altındaki tüm öğeler (profil, dil, ayarlar, çıkış) false olarak ayarlanırsa, kullanıcının avatarına tıklandığında içi boş bir beyaz kutu açılacaktır. Eğer tüm alt menüler gizlenecekse, showProfileMenuOnToolbar değişkeninin de false yapılması veya HTML şablonunda boş menü açılışının engellenmesi gerekir.

İki Farklı 'Ayarlar' Butonu Çakışması

showSettingButtonOnToolbar (Ana topbardaki çark) ile showSettingMenuItem (Profil içindeki ayarlar) birbirinden bağımsızdır. Mükerrer bir kullanıcı deneyimi yaratmamak adına, aynı ayar sayfasına gidiliyorsa ikisinin birden true bırakılmaması, projeye uygun olan sadece birinin tercih edilmesi önerilir.

HvlLoaderComponent#

HvlLoaderComponent bileşeni asenkron bir işlem yapılırken işlemin devam ettiğini belirten 'yükleniyor' durumunu kullanıcıya yansıtmak için geliştirilmiş bir bileşendir. Bu bileşen HvlLoaderService servis ile entegre çalışır. HvlLoaderService'in show yada hide değerine göre kullanıcıya 'yükleniyor' görseli gösterilir yada gizlenir. HvlLoaderService'in kullanımı BFF Core kısmında örneklenmiştir.

HvlVerificationComponent#

İkinci seviye kullanıcı doğrulama işini yapan bileşendir. Kullanıcı ilk seviye doğrumayı (genellikle kullanıcı kodu / şifre doğrulaması) geçtikten sonra SMS yada E-Mail ile gönderilen kodu alarak kullanıcının ikinci seviye doğrulamasını yapar.

Tamamen keysis ile entegre çalışır. HvlLoginComponent bileşeninde belirtildiği gibi doğrulama ile konfigürasyon keysis'te yapılmalıdır.

HvlMenuComponent#

Keysis ürünü ile entegre bir şekilde kullanıcının yetkisi olduğu menüleri gösteren bileşendir. HvlMainComponent bileşini entegre çalışır. Menüden seçilen ekran HvlMainComponent'te uygulama ekranı için ayrılmış alana açılır.

Menü içinde arama özelliği vardır, kullanıcılar yetkisi olduğu menü ağacı içinde arama yabilir.

Ayrıca kullanıcının sık kullandığı menüleri fovori olarak seçip bunları favori menü altında saklayıp düzenlemesine olanak sağlar.

Menü öğeleri ile ilgili backend uçları ile işlem yapılmasını sağlayan HvlMenuItemRestService servisi de aynı paket içerisinde yer alır.

HvlUserActiveProfile#

Kullanıcının aktif profilindeki son giriş kayıtlarını gösteren sayfadır. Bu sayfaya HvlTopbarComponent bilenindeki Profil adımından erişilir.

HvlRegistrationComponent#

Son kullanıcıya yönelik kullanıcı kayıt ekranıdır. Setting ürünü üzerinden aktif/pasif edilebilir. Bu sayede kullanıcıların sisteme kayıt olabilmesi dinamik olarak açılıp kapatılabilir.

Kvkk metni konfigürasyonda theme.register.kvkkFilePath adresinden alınır ve kullanıcıdan kvkk metnini onaylaması istenir.

Kullanıcı kayıt sürecinin tamamı proje tarafından ele alınmalıdır. Email bilgisi alınan kullanıcı kvkk onayından sonra keysis üzerinden kayıt süreci başlatılır. Kullanıcı mail adresine gelen doğrulama sürecini tamamladıktan sonra süreç uygulamada devam ettirilir. Bu ekran ilk kayıt işleminin yapıldığı ekrandır kalan süreç bu ekran tarafında ele alınmaz.

Breadcrumb#

Uygulama içerisinde, kullanıcının nerede olduğunu, anasayfaya uzaklığını hiyerarşik olarak görüntülemesine yardımcı olan custom componenttir.

Genel Bakış#

HvlBreadcrumbComponent ile iki farklı kaynaktan breadcrumb oluşturabilir:

  1. Menü Yapısından: Uygulama menüsünde tanımlı route'lar için otomatik olarak hiyerarşik breadcrumb oluşturur.
  2. Route Data'dan: Menüde bulunmayan ancak routing'te tanımlı sayfalar için data.breadcrumb property'sini kullanır. Eğer routing'in ata route'u varsa ve bu route'un menü'de karşılığı varsa o zaman hibrit bir yapı sunar.

Örneğin:

Kaynak Path Breadcrumb
Sadece Menü /keysis/lookup Home / KEYSIS / Genel Ayarlar / Parametre İşlemleri
Sadece Route /deneme routing değerinde kullanılan data.breadcrumb
Hibrit /keysis/lookup/list-for-admin Home / KEYSIS / Genel Ayarlar / Parametre İşlemleri /

Yapılandırma#

Route Data ile Breadcrumb Tanımlama#

Menüde bulunmayan sayfalar için route tanımlarında data.breadcrumb property'sini kullanın:

const routes: Routes = [
    {
        path: 'products',
        data: {
            breadcrumb: 'breadcrumb.products' // Translation key
        },
        children: [
            {
                path: ':id',
                component: ProductDetailComponent,
                data: {
                    breadcrumb: 'breadcrumb.product-detail'
                }
            },
            {
                path: ':id/edit',
                component: ProductEditComponent,
                data: {
                    breadcrumb: 'breadcrumb.product-edit'
                }
            }
        ]
    }
];

💡 Bilgi: Breadcrumb label'ları için breadcrumb. prefix'i ile başlayan translation key'leri kullanmanız önerilir.

Translation Dosyaları#

Translation dosyalarınıza breadcrumb key'lerini ekleyin:

**Türkçe (tr.json) :örnek ** 

{
    "breadcrumb": {
        "home": "Ana Sayfa",
        "products": "Ürünler",
        "product-detail": "Ürün Detayı",
        "product-edit": "Ürün Düzenle",
        "users": "Kullanıcılar",
        "profile": "Profil",
        "settings": "Ayarlar"
    }
}

Otomatik Breadcrumb Oluşturma#

Kaynak Öncelik Açıklama
Menü Yapısı 1 (Yüksek) Menüde tanımlı route'lar için hiyerarşik yapı kullanılır.
Route Data 2 (Düşük) Menüde bulunamayan route'lar için data.breadcrumb kullanılır.

Çoklu Dil Desteği#

Tüm breadcrumb label'ları @ngx-translate ile çevrilir. Dil değişikliğinde otomatik güncellenir.

Idle#

Idle component, kullanıcının belirli süre içerisinde herhangi bir işlem yapmaması durumunda oturumunun sonlanmasını sağlatan, servis ve componentten oluşan tema özelliğidir. Süre değeri konfigüratif olup, core->theme->idleDuration değeriyle belirlenebilir.

 "idleDuration": {
            "enabled": false,
            "first": 10,
            "second": 60
        },

-enabled: idle özelliğinin aktif/pasifliğini belirleyen ayardır.
-first: ms türünden bir sayaç olup, duration aktif iken, kullanıcı oturum açmış ve bulunduğu ekranda herhangi bir hareket içerisinde değilse ,idle uyarı componentinin devreye gireceği süreyi belirler. -second: ms türünden bir sayaç olup, idle uyarı componentinin ekranda ne kadar kalacağını belirleyen ayardır. bu aralıkta kullanıcıya devam/çıkış seçeneği sunar. Devam etmesi durumunda token refresh edilir. Çıkış veya bu süre dahilinde herhangi bir aksiyon almadığı senaryoda kullanıcı oturumu sonlandırılır.

Favorite#

Menü üzerinden açılan uygulama ekranlarının, kişiye özel menü favori listesine eklenmesini sağlatan directive ve servislerden oluşan tema özelliğidir.

Favoriye alınan sayfa kişiye özel olup kalıcıdır. Uygulamaya tekrar giriş yapıldığında favori kayıtlar yüklenir. İstenildiği taktirde 2 yöntemle favori listesinden çıkartılabilir.

  1. iconu üzerine basılarak deavtive hale getirilir ve sayfa favori kayıtlardan çıkartılabilir.
  2. Favorilerim sayfasında, favori listesindeki kayıt üstüne gelindiğinde "-" işaretine basılarak sayfa favori kayıtlardan çıkartılabilir.

Help Portal#

Help portal custom bir component olup, uygulama üzerinden hvlng/framework-bff tarafından sunulan servis ve modellerin kullanılarak yardım sayfasının dialog üzerinden görüntülenmesini sağlar.

Örnek kullanım için buraya bakabilirsiniz.