Neyi Nasıl Yaparım? - Sıkça Sorulan Sorular

Bu doküman, OpsGridForm ve OpsGridFormGenerator kullanırken karşılaşılabilecek sıkça sorulan soruları ve çözümlerini içerir. Her sorunun yanında açıklama, örnek kod ve ipuçları yer almaktadır.

---

Soru 1: MultiGrid Nasıl Oluşturulur?

Açıklama

MultiGrid, birden fazla form öğesini veya grid düzenini gruplamak için kullanılır. Her alt grupta farklı alanlar veya özel bileşenler yer alabilir.

Örnek

{
  multiSchema: [
    {
      name: "Group 1",
      schema: [
        {
          name: "Field1",
          type: FormItemTypeEnum.TEXT,
          label: "Alan 1",
        },
        {
          name: "Field2",
          type: FormItemTypeEnum.NUMBER,
          label: "Alan 2",
        },
      ],
    },
    {
      name: "Group 2",
      schema: [
        {
          name: "Field3",
          type: FormItemTypeEnum.CHECKBOX,
          label: "Onay Kutusu",
        },
      ],
    },
  ],
}

İpucu

• MultiGrid, büyük formları bölümlere ayırmak için idealdir.
• Her alt grup için farklı schema ve gridSize ayarlayabilirsiniz.

---

Soru 2: Grid Sistemini Nasıl Özelleştirebilirim?

Açıklama

Varsayılan grid yapısı, her alan için bir sütun düzenine dayanır. gridSize özelliği ile alanların kaplayacağı sütun genişliğini ayarlayabilirsiniz.

Örnek

{
  name: "CustomGrid",
  schema: [
    {
      name: "Field1",
      type: FormItemTypeEnum.TEXT,
      label: "Alan 1",
      gridSize: { xs: 12, sm: 6, md: 4 },
    },
    {
      name: "Field2",
      type: FormItemTypeEnum.NUMBER,
      label: "Alan 2",
      gridSize: { xs: 12, sm: 6, md: 8 },
    },
  ],
}

İpucu

• gridSize, her cihaz boyutunda farklı sütun genişlikleri tanımlamanıza olanak tanır.
• Kullanılabilir değerler: { xs: 12, sm: 6, md: 4, lg: 3 }.

---

Soru 3: Custom Component Nasıl Eklenir?

Açıklama

renderComponent özelliği, tamamen özel bileşenlerin eklenmesini sağlar. Bu yöntem, form dışında dinamik içerikler eklemek için kullanılır.

Örnek

{
  name: "CustomComponent",
  renderComponent: (apiData) => (
    <div>
      <h3>Özel İçerik</h3>
      <p>API'den gelen veri: {apiData?.example}</p>
    </div>
  ),
}

İpucu

• renderComponent, API'den gelen verilere göre içerik oluşturmanıza olanak tanır.
• Bu özellik sadece formun görsel yapısını değil, işlevselliğini de özelleştirmek için kullanılabilir.

---

Soru 4: AutoComplete Alanı Nasıl Kullanılır?

Açıklama

AutoComplete alanı, dinamik veri kaynaklarından seçim yapılmasını sağlar. autoCompleteProps ile ek özellikler tanımlayabilirsiniz.

Örnek

{
  name: "Tags",
  type: FormItemTypeEnum.AUTO_COMPLETE,
  label: "Etiketler",
  autoCompleteProps: {
    isMultiple: true,
    getOptions: (setLoading, setOptions) => {
      setLoading(true);
      setTimeout(() => {
        setOptions([
          { label: "Etiket 1", value: "tag1" },
          { label: "Etiket 2", value: "tag2" },
        ]);
        setLoading(false);
      }, 1000);
    },
  },
}

İpucu

• isMultiple, birden fazla seçeneğin seçilmesine olanak tanır.
• getOptions, veri kaynaklarından seçeneklerin dinamik olarak yüklenmesini sağlar.

---

