Form

MonoChat’teki Form bileşeni, geliştiricilerin çeşitli atomik ve birleşik UI elemanlarını kullanarak zengin ve reaktif formlar oluşturmasını sağlar. Dahili giriş doğrulama, dosya yükleme, dinamik açılır listeler, AJAX tabanlı seçenek yükleme ve özel gönderim mantığını destekler.

Her form, her bir öğenin bir form elemanına karşılık geldiği sdk.options.items yapısı kullanılarak tanımlanır. Öğeleri çok sütunlu düzenler oluşturmak için dizilerle gruplandırabilir ve dış durumu veya editörleri bağlamak için ReactiveVar bağlamalarını kullanabilirsiniz.

Form ayrıca onSubmit gibi yaşam döngüsü olay işleyicilerini destekler ve böylece veri toplama, doğrulama, dönüştürme ve gönderim üzerinde tam kontrol sağlar.

---

Kullanım Örneği

CustomFunction(async function ({ sdk }, reject, resolve) {
  resolve(async function CustomFunction({ sdk, templateInstance }) {
    const current = sdk.env.current.get()

    const coverPhotoDropzone = new ReactiveVar()
    const photosDropzone = new ReactiveVar()
    const descriptionEditor = new ReactiveVar()

    const selectCurrencyOptions = new ReactiveVar([])

    sdk.utils.loading.show()

    selectCurrencyOptions.set(
      current.currencies.map((currency) => ({
        value: currency.isoCode,
        label: currency.isoCode,
        selected: currency.isDefault,
      }))
    )

    sdk.options = {
      data: null,
      items: [
        {
          type: 'atoms-input',
          name: 'title',
          text: 'Başlık',
          rules: { required: true },
        },
        {
          type: 'atoms-editor',
          name: 'description',
          text: 'Açıklama',
          editor: descriptionEditor,
          rules: { required: true },
        },
        [
          {
            type: 'atoms-dropzone',
            name: 'coverPhotoDropzone',
            text: 'Kapak Fotoğrafı',
            dropzone: coverPhotoDropzone,
            options: { acceptedFiles: 'image/*', maxFiles: 1 },
          },
          {
            type: 'atoms-dropzone',
            name: 'photosDropzone',
            text: 'Fotoğraflar',
            dropzone: photosDropzone,
            options: { acceptedFiles: 'image/*', maxFiles: 50 },
          },
        ],
        {
          type: 'atoms-select',
          name: 'currencyIsoCode',
          text: 'Para Birimi',
          selectOptions: selectCurrencyOptions,
          rules: { required: true },
        },
        {
          type: 'atoms-button',
          text: 'Evi Oluştur',
          buttonType: 'submit',
        },
      ],
      events: {
        onSubmit: async function (event, templateInstance) {
          event.preventDefault()
          sdk.utils.loading.show()

          const title = event.target.title.value
          const description = descriptionEditor.get().getData()
          const currencyIsoCode = event.target.currencyIsoCode.value

          const obj = { title, description, currencyIsoCode }

          const coverPhotoUploads = await sdk.utils.uploadAsync(coverPhotoDropzone)
          obj.coverPhotoUrl = coverPhotoUploads?.[0]?.url

          const photosUploads = await sdk.utils.uploadAsync(photosDropzone)
          obj.photosUrls = photosUploads.map((f) => f.url)

          await sdk.customFunction.callAsync(
            { pathString: sdk.utils.absolutePathString('../../methods/properties/create.js') },
            obj
          )

          event.target.reset()
          sdk.utils.loading.remove()
          sdk.utils.drawer.hide()
        },
      },
    }

    sdk.utils.loading.remove()
  })
})

Temel Kavramlar

Özellik	Açıklama
items	Form elemanlarından oluşan dizi (gruplandırılmış düzen için diziler de)
rules	Alan düzeyinde doğrulama kuralları, örn. required
ReactiveVar	Dinamik alan durumlarını veya bağlamalarını yönetmek için reaktif değişkenler
atoms-* tipleri	Input, select, dropzone, editor gibi atomik UI bileşenleri
components-* tipleri	Başlık ayırıcı gibi birleşik veya düzen bileşenleri
select-ajax	Arama ve sayfalama ile dinamik doldurulan açılır listeler
onSubmit	Form gönderim mantığını işleyen handler, submit butonuna tıklandığında çalışır
sdk.utils.uploadAsync	Dosya yüklemeyi yönetir ve URL döndürür

---

En Doğru Kullanımlar

• Editörler veya dosya yükleyiciler gibi dinamik duruma sahip alanlar için ReactiveVar kullanın.
• İlgili alanları gruplamak için form bölümlerini components-composite-title kullanarak tanımlayın.
• Asenkron işlemler sırasında geri bildirim sağlamak için sdk.utils.loading.show() ve sdk.utils.loading.remove() kullanın.
• AJAX ile doldurulan açılır listeler için sayfalama ve filtrelemeyi params nesnesini kullanarak manuel olarak yönetin.