Navigate

Navigate Aksiyonunun Projeye Eklenmesi

1. Kuika platformuna giriş yapın ve Apps ekranından üzerinde çalışacağınız projeyi seçin.
2. UI Design modülünde ilgili elementi seçerek Properties panelini açın.
3. + ADD ACTION açılır menüsüne tıklayın.

4. Initial Actions, OnClick, OnBlur gibi uygun bir tetikleyici eylem(event) seçin  → Navigation → Navigate seçeneğini ekleyin.
   
   

Navigate Aksiyonunun Yapılandırılması

Açılan menüde, aşağıdaki alanları yapılandırabilirsiniz:

‍

• To Screen
  
  • Tip: String
  • Zorunluluk: Evet
  • Açıklama: Kullanıcının yönlendirileceği hedef ekranın adıdır.
  • Input: Örneğin, "OrderDetailsScreen" gibi ekran adı metni girilir.Bu alana öncelikli olarak Action Result gibi veri kaynaklarından veri aktarılabilir. Ayrıca Method Input, Current, Screen Input, Fixed veya Component gibi farklı kaynaklar da kullanılabilir. Bu kategoriler Symbol Picker üzerinden seçilerek tanımlanabilir. 

• Open As
  
  • Tip: Enum
  • Zorunluluk: Evet
  • Açıklama: Ekranın nasıl açılacağını belirtir (tek bir seçenek seçilmelidir).
  • Input: Örneğin, 
    
    • "Current Page"
    • "New Tab"
    • "Drawer"
    • "Modal"
    • Bu alana öncelikli olarak Action Result gibi veri kaynaklarından veri aktarılabilir. Ayrıca Method Input, Current, Screen Input, Fixed veya Component gibi farklı kaynaklar da kullanılabilir. Bu kategoriler Symbol Picker üzerinden seçilerek tanımlanabilir. 

• Current Page
  
  • Tip: Boolean
  • Zorunluluk: Evet
  • Açıklama: Seçilen ekran mevcut sayfanın üzerine mi açılsın?
  • Input: Örneğin, true ya da false.Bu alana öncelikli olarak Action Result gibi veri kaynaklarından veri aktarılabilir. Ayrıca Method Input, Current, Screen Input, Fixed veya Component gibi farklı kaynaklar da kullanılabilir. Bu kategoriler Symbol Picker üzerinden seçilerek tanımlanabilir. 

• New Tab
  
  • Tip: Boolean
  • Zorunluluk: Evet
  • Açıklama: Yönlendirme yeni sekmede mi açılsın?
  • Input: Örneğin, true ya da false. Bu alana öncelikli olarak Action Result gibi veri kaynaklarından veri aktarılabilir. Ayrıca Method Input, Current, Screen Input, Fixed veya Component gibi farklı kaynaklar da kullanılabilir. Bu kategoriler Symbol Picker üzerinden seçilerek tanımlanabilir. 

• Drawer
  
  • Tip: Boolean
  • Zorunluluk: Evet
  • Açıklama: Ekran bir yan panel (drawer) olarak mı açılsın?
  • Input: Örneğin, true ya da false. Bu alana öncelikli olarak Action Result gibi veri kaynaklarından veri aktarılabilir. Ayrıca Method Input, Current, Screen Input, Fixed veya Component gibi farklı kaynaklar da kullanılabilir. Bu kategoriler Symbol Picker üzerinden seçilerek tanımlanabilir. 

• Modal
  
  • Tip: Boolean
  • Zorunluluk: Evet
  • Açıklama: Ekran bir modal (açılır pencere) olarak mı açılsın?
  • Input: Örneğin,  true ya da false. Bu alana öncelikli olarak Action Result gibi veri kaynaklarından veri aktarılabilir. Ayrıca Method Input, Current, Screen Input, Fixed veya Component gibi farklı kaynaklar da kullanılabilir. Bu kategoriler Symbol Picker üzerinden seçilerek tanımlanabilir. 

• Placement
  
  • Tip: String
  • Zorunluluk: Opsiyonel
  • Açıklama: Drawer’ın konumu.
  • Input: Örneğin, 
    
    • "Top"
    • "Right"
    • "Bottom"
    • "Left"
    • Bu alana öncelikli olarak Action Result gibi veri kaynaklarından veri aktarılabilir. Ayrıca Method Input, Current, Screen Input, Fixed veya Component gibi farklı kaynaklar da kullanılabilir. Bu kategoriler Symbol Picker üzerinden seçilerek tanımlanabilir. 

• Width
  
  • Tip: String
  • Zorunluluk: Opsiyonel
  • Açıklama: Drawer veya modal genişliği.
  • Input: Örneğin, "400px", "80%", "60vw" gibi değerler girilebilir.Bu alana öncelikli olarak Action Result gibi veri kaynaklarından veri aktarılabilir. Ayrıca Method Input, Current, Screen Input, Fixed veya Component gibi farklı kaynaklar da kullanılabilir. Bu kategoriler Symbol Picker üzerinden seçilerek tanımlanabilir. 