Soru 5: Varsayılan Değerleri Nasıl Ayarlayabilirim?

Açıklama

Form öğeleri için varsayılan değerler defaultValue özelliği kullanılarak ayarlanır.

Örnek

{
  name: "Published",
  type: FormItemTypeEnum.SWITCH,
  label: "Yayınlandı",
  defaultValue: true,
}

İpucu

• defaultValue, hem yeni kayıtlar hem de düzenleme işlemleri için kullanılabilir.
• Düzenleme modunda, apiData ile varsayılan değerleri güncelleyebilirsiniz.

---

Soru 6: Validasyon Kuralları Nasıl Eklenir?

Açıklama

Validasyon kuralları, registerOptions özelliği ile tanımlanır. Her kural için hata mesajları eklenebilir.

Örnek

{
  name: "Email",
  type: FormItemTypeEnum.EMAIL,
  label: "E-posta",
  registerOptions: {
    required: "E-posta zorunludur",
    pattern: {
      value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
      message: "Geçerli bir e-posta adresi girin",
    },
  },
}

İpucu

• required, alanın zorunlu olup olmadığını belirler.
• pattern, belirli bir formatı doğrulamak için kullanılabilir.

---

Soru 7: Tarih Alanlarında Minimum ve Maksimum Tarih Nasıl Ayarlanır?

Açıklama

Tarih alanları için minDate ve maxDate özellikleri kullanılabilir.

Örnek

{
  name: "StartDate",
  type: FormItemTypeEnum.DATE,
  label: "Başlangıç Tarihi",
  minDate: "2023-01-01",
  maxDate: "2024-01-01",
}

İpucu

• Tarih formatı ISO 8601 standardına uygun olmalıdır (YYYY-MM-DD).
• Kullanıcıya rehberlik etmek için uygun bir placeholder ekleyin.

---

Soru 8: Tek Seçim Alanı (Radio) Nasıl Eklenir?

Açıklama

Radio button, kullanıcıların yalnızca bir seçeneği seçmesini sağlar. options özelliği ile seçim yapılacak değerler belirtilir.

Örnek

{
  name: "Gender",
  type: FormItemTypeEnum.RADIO,
  label: "Cinsiyet",
  options: [
    { label: "Erkek", value: "male" },
    { label: "Kadın", value: "female" },
  ],
}

İpucu

• options dizisindeki her öğe bir label ve value çiftinden oluşmalıdır.
• Varsayılan seçim için defaultValue kullanılabilir.

---

Soru 9: Çoklu Dil Alanı Nasıl Kullanılır?

Açıklama

Çoklu dil desteği için LANGUAGE_TEXT alan türü kullanılır. languages ve selectedLang özellikleri ile diller arası geçiş yapılabilir.

Örnek

{
  name: "Title",
  type: FormItemTypeEnum.LANGUAGE_TEXT,
  label: "Başlık",
  visibility: FormItemVisibilityEnum.Both,
}

İpucu

• Kullanıcıların dil değiştirme işlemleri için handleLanguageChange metodu eklenebilir.

---

Soru 10: Bir Alanın Dinamik Olarak Gizlenmesi Nasıl Sağlanır?

Açıklama

Alanların görünürlüğünü dinamik olarak kontrol etmek için visibility veya özel fonksiyonlar kullanılabilir.

Örnek

{
  name: "HiddenField",
  type: FormItemTypeEnum.TEXT,
  label: "Gizli Alan",
  visibility: FormItemVisibilityEnum.Both,
  handleDisabled: (isEdit, apiData) => !isEdit,
}

İpucu

• handleDisabled özelliği ile alanın yalnızca belirli koşullarda aktif olmasını sağlayabilirsiniz.

---

Bu doküman, sıkça sorulan sorulara hızlı cevaplar vermek ve geliştiricilerin karşılaştığı zorlukları çözmek için hazırlanmıştır. Daha fazla örnek veya ek açıklama gerektiğinde bize ulaşabilirsiniz!