Switch Toggle

1. Deskripsi :

Penggunaan tipe input ini untuk merender formulir atau input dalam aplikasi web, terkhususkan untuk inputan pada dynamic-form. Tipe data dalam hal ini yaitu "switch", pengguna hanya bisa memilih satu kondisi dengan menggeserkan toggle yang tersedia. Ketika satu kondisi switch dipilih maka akan membuat kondisi setelah dipilih menjadi (checkedValue:1) dengan meninggalkan (uncheckedValue:0). Dan sebelum itu haruslah membuat kondisi awal (defaultValue:0). Contoh dalam beberapa field pada form berikut :

1. Implementasi JSON

"dynamicForm": [
        {
    "type": "column",
    "size": 6,
    "children": [
      {
        "type": "separator",
        "size": 12,
        "fieldLabel": "Location Type",
        "className": "divider-start divider-dashed",
        "hideOnPage": {
          "add": true,
          "edit": false,
          "view": false
        }
      },
      {
        "fieldName": "isProductionWells",
        "fieldLabel": "Production Well",
        "size": 3,
        "type": "switch",
        "checkedValue": 1,
        "uncheckedValue": 0,
        "checkedIcon": "material:check_circle",
        "uncheckedIcon": "material:close",
        "color": "success",
        "defaultValue": 0,
        "hideOnPage": {
          "add": true,
          "edit": false,
          "view": false
        }
      },
      {
        "fieldName": "isMainSteamLine",
        "fieldLabel": "Main Stean Line",
        "size": 3,
        "type": "switch",
        "checkedValue": 1,
        "uncheckedValue": 0,
        "checkedIcon": "material:check_circle",
        "uncheckedIcon": "material:close",
        "color": "success",
        "defaultValue": 0,
        "hideOnPage": {
          "add": true,
          "edit": false,
          "view": false
        }
      },
      {
        "fieldName": "isBrineLine",
        "fieldLabel": "Brine Line",
        "size": 3,
        "type": "switch",
        "checkedValue": 1,
        "uncheckedValue": 0,
        "checkedIcon": "material:check_circle",
        "uncheckedIcon": "material:close",
        "color": "success",
        "defaultValue": 0,
        "hideOnPage": {
          "add": true,
          "edit": false,
          "view": false
        }
      },
      {
        "fieldName": "isSourgasLine",
        "fieldLabel": "Sourgas Line",
        "size": 3,
        "type": "switch",
        "checkedValue": 1,
        "uncheckedValue": 0,
        "checkedIcon": "material:check_circle",
        "uncheckedIcon": "material:close",
        "color": "success",
        "defaultValue": 0,
        "hideOnPage": {
          "add": true,
          "edit": false,
          "view": false
        }
      },
      {
        "fieldName": "isProdSepSteam",
        "fieldLabel": "Prod Sep Steam",
        "size": 3,
        "type": "switch",
        "checkedValue": 1,
        "uncheckedValue": 0,
        "checkedIcon": "material:check_circle",
        "uncheckedIcon": "material:close",
        "color": "success",
        "defaultValue": 0,
        "hideOnPage": {
          "add": true,
          "edit": false,
          "view": false
        }
      },
      {
        "fieldName": "isProdSepBrine",
        "fieldLabel": "Prod Sep Brine",
        "size": 3,
        "type": "switch",
        "checkedValue": 1,
        "uncheckedValue": 0,
        "checkedIcon": "material:check_circle",
        "uncheckedIcon": "material:close",
        "color": "success",
        "defaultValue": 0,
        "hideOnPage": {
          "add": true,
          "edit": false,
          "view": false
        }
      },
      {
        "fieldName": "isWeirbox",
        "fieldLabel": "Weirbox/LECM",
        "type": "switch",
        "checkedValue": 1,
        "uncheckedValue": 0,
        "checkedIcon": "material:check_circle",
        "uncheckedIcon": "material:close",
        "color": "success",
        "defaultValue": 0,
        "hideOnPage": {
          "add": true,
          "edit": false,
          "view": false
        }
      },
      {
        "fieldName": "otherLocationType",
        "fieldLabel": "other",
        "size": 3,
        "hideOnPage": {
          "add": true,
          "edit": false,
          "view": false
        }
      }
    ]
  }
]

1. Gambar capture contoh hasil Implementasi :

Kondisi Checked