Popup Nasıl Kullanılır

Outsystems’ de (Reactive) “POPUP” Nedir?  Nasıl Kullanılır?

Popup mevcut sayfadan ayrılmadan açılan yeni bir sayfa olarak düşünülebilir. Birçok kullanım alanı mevcuttur. Reklam gösterimi, form doldurma, uyarı mesajlarını gösterme ve yönlendirme ilk akla gelen kullanım örneklerindendir. Popup Widget’in çalışma prensibi ise oldukça basittir. Boolean tipi bir değişkenle açılıp kapanmasını kontrol ettiğimiz bir “screen” olarak düşünülebilir. Şimdi Service Studio üzerinden adım adım birlikte yapalım.

1-) Popup Widget’i footer bölümüne sürükleyip bırakabilirsiniz ya da olmasını istediğiniz sayfaya Interface bölümünden gelerek Widget Tree’ ye sürükleyip bırakabilirsiniz.

Popup üstüne tıklayarak resimde görüldüğü gibi sağ tarafta Popup’a dair bilgilere ve seçeneklere ulaşabilirsiniz. Name kısmından isim verebilirsiniz. Bu tamamen opsiyoneldir. Wiget Tree’de daha anlaşılabilir bir şema için tercih edilebilir.

2-) Sayfada Popup’ın açılması ve kapanmasını kontrol etmek için bir boolean değişkene ihtiyacımız var. Popup’ın olduğu sayfada bir lokal değişken tanımlamamız gerekiyor.

Ve şimdi değişkenimizi Popup ayarlarına gelerek “Show Popup” kısmına ekliyoruz.

Show Popup alanına sadece True veya False da yazabilirdim. Eğer True yazsaydım sayfa açıldığında Popup çıkacak ve asla kapanmayacaktı. False durumunda ise Popup asla açılmayacaktı. İhtiyaç durumunda açmak veya kapatabilmek için True False değerlerini kontrol edebileceğimiz lokal boolean bir değişkende tutuyoruz.

Popup açma:

Örnek projede Popup işlemi sipariş içine ürün eklemek için kullanılmakta. Ürün eklemek için ayrı bir sayfaya gitmek yerine popup vasıtası ile ekleme işlemini gerçekleştirmekteyiz. Bu sebeple Popup’ın açılmasını istediğim yer bu proje de “Add New Item” butonuna tıklanması durumudur.

Butona tıklandığında ne olacağını önceden belirlediğimiz Action’larla yönetmekteyiz. Buton özelliklerinden “On click” kısmında “new screen action” seçebilirsiniz. Yeni bir Action’u birlikte tanımlayalım.

Tek yapmamız gereken isPopupVisible değişkenimizi True ya eşitlemek. Bunun için Assign Wigeti’ni kullanabiliriz.

Resimde görünen diğer işlemler projenin ayrıntıları ile ilgilidir. Bu noktada “isPopupVisible =True” kısmı butona tıklandığında Popup’ın açılması için yeterlidir. Diğer eşitlemelere ve “refresh data” işlemine popup’ı açmak için gerek yoktur.

Popup kapatmak için de yine tıklanabilecek bir yere ve bu tıklanmanın ardından isPopupVisible değişkenini False’a eşitleyebileceğimiz bir Action’a ihtiyacımız var. Bu noktada Popup’a bir çarpı ikonu koyup, sağ tıklayıp Link To -> New

Client Action oluşturabilir ve içerisinde Assing wigeti ile lokal değişkeni False’a eşitleyebilirsiniz.

Örnek projede Popup’ın kapanması için buton kullanılmıştır.

CancelOnClick isimli action içeriği ise şu şekildedir.

Service Studio Popup Açma/Kapatma:

Popup görünür değil ise üstündeki Expand’a tıklayarak açabilir veya Coolapse’ye basarak tekrar saklayabilirsiniz.