bindings wip

packages/builder/src/components/common/CodeEditor/CodeEditor.svelte

@@ -54,6 +54,7 @@
   export let autofocus = false
   export let jsBindingWrapping = true
   export let readonly = false
+  export let readonlyLineNumbers = false
 
   const dispatch = createEventDispatcher()
 
@@ -240,6 +241,9 @@
 
     if (readonly) {
       complete.push(EditorState.readOnly.of(true))
+      if (readonlyLineNumbers) {
+        complete.push(lineNumbers())
+      }
     } else {
       complete = [
         ...complete,

packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Block, Subject, JSONProperty, Property, Section }  from './components'
+  import { BindingProperty, Block, Subject, JSONProperty, Property, Section }  from './components'
 
   export let schema
   export let columnName
@@ -62,10 +62,21 @@
       </Property>
     {/each}
   {:else if schema.type === "json"}
-    <JSONProperty
+    <Property name="Schema">
-      name="Schema"
+      <JSONProperty
-      value={JSON.stringify(schema?.schema ?? {}, null, 2)}
+        value={JSON.stringify(schema?.schema ?? {}, null, 2)}
+      />
+    </Property>
+  {:else if schema.type === "formula"}
+    <Property
+      name="Formula type"
+      value={schema?.formulaType === "dynamic" ? "Dynamic" : "Static"}
     />
+    <Property name="Formula">
+    <BindingProperty
+      value={schema?.formula}
+    />
+    </Property>
   {/if}
   <Property
     name="Required"

packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/BindingProperty.svelte

@@ -0,0 +1,38 @@
+
+<script>
+  import {
+    decodeJSBinding,
+  } from "@budibase/string-templates"
+  import CodeEditor from "components/common/CodeEditor/CodeEditor.svelte"
+  import {
+    EditorModes,
+  } from "components/common/CodeEditor"
+  import {
+    readableToRuntimeBinding,
+    runtimeToReadableBinding,
+    getDatasourceForProvider
+  } from "dataBinding"
+  import { tables, datasources, selectedScreen, selectedComponent } from "stores/builder"
+  import { getBindings } from "components/backend/DataTable/formula"
+
+  export let value
+  $: datasource = getDatasourceForProvider($selectedScreen, $selectedComponent)
+  $: tableId = datasource.tableId
+  $: table = $tables?.list?.find(table => table._id === tableId)
+  $: bindings = getBindings({ table });
+
+  $: readableBinding = runtimeToReadableBinding(bindings, value)
+
+  $: isJs = value?.startsWith?.("{{ js ")
+</script>
+
+<CodeEditor
+  readonly
+  readonlyLineNumbers
+  value={isJs ? decodeJSBinding(readableBinding) : readableBinding}
+  jsBindingWrapping={isJs}
+  mode={isJs ? EditorModes.JS :EditorModes.Handlebars}
+/>
+
+<style>
+</style>

packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/JSONProperty.svelte

@@ -1,35 +1,12 @@
 <script>
-  export let name;
   export let value;
 </script>
 
-<div class="property">
+<pre class="pre">
-  <span class="propertyName">
+  {value}
-    <slot name="name">
+</pre>
-      {name}
-    </slot>
-  </span>
-  <span class="propertyDivider">-</span>
-  <pre class="pre propertyValue">
-    <slot>
-      {value}
-    </slot>
-  </pre>
-</div>
 
 <style>
-  .property {
-    margin-bottom: 12px;
-  }
-
-  .propertyName {
-    font-style: italic;
-  }
-
-  .propertyDivider {
-    padding: 4px;
-  }
-
   .pre {
     margin: 0;
     margin-top: 3px;

packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js

@@ -1,5 +1,6 @@
 export { default as Subject } from "./Subject.svelte"
 export { default as Property } from "./Property.svelte"
 export { default as JSONProperty } from "./JSONProperty.svelte"
+export { default as BindingProperty } from "./BindingProperty.svelte"
 export { default as Section } from "./Section.svelte"
 export { default as Block } from "./Block.svelte"

packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte

@@ -31,7 +31,6 @@
   $: options = Object.keys(schema || {})
   $: boundValue = getValidOptions(value, options)
 
-
   const getValidOptions = (selectedOptions, allOptions) => {
     // Fix the hardcoded default string value
     if (!Array.isArray(selectedOptions)) {

packages/client/manifest.json

@@ -1638,8 +1638,11 @@
           "typeSupport": {
             "supported": ["number", "boolean"],
             "partialSupport": [
+              { "type": "longform", "message": "stringAsNumber" },
               { "type": "string", "message": "stringAsNumber" },
+              { "type": "bigint", "message": "stringAsNumber" },
               { "type": "options", "message": "stringAsNumber" },
+              { "type": "formula", "message": "stringAsNumber" },
               { "type": "datetime", "message": "dateAsNumber"}
             ],
             "unsupported": [