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. 
• FloatPanel
  
  • Tip: Boolean
  • Zorunluluk: Evet
  • Açıklama: Ekran bir float panel (sayfanın üzerinde kayan panel) 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 (Boolean): Navigate ile açılan sayfa kapatıldığında, yönlendirilen sayfanın başlangıç (init) aksiyonlarının çalıştırılıp çalıştırılmayacağını belirler.
  
  • true: Sayfa kapandıktan sonra init aksiyonları çalıştırılır.
  • false: Sayfa kapandıktan sonra hiçbir init aksiyonu çalıştırılmaz.
  • Bu parametre false ise, "Disable Smart Execute Page Init" ayarının bir etkisi olmaz.
• Disable Smart Execute Page Init (Boolean): Execute Page Init Actions After Closed = true ise geçerlidir. Sadece web uygulamalara kullanılabilir.
  
  • false: Yalnızca yönlendirilen sayfada bir backend isteği yapılmadıysa geri dönüldüğünde init çalışmaz.
  • true: Yönlendirilen sayfada backend isteği yapılmış olsun veya olmasın, geri dönüldüğünde init aksiyonu her durumda çalışır.
  • Bu ayar, sadece Execute Page Init Actions After Closed = true olduğunda anlamlıdır.

Tüm parametreler; Action Result, Method Input, Current, Screen Input, Fixed veya Component kaynaklarından alınabilir. Bu kaynaklara Symbol Picker üzerinden erişilerek bağlama yapılabilir.

Senaryo: Kullanıcı bir ürün siparişi oluşturur. İşlem tamamlandığında, bir teşekkür mesajı içeren modal ekran açılır.

Yapılandırma Adımları:

1. UI Design modülünde Button elementi eklenir → “Satın Al” etiketi verilir.
2. +ADD ACTION → OnClick → Navigate seçilir.
3. To Screen: ThankYouPage
4. Open As: Modal
5. Width / Height: "500px" / "300px"
6. Closable: true
7. Execute Page Init Actions After Closed: false

Kullanıcı, modal ekran kapandığında mevcut listede kalır. Ekstra bir yönlendirme istenirse ikinci bir Navigate aksiyonu tanımlanabilir.

Navigate Aksiyonunun Yapılandırılması

Gerekli Parametreler

• To Screen (String):Yönlendirme yapılacak hedef ekranın adıdır.  Örnek: "ThankYouPage"
• Open As: Ekranın nasıl açılacağını belirtir. Aşağıdaki seçeneklerden biri seçilmelidir:
  
  • Current Page:Hedef ekran mevcut tarayıcı penceresinde veya uygulama içinde açık olan sayfanın yerini alarak yüklenir. Yani sayfa tamamen değişir.
  • New Tab: Hedef ekran, yeni bir tarayıcı sekmesinde açılır. Kullanıcı mevcut sayfayı kapatmadan yeni sayfayı ayrı bir sekmede görüntüler.
  • Drawer: Hedef ekran, uygulama içinde ekranın yan tarafından kayan bir panel şeklinde açılır. Genellikle yan menü veya ek seçenekler için kullanılır.
  • Modal: Hedef ekran, mevcut ekranın üzerine kayan, odaklanmayı sağlayan açılır pencere (popup) olarak gösterilir. Kullanıcı modal kapatmadan ana ekranla etkileşimde bulunamaz.
  • Float Panel: Hedef ekran, sayfa üzerinde serbestçe hareket eden ve genellikle kullanıcı tarafından taşınabilen küçük bir pencere şeklinde açılır. Modal’a benzer, ancak daha esnek bir görünüm sağlar.
    
    • HideCloseButton: Bu özellik aktif edildiğinde, Float Panel üzerinde yer alan kapatma (X) butonu gizlenir. Böylece panelin kapanma davranışı tamamen geliştiricinin belirleyeceği aksiyonlara bırakılabilir (örneğin bir buton veya dış alan tıklaması ile).

Opsiyonel Parametreler

• Placement (String): Drawer ekranın hangi yönden açılacağını belirtir. Örnek: "Right"
• Width (String): Drawer veya modal pencerenin genişliğini belirler. Örnek: "400px" veya "80%"
• Height (String): Drawer veya modal pencerenin yüksekliğini belirler. Örnek: "300px" veya "90%"
• Closable (Boolean): Modal pencerenin kullanıcı tarafından kapatılıp kapatılamayacağını belirler. Örnek: true
• Execute Page Init Actions After Closed (Boolean): Navigate ile açılan sayfa kapatıldığında, yönlendirilen sayfanın başlangıç (init) aksiyonlarının çalıştırılıp çalıştırılmayacağını belirler.
  
  • true: Sayfa kapandıktan sonra init aksiyonları çalıştırılır.
  • false: Sayfa kapandıktan sonra hiçbir init aksiyonu çalıştırılmaz.
  • Bu parametre false ise, "Disable Smart Execute Page Init" ayarının bir etkisi olmaz.
• Disable Smart Execute Page Init (Boolean): Execute Page Init Actions After Closed = true ise geçerlidir.
  
  • false: Yalnızca yönlendirilen sayfada bir backend isteği yapılmadıysa geri dönüldüğünde init çalışmaz.
  • true: Yönlendirilen sayfada backend isteği yapılmış olsun veya olmasın, geri dönüldüğünde init aksiyonu her durumda çalışır.
  • Bu ayar, sadece Execute Page Init Actions After Closed = true olduğunda anlamlıdır.

Tüm parametreler; Action Result, Method Input, Current, Screen Input, Fixed veya Component kaynaklarından alınabilir. Bu kaynaklara Symbol Picker üzerinden erişilerek bağlama yapılabilir.

• Dinamik Yönlendirme: Kullanıcı rolüne veya form girdilerine göre hedef ekran koşullu olarak belirlenebilir.
• Veri Aktarımı: Screen Input bağlamaları ile ekrana veri gönderilebilir.
• Page Init Aksiyonları: Yeni açılan ekran yüklendiğinde, veri sorgulama veya diğer işlemler otomatik başlatılabilir.
• Drawer & Modal Kontrolleri: Genişlik, yükseklik, yön ve kapatılabilirlik gibi modal/drawer özellikleri özelleştirilebilir.

Teknik Riskler 

• Geçersiz Ekran Adı: Yönlendirme yapılacak ekran silinmiş veya tanımsız olabilir. Ekran adı doğru tanımlanmalıdır.
• Yetkisiz Erişim: Kullanıcının erişemeyeceği ekranlara yönlendirme yapılırsa hata oluşabilir. Authorization kontrolü önerilir.
• Veri Kayıpları: Sayfalar arası geçişte taşınacak veriler doğru input yapısı ile iletilmelidir.
• Performans: Çok sayıda modal veya drawer açılması durumunda sayfa performansı izlenmeli, gerekiyorsa Disable Smart Page Execute gibi optimizasyonlar yapılmalıdır.
  
  

Navigate aksiyonu, ekranlar arası geçişi hem görsel hem de işlevsel açıdan yönetmenizi sağlar. Kuika projelerinde yönlendirme mantığını kullanıcı odaklı hale getirmek, süreçleri kesintisiz kılmak ve sayfalar arası veri paylaşımını yönetmek için kritik rol oynar. Esnek yapılandırması ile iş akışlarını daha sezgisel ve etkili hale getirir.