OutSystems’te Alt Menü Oluşturmak

Tasarladığınız sitelerin/uygulamaların kullanıcılar tarafından anlaşılır yapıya sahip olması, yaptığınız işin önemli bir parçasıdır. Kullanıcılar tarafından rahat anlaşılabilir yapıya sahip olan tasarımları oluşturmak için menü’lere dikkat etmemiz gerekmektedir. Kullanıcıların istediği bilgilere erişebilmesini sağlamak için ilgili başlıkları tek bir başlık altında toplamak sitelerin/uygulamaların anlaşılabilirliğini ve kullanılabilirliğini arttıracaktır.

Service Studio’da alt menüleri tek bir menü başlığı altında birleştirmek için hızlandırıcı mevcuttur. Tasarımlarınızı Reactive Web App’de yaptığınız takdirde, Submenu UI kolaylıkla erişebilir ve kullanabilirsiniz.

Submenu UI kullanmanız için takip etmeniz gereken birkaç adım vardır. UI doğru alana yerleştirmeniz oldukça önemlidir. Herhangi bir karışıklık olmasını önlemek için Interface penceresinde bulunan ve “Common” seçeneğinin altında yer alan “Menu” kısmına tıklayınız:

UI doğru alana yerleştirdiğinizden emin olmak için ilgili seçeneğin “Widget Tree” penceresini açınız:

Bu adımları tamamladıktan son Toolbox’ın arama kısmında Submenu UI aratınız:

Submenu UI Widget Tree kısmında bulunan “nav” seçeneğinin içine sürükleyip bırakınız:

Bu adımı tamamladıktan sonra “Errors found” uyarısı alacaksınız. İlerleyen adımları tamamladıktan sonra uyarı kalkacaktır.

Bir önceki adımları tamamladıktan sonra MainFlow seçeneğinin içinde bulunan ve alt menü olarak eklemek istediğiniz ekranları tek tek seçerek gösterilen alana yerleştiriniz:

Karşılaştığımız hata uyarısını kaldırmak için Menu seçeneğinin Widget Tree kısmına tıklayınız. Daha sonra Submenu UI’nın içinde bulunan “Items” seçeneğine tıklayarak Link kısmını siliniz. Bu kısma kendi oluşturduğumuz ve alt menü olarak belirlediğimiz ekranların linklerinin eklenmesi gerekmektedir. Bahsedilen kısmı sildikten sonra hata uyarısı kaldırılacaktır:

Belirtilen adımları tamamladıktan sonra “Page Link” kısmında bulunan linkleri boş kalan alana tek tek sürükleyerek yerleştiriniz:

Son olarak yerleştirme adımını tamamladıktan sonra ekranınızın aşağıdaki şekilde görülmesi gerekmektedir:

Tüm adımları tamamladıktan sonra “Publish” butonuna tıklayınız. Ardından “Open in Browser” butonuna tıklayınız. Ekranınızı açtığınızda, siz alt menüden seçeneklere tıkladıkça ekranlar buna uygun olarak değişecektir: