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. 
• 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.

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ı 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.