Adding some basic UI around the key/value data type.

packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte

@@ -9,6 +9,7 @@
     DatePicker,
     ModalContent,
     Context,
+    Modal,
   } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { cloneDeep } from "lodash/fp"
@@ -32,12 +33,14 @@
   import ModalBindableInput from "components/common/bindings/ModalBindableInput.svelte"
   import { getBindings } from "components/backend/DataTable/formula"
   import { getContext } from "svelte"
+  import JSONSchemaModal from "./JSONSchemaModal.svelte"
 
   const AUTO_TYPE = "auto"
   const FORMULA_TYPE = FIELDS.FORMULA.type
   const LINK_TYPE = FIELDS.LINK.type
   const STRING_TYPE = FIELDS.STRING.type
   const NUMBER_TYPE = FIELDS.NUMBER.type
+  const JSON_TYPE = FIELDS.JSON.type
 
   const dispatch = createEventDispatcher()
   const PROHIBITED_COLUMN_NAMES = ["type", "_id", "_rev", "tableId"]
@@ -63,6 +66,7 @@
   let confirmDeleteDialog
   let deletion
   let deleteColName
+  let jsonSchemaModal
 
   $: checkConstraints(field)
   $: required = !!field?.constraints?.presence || primaryDisplay
@@ -83,6 +87,7 @@
   // used to select what different options can be displayed for column type
   $: canBeSearched =
     field.type !== LINK_TYPE &&
+    field.type !== JSON_TYPE &&
     field.subtype !== AUTO_COLUMN_SUB_TYPES.CREATED_BY &&
     field.subtype !== AUTO_COLUMN_SUB_TYPES.UPDATED_BY &&
     field.type !== FORMULA_TYPE
@@ -173,6 +178,10 @@
     }
   }
 
+  function openJsonSchemaEditor() {
+    jsonSchemaModal.show()
+  }
+
   function confirmDelete() {
     confirmDeleteDialog.show()
     deletion = true
@@ -400,6 +409,10 @@
       getOptionLabel={option => option[1].name}
       getOptionValue={option => option[0]}
     />
+  {:else if field.type === JSON_TYPE}
+    <Button primary text on:click={openJsonSchemaEditor}
+      >Open schema editor</Button
+    >
   {/if}
 
   <div slot="footer">
@@ -408,6 +421,9 @@
     {/if}
   </div>
 </ModalContent>
+<Modal bind:this={jsonSchemaModal}>
+  <JSONSchemaModal on:save={({ detail }) => console.log(detail)} />
+</Modal>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   okText="Delete Column"

packages/builder/src/components/backend/DataTable/modals/JSONSchemaModal.svelte

@@ -0,0 +1,97 @@
+<script>
+  import Editor from "../../../integration/QueryEditor.svelte"
+  import {
+    ModalContent,
+    Tabs,
+    Tab,
+    Button,
+    Input,
+    Select,
+  } from "@budibase/bbui"
+  import { onMount, createEventDispatcher } from "svelte"
+
+  export let onConfirm = undefined
+  export let schema = {}
+
+  let dispatcher = createEventDispatcher()
+  let mode = "Key/Value"
+  let json
+  let fieldCount = 0
+  let fieldKeys = {},
+    fieldTypes = {}
+  let keyValueOptions = ["String", "Number", "Boolean", "Object", "Array"]
+
+  $: invalid = false
+
+  function onJsonUpdate({ detail }) {
+    // TODO: make request
+    const input = detail.value
+    console.log(input)
+  }
+
+  function saveSchema() {
+    for (let i of Object.keys(fieldKeys)) {
+      const key = fieldKeys[i]
+      schema[key] = {
+        type: fieldTypes[i],
+      }
+    }
+    dispatcher("save", schema)
+  }
+
+  onMount(() => {
+    if (!schema) {
+      schema = {}
+    }
+    let i = 0
+    for (let [key, value] of Object.entries(schema)) {
+      fieldKeys[i] = key
+      fieldTypes[i] = value.type
+      i++
+    }
+    fieldCount = i
+  })
+</script>
+
+<ModalContent
+  title={"Key/Value Schema Editor"}
+  confirmText="Save Column"
+  onConfirm={saveSchema}
+  disabled={invalid}
+  size="L"
+>
+  <Tabs selected={mode} noPadding>
+    <Tab title="Key/Value">
+      {#each Array(fieldCount) as _, i}
+        <div class="horizontal">
+          <Input outline label="Key" bind:value={fieldKeys[i]} />
+          <Select
+            label="Type"
+            options={keyValueOptions}
+            bind:value={fieldTypes[i]}
+            getOptionValue={field => field.toLowerCase()}
+          />
+        </div>
+      {/each}
+      <div class:add-field-btn={fieldCount !== 0}>
+        <Button primary text on:click={() => fieldCount++}>Add Field</Button>
+      </div>
+    </Tab>
+    <Tab title="JSON">
+      <Editor mode="json" on:change={onJsonUpdate} value={json} />
+    </Tab>
+  </Tabs>
+</ModalContent>
+
+<style>
+  .horizontal {
+    display: grid;
+    grid-template-columns: 30% 1fr;
+    grid-gap: var(--spacing-s);
+    align-items: center;
+  }
+
+  .add-field-btn {
+    margin-top: var(--spacing-xl);
+  }
+</style>

packages/builder/src/constants/backend/index.js

@@ -89,6 +89,14 @@ export const FIELDS = {
       presence: false,
     },
   },
+  JSON: {
+    name: "Key/Value",
+    type: "json",
+    constraints: {
+      type: "object",
+      presence: false,
+    },
+  },
 }
 
 export const AUTO_COLUMN_SUB_TYPES = {