Override Spec FormLowcode

kasus seperti apa yang mengharuskan programmer menggunakan static spec?

How to nya

1. buat spec static nya

const spec = {
  "show_as_menu": true,
  "name": "testing.projects",
  "is_bpmn": false,
  "is_usertask": false,
  "can_bulk": false,
  "can_create": true,
  "can_delete": true,
  "can_edit": true,
  "can_detail": true,
  "label": "Testing.projects",
  "base_url": "https://nocodeapi.merapi.javan.id",
  "path": "/api/testing/crud/projects",
  "description": "Field Dari Projects",
  "header_action": [
    {
      "label": "Tambah",
      "action_label": "Tambah Projects",
      "method": "post",
      "form_type": "new_page",
      "path": "/api/testing/crud/projects",
      "icon": "plus",
      "type": "primary"
    }
  ],
  "field_action": [
    {
      "label": "Detail",
      "action_label": "Detail Projects",
      "method": "get",
      "form_type": "modal",
      "path": "/api/testing/crud/projects/{id}",
      "icon": "eye",
      "type": "primary"
    },
    {
      "label": "Edit",
      "action_label": "Edit Projects",
      "method": "put",
      "form_type": "modal",
      "path": "/api/testing/crud/projects/{id}",
      "icon": "edit",
      "type": "primary"
    },
    {
      "label": "Hapus",
      "action_label": "Delete Projects",
      "method": "delete",
      "form_type": "confirm_modal",
      "confirm": {
        "title": "Hapus Data",
        "message": "Apakah anda yakin ingin menghapus data ini?1",
        "confirm_text": "Lanjutkan",
        "cancel_text": "Batal"
      },
      "path": "/api/testing/crud/projects/{id}",
      "icon": "trash",
      "type": "danger"
    }
  ],
  "languages": {
    "pagination_info": "Memunculkan data dari {page} sampai {limit} total {total}",
    "empty_data": "Tidak ada data yang ditampilkan",
    "filter_title": "Filter",
    "filter_submit": "Filter",
    "filter_reset": "Clear Filter",
    "filter_cancel": "Kembali"
  },
  "fields": {
    "id": {
      "name": "id",
      "label": "Id",
      "required": true,
      "searchable": false,
      "filterable": true,
      "sortable": true,
      "type": "number",
      "form_field_type": "INPUT_NUMBER",
      "primary": true,
      "is_hidden_in_create": true,
      "is_hidden_in_edit": true,
      "is_hidden_in_list": false,
      "is_hidden_in_detail": false,
      "rules": ["required", "integer"],
      "format": "",
      "prefix": "",
      "suffix": "",
      "list_order": 1,
      "create_order": 1,
      "edit_order": 1
    },
    "name": {
      "name": "name",
      "label": "Name",
      "required": true,
      "searchable": true,
      "filterable": true,
      "sortable": true,
      "type": "text",
      "form_field_type": "INPUT_TEXT",
      "primary": false,
      "is_hidden_in_create": false,
      "is_hidden_in_edit": false,
      "is_hidden_in_list": false,
      "is_hidden_in_detail": false,
      "rules": ["required", "string", "max:255"],
      "format": "",
      "prefix": "",
      "suffix": "",
      "list_order": 2,
      "create_order": 2,
      "edit_order": 2
    },
    "description": {
      "name": "description",
      "label": "Description",
      "required": true,
      "searchable": true,
      "filterable": true,
      "sortable": true,
      "type": "text",
      "form_field_type": "INPUT_TEXT",
      "primary": false,
      "is_hidden_in_create": false,
      "is_hidden_in_edit": false,
      "is_hidden_in_list": false,
      "is_hidden_in_detail": false,
      "rules": ["required", "string", "max:255"],
      "format": "",
      "prefix": "",
      "suffix": "",
      "list_order": 3,
      "create_order": 3,
      "edit_order": 3
    },
    "created_at": {
      "name": "created_at",
      "label": "Created At",
      "required": false,
      "searchable": false,
      "filterable": true,
      "sortable": true,
      "type": "datetime-local",
      "form_field_type": "INPUT_DATETIME-LOCAL",
      "primary": false,
      "is_hidden_in_create": true,
      "is_hidden_in_edit": true,
      "is_hidden_in_list": true,
      "is_hidden_in_detail": false,
      "rules": ["nullable", "date_format:Y-m-d H:i:s"],
      "format": "DD-MM-YYYY HH:mm:ss",
      "prefix": "",
      "suffix": "",
      "list_order": 4,
      "create_order": 4,
      "edit_order": 4
    },
    "updated_at": {
      "name": "updated_at",
      "label": "Updated At",
      "required": false,
      "searchable": false,
      "filterable": true,
      "sortable": true,
      "type": "datetime-local",
      "form_field_type": "INPUT_DATETIME-LOCAL",
      "primary": false,
      "is_hidden_in_create": true,
      "is_hidden_in_edit": true,
      "is_hidden_in_list": true,
      "is_hidden_in_detail": false,
      "rules": ["nullable", "date_format:Y-m-d H:i:s"],
      "format": "DD-MM-YYYY HH:mm:ss",
      "prefix": "",
      "suffix": "",
      "list_order": 5,
      "create_order": 5,
      "edit_order": 5
    }
  }
}

2. kirim via props

  <TableLowcode
    ...props yang lain
    spec={spec}
  />

3. Formlowcode tidak akan ngehit API spec lagi namun langsung menggunakan spec static yagn dikirimkan via props

Bagaimana Spec di Formlowcode Bekerja

1. Menampilkan Form form akan ditampilkan berdasarkan data fields yang berasal dari spec, fields akan dimapping, difilter, di sorting berdasarkan create_order, terdapat 3 tipe Form, yaitu Create, Edit, Detail, untuk menentukan di muncul atau tidak nya berdasarkan is_hidden_in_create/is_hidden_in_edit/is_hidden_in_detail. FormLowcode akan secara otomatis menentukan mana form edit/create/detail berdasarkan berdasarkan logic seperti ini

const isEdit = id && !readonly
const isDetail = id && readonly

2. Fungsi Submit nya FormLowcode akan mengunakan kategori form yang create/edit/detail untuk menentukan ketika submit akan seperti apa contoh pada form edit, komponen akan mengambil data field_action yang nilai label nya bernilai Edit. dari field action tersebut diambil lah nilai path dan method untuk mendapatkan url cara serperti ini let url = baseUrl + path.replace('{id}', ${id}) yang mana id dan baseUrl diambil melalui props

id & readonly ini merupakan props yang dikirimkan ke komponen FormLowcode, jika tidak memiliki ID dan tidak memilikiki readonly maka Form dikategorikan sebagai Form Create

Tampilan Form Berdasarkan Spec Contoh