FloatButton, uygulamalarda ekranın sabit köşelerinde görünen hızlı aksiyon butonudur. Kullanıcıyı ek işlem panellerine yönlendirmek veya hızlıca aksiyon başlatmak için kullanılır.

Kullanım Alanları:

• Yeni kayıt ekleme
• Hızlı yardım/destek paneli açma
• Geri bildirim veya yorum formu çağırma
• Ek ayarlar veya işlemleri açma

FloatButton yalnızca web uygulamalarında desteklenmektedir.

Yeni Müşteri Ekleme Senaryosu

Bir CRM uygulamasında kullanıcılar yeni müşteri eklemek için FloatButton kullanır.

• FloatButton ekranın sağ alt köşesinde “+” ikonu ile sabitlenir.
• Kullanıcı butona tıkladığında bir FloatPanel açılır.
• Açılan FloatPanel içinde NewCustomerPage bulunur.
• Bu sayfada kullanıcı, müşteri adı ve e-posta bilgisini girerek yeni kayıt oluşturur.

Veri Kaynağı Bağlama

1. Datasources modülüne gidin.
2. Tables başlığı yanındaki + ikonuna tıklayın ve tabloya Customers adını verin.
3. Aşağıdaki tabloyu oluşturun:

4. SQL Actions sekmesine gidin.
5. Yeni bir Action oluşturun ve adına InsertCustomer yazın.

SQL komutu:

INSERT INTO Customers (Name, Email) VALUES (@Name, @Email)

UI Design Modülü İşlemleri

1. Ekrana bir FloatButton ekleyin.
   
   • Label → “+”
   • Tooltip → “Yeni Müşteri Ekle”
   • Position → bottom right
   • offsetX = 20, offsetY = 20
2. FloatButton seçiliyken:
   
   • +ADD ACTION → onClick → Navigate
   • Target Panel Type → FloatPanel
   • Target Page → “NewCustomerPage”
3. NewCustomerPage içinde bir Form elementi ekleyin.
   
   • Form içinde:
     
     • TextInput → Name alanı
     • TextInput → Email alanı
     • Button → “Kaydet”
4. Button için:
   
   • +ADD ACTION → onClick → Managed DB → InsertCustomer
   • Parametre eşleştirmeleri:
     
     • @Name = Name TextInput Value
     • @Email = Email TextInput Value

Özelliklerin Senaryo Bağlamında Kullanılması

FloatButton

• Label: “+” işareti buton üzerinde görünür.
• Tooltip: “Yeni Müşteri Ekle” açıklaması gösterilir.
• Position: bottom right → ekranın sağ alt köşesine sabitlenir.
• offsetX / offsetY: butonun kenardan mesafesi ayarlanır.

FloatPanel (Navigate ile açılır)

• İçinde NewCustomerPage yüklenir.
• Bu sayfada müşteri ekleme formu bulunur.

Form (NewCustomerPage içinde)

• TextInput alanları müşteri bilgisi girişi sağlar.
• Button → InsertCustomer SQL Action’u çalıştırır.

Senaryo Tamamlandığında

• Kullanıcı FloatButton’a tıklar.
• FloatPanel açılır ve müşteri ekleme formu görüntülenir.
• Form doldurulup “Kaydet” butonuna basıldığında SQL Action çalışır ve Customers tablosuna yeni kayıt eklenir.
• Kayıt başarılı olduktan sonra liste yenilenebilir veya FloatPanel kapatılabilir.

Kısıtlamalar

• FloatButton yalnızca web uygulamalarında desteklenir.
• FloatPanel kendi başına element değildir, Navigate aksiyonu ile açılır.
• SQL bağlantısı FloatButton’a değil, FloatPanel içinde açılan sayfadaki elementlere yapılır.

İpuçları ve Best Practices

• FloatButton ikonunu anlaşılır sembollerle seçin (örn. “+”, ayar ikonu, mesaj ikonu).
• Tooltip kullanarak kullanıcıya butonun ne işe yaradığını açıklayın.
• offsetX ve offsetY değerleriyle farklı ekran boyutlarında butonun görünümünü test edin.
• FloatPanel içinde sade formlar veya küçük tablolar kullanın, karmaşık ekranlar için başka sayfaları tercih edin.