Flex Grid elementi, içerikleri esnek bir ızgara yapısı içinde düzenlemenizi sağlar. Bu senaryoda kullanıcıya ait beceri etiketleri (skills) yatay/dikey esnek düzenle sergilenmektedir.

Kullanım Alanları

• Kullanıcı profillerinde beceri/etiket gösterimi,
• Blog yazılarında etiket listeleri,
• Ürün özellikleri veya kategori etiketleri,
• Dinamik rozet/badge sunumları vb.

Flex Grid elementi web ve mobil uygulamalarda desteklenir.

Kullanıcı Becerileri Senaryosu

Bir profil uygulamasında, kullanıcıya ait beceriler Flex Grid içerisinde renkli etiketler halinde gösterilir.

• Profil kartında kullanıcının adı ve açıklaması yer alır.
• Alt bölümde, eğitim süresince kazanılan beceriler renkli badgeler olarak listelenir.
• Flex Grid, etiketleri yan yana ve gerektiğinde satır kırılarak düzenler.

Veri Kaynağı Bağlama

• Datasources modülüne gidin.
• Tables başlığı yanındaki + ikonuna tıklayın ve tabloya UserSkills adını verin.
• Aşağıdaki tabloyu oluşturun. 

• Ardından SQL Actions’a tıklayın ve aksiyona UserSkills ismini verin. C# ile de oluşturabilirsiniz.
• Aşağıdaki SQL komutunu girin. 

SELECT NEWID() AS Id, 'John Doe' AS UserName,        'Here are the skills I have obtained during my education' AS Description,        'Lorem' AS Skill, '#FF6B6B' AS ColorHexUNION ALLSELECT NEWID(), 'John Doe', 'Here are the skills I have obtained during my education', 'Ipsum', '#FFD93D'UNION ALLSELECT NEWID(), 'John Doe', 'Here are the skills I have obtained during my education', 'Dolor', '#6BCB77'UNION ALLSELECT NEWID(), 'John Doe', 'Here are the skills I have obtained during my education', 'Sit', '#4D96FF';

UI Design Modülü işlemleri

• Uygulama ekranında sağ kenarda bulunan Add Action butonuna tıklayın. 
• Ardından Custom > UserSkills’i seçin. 

Özelliklerin Senaryo Bağlamında Kullanılması

• No Data Found Message
  
  • Açıklama: Veri kaynağında skill bulunmadığında gösterilecek mesaj.
  • Kullanım: “Henüz beceri eklenmedi.”
• Data Source
  
  • Açıklama: Flex Grid içinde gösterilecek beceri listesinin kaynağı.
  • Kullanım: UserSkills tablosu.
• Show No Data Found Image
  
  • Açıklama: Veri olmadığında yedek görsel gösterir.
  • Kullanım: Boş profil ikonu eklenebilir.

Senaryo Adımı Tamamlandığında

• Kullanıcı adı ve açıklaması üstte gösterilir.
• Flex Grid içinde Lorem, Ipsum, Dolor, Sit… gibi beceri etiketleri renkli badge formatında listelenir.
• Mobilde etiketler satır kırılarak düzenlenir, masaüstünde daha fazla etiket aynı satıra sığar.

Kısıtlamalar

• Çok uzun skill isimlerinde etiketlerin taşması olabilir.
• Çok sayıda skill olduğunda mobil ekranlarda okunabilirlik azalabilir.
• Renk kontrastı doğru ayarlanmazsa erişilebilirlik düşer.

İpuçları ve Best Practices

• Skill etiketlerinde dinamik renkler kullanarak görsel çeşitlilik sağlayın.
• Uzun etiketlerde kısaltma veya tooltip ile destekleyin.
• Kullanıcı adı ve açıklamayı sabit, etiketleri esnek tasarlayın.
• “No Data Found Message” ve yedek görsel mutlaka eklenmeli.
• Mobil uyum için etiketlerin auto-wrap özelliğini test edin.