• Height
  
  • Tip: String
  • Zorunluluk: Opsiyonel
  • Açıklama: Drawer veya modal yüksekliği.
  • Input: Örneğin, "300px", "90%", "70vh" gibi değerler girilebilir. Bu alana öncelikli olarak Action Result gibi veri kaynaklarından veri aktarılabilir. Ayrıca Method Input, Current, Screen Input, Fixed veya Component gibi farklı kaynaklar da kullanılabilir. Bu kategoriler Symbol Picker üzerinden seçilerek tanımlanabilir. 

• Closable
  
  • Tip: Boolean
  • Zorunluluk: Opsiyonel
  • Açıklama: Modal pencerenin kullanıcı tarafından kapatılabilir olup olmadığını belirtir.
  • Input: Örneğin, true ya da false.Bu alana öncelikli olarak Action Result gibi veri kaynaklarından veri aktarılabilir. Ayrıca Method Input, Current, Screen Input, Fixed veya Component gibi farklı kaynaklar da kullanılabilir. Bu kategoriler Symbol Picker üzerinden seçilerek tanımlanabilir. 

• Execute Page Init Actions After Closed
  
  • Tip: Boolean
  • Zorunluluk: Opsiyonel
  • Açıklama: Bu seçenek, mevcut sayfa kapandıktan sonra açılacak sayfada, o sayfanın başlangıçta otomatik olarak çalışması gereken aksiyonların tetiklenip tetiklenmeyeceğini belirler.‍
  • Input: Örneğin, true ya da false. Bu alana öncelikli olarak Action Result gibi veri kaynaklarından veri aktarılabilir. Ayrıca Method Input, Current, Screen Input, Fixed veya Component gibi farklı kaynaklar da kullanılabilir. Bu kategoriler Symbol Picker üzerinden seçilerek tanımlanabilir.

Kullanıcı bir ürün satın alma formunu doldurur ve satın alma işlemini tamamladığında “Teşekkürler” sayfasına yönlendirilir. 

1. Satın Alma Formu Butonuna Aksiyon Ekleme
   
   • UI Design modülüne girin. 
   • Sol kenardaki Elements paneline gidin. 
   • Button elementini sürükleyip bırakın.

•  Properties paneli Label başlığı altından “Satın Alma Talebi Oluştur” metnini girin. 
• Ardından Screens Paneline geçiş yapın. 
• + ikonundan New Screen seçeneğini seçin. 

• Açılan modaldan ekrana “Thank You Page” ismini verin. 
• Ardından ana sayfaya geri dönün. 

• Satın al butonunu seçin ve + ADD ACTION menüsünden OnClick → Navigation → Navigate aksiyonu ekleyin.

2. Navigate Aksiyonunu Yapılandırma 

‍

• To Screen: Thank You Page ekranını seçin. 
• Open As: Modal olarak ayarlayın. Kullanıcı aynı sayfada kalsın ama tamamladığını görsün.
• Modal Width/Height: 500 px genişlik, 300 px yükseklik ayarlayın.
• Closable: Anahtarı açın (kullanıcı isterse modalı kapatabilsin).
• Execute Page Init Actions After Closed: Anahtarı kapatın (kapatıldığında ekstra bir işlem yapılmayacak). 

Böylece kullanıcı ödeme yaptıktan sonra teşekkür mesajını görebilir. Modal kapatıldığında kullanıcı ürün listesindeki ekranında kalır. Eğer kullanıcı, ekran kapatıldığında sipariş detayına yönlendirilsin isteniyorsa ikinci bir Navigate aksiyonu daha eklenebilir. 

‍

• Dinamik Yönlendirme: Kullanıcının rolü, durumu ya da formda girilen verilere göre farklı sayfalara yönlendirme yapılabilir.
• Veri Aktarımı: Navigate aksiyonu ile birlikte Screen Input kullanılarak bir ekrandan diğerine veri taşınabilir.
• Sayfa Başlatma Aksiyonları: Yeni açılan sayfa yüklendiğinde belirli işlemler (örn. veri sorgulama) otomatik olarak başlatılabilir.
• Drawer & Modal Kontrolleri: Drawer veya modal olarak açılacak sayfalarda boyut, konum ve davranış özelleştirilebilir.

Teknik Riskler ve Önlemler

• Geçersiz Ekran Adı: Yönlendirme yapılacak ekran silinmiş veya tanımsızsa hata oluşur. Ekran adının geçerli olduğundan emin olun.
• Yetkisiz Erişim: Yönlendirme yapılan ekran, kullanıcının yetkisi dışında olabilir. Authorization kontrolleriyle erişim yönetilmelidir.
• Veri Kayıpları: Ekranlar arası geçişte veri kaybı yaşanmaması için gerekli input bağlamaları doğru yapılmalıdır.

Navigate aksiyonu, kullanıcıların uygulama içinde sezgisel ve yönlendirilmiş bir deneyim yaşamasını sağlar. Farklı ekranlar arasında geçişi kolaylaştırırken, aynı zamanda veri aktarımı ve kullanıcıya özel iş akışları oluşturmada kritik rol oynar. Modal, Drawer, yeni sekme veya aynı sayfa üzerinde esnek yönlendirme seçenekleri ile Kuika projelerinde kullanıcı deneyimini geliştiren güçlü bir araçtır.