Bir veri kaynağına bağlı veri gösterme, ekleme, düzenleme işlemlerini tasarlamak için aşağıdaki adımlar izlenebilir.

Bu örnekte; veriler MongoDB'ye kaydedilip MongoDB'den okunmaktadır.

Sayfa tasarımına başlamadan önce yeni proje ve sayfa oluşturma adımlarına 1 - Yeni Proje Oluşturma linkinden erişebilirsiniz. 

1. Veri Modeli Oluşturma

Veri modelini yaratmak için ModelSchema.msdx dosyası açılır.
Sol menüdeki butonlardan AddModel butonuna tıklanır. Açılan listede "Model" seçili bırakılır ve modelin adı girilir.

2.Modelde yer almasını istenen property'ler açılan sekmedeki "Add" butonu ile eklenir.

   Name alanı sayfa tasarımı sırasındaki eşlemelerde kullandığımız isimlendirmedir.
   PropertyDataType oluşturduğumuz property'nin veri tipidir. Sayfa tasarımında kullandığımız bileşenlerle bağlanan bu alanlar arasında veri tipi uyumluluğu kontrol edilmektedir.

2. Sayfa Tasarımı 

1.Sayfaya BindPanel bileşeni sürükleyip bırakılır.

2.BindPanel bileşeni için Source (Veri Kaynağı) seçimi yapılır. 

3. Bileşenler tasarım ekranına sürüklenip bırakılır ve bileşenlerin BindingId ve FieldName özellikleri seçilir. 

    BindingID özelliği; hangi panelin veri kaynağındaki verilerin göstereceği seçilir.
    FieldName özelliği; seçilen BindingID'deki bindpanelin hangi alanının bu bileşende gösterileceğini belirtir.
    Not : Bir bileşen bindpanel içine sürükleyip bırakıldığında BindingID özelliği otomatik atanır.

4. Bindpanel'e bağlanan veriler üzerinde işlem yapabilmek için BindPanel ile birlikte çalışan ContextButton bileşeni kullanılabilir. Yeni Kayıt ekleme ve kaydetme için; tasarım ekranına 2 adet ContextButton bileşeni eklenir. 
    İlk ContextButton bileşeni için BindingID önceden eklenmiş bindpanel seçilir. Click Operation : New seçilir. Seçilen bindpanelin yeni kayıt moduna alınmasını sağlar. Bileşenlerdeki içerikleri temizler ve yeni veri girişine hazır hale getirir.
    İkinci ContextButton bileşeni için BindingID önceden eklenmiş seçilir. Click Operation : Save seçilir. BindPanele bağlı alanların verilerinin kaydedilmesini sağlar.
    Kaydet butonuna basmadan önce New butonuna basılmış ve veriler girilmiş ise Yeni Kayıt oluşturulur. 
    Var olan bir kayıtta değişiklik yapıp direkt Save butonuna basılmış ise varolan kayıt güncellenir.

Aşağıdaki videoya tıklayarak tasarımın nasıl yapıldığı görüntülenebilir.

3. Sayfa Yetkisinin Düzenlenmesi

Sayfa çalıştırılmadan önce; projenin sayfa menü olarak gösterilebilir olması için AppDefinition.adx ekranı açılır.

"PAAS Menu Service Integration" sekmesinden görüntülemek istediğimiz sayfanın "isVisible" özelliği seçilir.

4. Uygulamanın Çalıştırılması

Klavyeden F5'e tıklanarak veya sayfanın üst menüsünde proje adının yazdığı (Örnek :  "MyFirstLowCodeApp") butona tıklanarak proje çalıştırılır.    

Proje çalıştırıldığında dotnet.exe ismiyle console açılır ve ardından da proje sayfasi açılır. PAAS IDM servis altyapısı kullanıldığı için login ekranı açılır. Geliştirici E-Posta Adresi ve şifresini girer.

Veri kaynağında henüz hiç veri olmadığı için alanlar aşağıdaki şekilde boş gelmektedir.

Açılan ekranda öncelikle New butonuna basılır. Bindpanel "Yeni Kayıt" moduna geçer. Veriler girilir ve Save butonuna basılır. Böylelikle yeni kayıt eklenmiş olur. 
Bu şekilde önce New sonra da Save butonuna tıklanarak birden fazla kayıt eklenebilir.

Bir veya birden fazla kayıt eklendikten sonra proje yeniden çalıştırıldığında açılan sayfada artık aşağıdaki şekilde ilk kayıt otomatik olarak görüntülenecektir. 

Proje çalıştırıldığında aşağıdaki şekilde kayıtlar arası gezinme işlemleri gerçekleştirilebilir. Gezilen kayıtlardan herhangi birinde bir değişiklik yapıp "Kaydet" butonuna basıldığında o kayıt için güncelle yapılmış olur.