From 6d8507d95ed6ab51ae4b6ad1c9671914cb5097bc Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 8 Oct 2021 11:42:10 +0100
Subject: [PATCH 01/14] Add new generic CodeMirror editor component

---
 packages/builder/src/components/common/CodeMirrorEditor.svelte | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 packages/builder/src/components/common/CodeMirrorEditor.svelte

diff --git a/packages/builder/src/components/common/CodeMirrorEditor.svelte b/packages/builder/src/components/common/CodeMirrorEditor.svelte
new file mode 100644
index 0000000000..e69de29bb2

From d6ca48b46a4c829dc908c739efbe287b13ed9298 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 8 Oct 2021 12:06:52 +0100
Subject: [PATCH 02/14] Add QOL addons to CodeMirror editor

---
 .../components/common/CodeMirrorEditor.svelte | 146 ++++++++++++++++++
 .../src/components/integration/codemirror.js  |  18 ++-
 2 files changed, 160 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/common/CodeMirrorEditor.svelte b/packages/builder/src/components/common/CodeMirrorEditor.svelte
index e69de29bb2..047f9874a7 100644
--- a/packages/builder/src/components/common/CodeMirrorEditor.svelte
+++ b/packages/builder/src/components/common/CodeMirrorEditor.svelte
@@ -0,0 +1,146 @@
+<script context="module">
+  export const EditorModes = {
+    JS: {
+      name: "javascript",
+      json: false,
+    },
+    JSON: {
+      name: "javascript",
+      json: true,
+    },
+    SQL: {
+      name: "sql",
+    },
+    Handlebars: {
+      name: "handlebars",
+      base: "text/html",
+    },
+  }
+</script>
+
+<script>
+  import CodeMirror from "components/integration/codemirror"
+  import { themeStore } from "builderStore"
+  import { createEventDispatcher, onMount } from "svelte"
+
+  export let mode = EditorModes.JS
+  export let value = ""
+  export let height = 300
+  export let readonly = false
+  export let hints = []
+
+  const dispatch = createEventDispatcher()
+  let textarea
+  let editor
+
+  // Keep editor up to date with value
+  $: editor?.setValue(value || "")
+
+  // Creates an instance of a code mirror editor
+  async function createEditor(mode, value) {
+    if (!CodeMirror || !textarea || editor) {
+      return
+    }
+
+    // Configure CM options
+    const lightTheme = $themeStore.theme.includes("light")
+    const options = {
+      mode,
+      value: value || "",
+      readOnly: readonly,
+      theme: lightTheme ? "default" : "tomorrow-night-eighties",
+
+      // Style
+      lineNumbers: true,
+      lineWrapping: true,
+      indentWithTabs: true,
+      indentUnit: 2,
+      tabSize: 2,
+
+      // QOL addons
+      extraKeys: { "Ctrl-Space": "autocomplete" },
+      styleActiveLine: { nonEmpty: true },
+      autoCloseBrackets: true,
+      matchBrackets: true,
+    }
+
+    // Register hints plugin if desired
+    if (hints?.length) {
+      CodeMirror.registerHelper("hint", "dictionaryHint", function (editor) {
+        const cursor = editor.getCursor()
+        return {
+          list: hints,
+          from: CodeMirror.Pos(cursor.line, cursor.ch),
+          to: CodeMirror.Pos(cursor.line, cursor.ch),
+        }
+      })
+      CodeMirror.commands.autocomplete = function (cm) {
+        CodeMirror.showHint(cm, CodeMirror.hint.dictionaryHint)
+      }
+    }
+
+    // Construct CM instance
+    editor = CodeMirror.fromTextArea(textarea, options)
+
+    // Use a blur handler to update the value
+    editor.on("blur", instance => {
+      dispatch("change", instance.getValue())
+    })
+  }
+
+  // Export a function to expose caret position
+  export const getCaretPosition = () => {
+    const cursor = editor.getCursor()
+    return {
+      start: cursor.ch,
+      end: cursor.ch,
+    }
+  }
+
+  onMount(() => {
+    // Create the editor with initial value
+    createEditor(mode, value)
+
+    // Clean up editor on unmount
+    return () => {
+      if (editor) {
+        editor.toTextArea()
+      }
+    }
+  })
+</script>
+
+<div style={`--code-mirror-height: ${height}px`}>
+  <textarea tabindex="0" bind:this={textarea} readonly {value} />
+</div>
+
+<style>
+  div :global(.CodeMirror) {
+    height: var(--code-mirror-height);
+    font-family: monospace;
+    line-height: 1.3;
+    border: var(--spectrum-alias-border-size-thin) solid;
+    border-color: var(--spectrum-alias-border-color);
+    overflow: hidden;
+    border-radius: var(--border-radius-s);
+  }
+
+  /* Override default active line highlight colour in dark theme */
+  div
+    :global(.CodeMirror-focused.cm-s-tomorrow-night-eighties
+      .CodeMirror-activeline-background) {
+    background: rgba(255, 255, 255, 0.075);
+  }
+
+  /* Remove active line styling when not focused */
+  div
+    :global(.CodeMirror:not(.CodeMirror-focused)
+      .CodeMirror-activeline-background) {
+    background: unset;
+  }
+
+  /* Add a spectrum themed border when focused */
+  div :global(.CodeMirror-focused) {
+    border-color: var(--spectrum-alias-border-color-mouse-focus);
+  }
+</style>
diff --git a/packages/builder/src/components/integration/codemirror.js b/packages/builder/src/components/integration/codemirror.js
index 85a7d05004..c4afd8488c 100644
--- a/packages/builder/src/components/integration/codemirror.js
+++ b/packages/builder/src/components/integration/codemirror.js
@@ -1,12 +1,22 @@
 import CodeMirror from "codemirror"
 import "codemirror/lib/codemirror.css"
-import "codemirror/theme/tomorrow-night-eighties.css"
-import "codemirror/addon/hint/show-hint.css"
-import "codemirror/theme/neo.css"
+
+// Modes
+import "codemirror/mode/javascript/javascript"
 import "codemirror/mode/sql/sql"
 import "codemirror/mode/css/css"
 import "codemirror/mode/handlebars/handlebars"
-import "codemirror/mode/javascript/javascript"
+
+// Hints
 import "codemirror/addon/hint/show-hint"
+import "codemirror/addon/hint/show-hint.css"
+
+// Theming
+import "codemirror/theme/tomorrow-night-eighties.css"
+
+// Functional addons
+import "codemirror/addon/selection/active-line"
+import "codemirror/addon/edit/closebrackets"
+import "codemirror/addon/edit/matchbrackets"
 
 export default CodeMirror

From 72ea464cdaf61f940e77e225a28cde94eb3e50f6 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 8 Oct 2021 12:07:11 +0100
Subject: [PATCH 03/14] Add support for JS editing in binding panel

---
 .../common/bindings/BindingPanel.svelte       | 91 +++++++++++++------
 .../common/bindings/ServerBindingPanel.svelte |  6 +-
 .../src/components/common/bindings/utils.js   | 17 +++-
 3 files changed, 80 insertions(+), 34 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index fdf708dc4e..63853213ca 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -1,32 +1,45 @@
 <script>
   import groupBy from "lodash/fp/groupBy"
-  import { Search, TextArea, DrawerContent } from "@budibase/bbui"
+  import { Search, TextArea, DrawerContent, Tabs, Tab } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { isValid } from "@budibase/string-templates"
   import { readableToRuntimeBinding } from "builderStore/dataBinding"
   import { handlebarsCompletions } from "constants/completions"
-  import { addToText } from "./utils"
+  import { addHBSBinding, addJSBinding } from "./utils"
+  import CodeMirrorEditor from "components/common/CodeMirrorEditor.svelte"
 
   const dispatch = createEventDispatcher()
 
   export let bindableProperties
   export let value = ""
   export let valid
+  export let allowJS = true
 
   let helpers = handlebarsCompletions()
   let getCaretPosition
   let search = ""
+  let mode = "Handlebars"
 
+  $: usingJS = mode === "JavaScript"
   $: valid = isValid(readableToRuntimeBinding(bindableProperties, value))
   $: dispatch("change", value)
   $: ({ context } = groupBy("type", bindableProperties))
   $: searchRgx = new RegExp(search, "ig")
-  $: filteredColumns = context?.filter(context => {
+  $: filteredBindings = context?.filter(context => {
     return context.readableBinding.match(searchRgx)
   })
   $: filteredHelpers = helpers?.filter(helper => {
     return helper.label.match(searchRgx) || helper.description.match(searchRgx)
   })
+
+  const addHelper = helper => {
+    value = addHBSBinding(value, getCaretPosition(), helper.text)
+  }
+
+  const addBinding = binding => {
+    const fn = usingJS ? addJSBinding : addHBSBinding
+    value = fn(value, getCaretPosition(), binding.readableBinding)
+  }
 </script>
 
 <DrawerContent>
@@ -36,32 +49,24 @@
         <div class="heading">Search</div>
         <Search placeholder="Search" bind:value={search} />
       </section>
-      {#if filteredColumns?.length}
+      {#if filteredBindings?.length}
         <section>
           <div class="heading">Bindable Values</div>
           <ul>
-            {#each filteredColumns as { readableBinding }}
-              <li
-                on:click={() => {
-                  value = addToText(value, getCaretPosition(), readableBinding)
-                }}
-              >
-                {readableBinding}
+            {#each filteredBindings as binding}
+              <li on:click={() => addBinding(binding)}>
+                {binding.readableBinding}
               </li>
             {/each}
           </ul>
         </section>
       {/if}
-      {#if filteredHelpers?.length}
+      {#if filteredHelpers?.length && !usingJS}
         <section>
           <div class="heading">Helpers</div>
           <ul>
             {#each filteredHelpers as helper}
-              <li
-                on:click={() => {
-                  value = addToText(value, getCaretPosition(), helper.text)
-                }}
-              >
+              <li on:click={() => addHelper(helper)}>
                 <div class="helper">
                   <div class="helper__name">{helper.displayText}</div>
                   <div class="helper__description">
@@ -77,24 +82,50 @@
     </div>
   </svelte:fragment>
   <div class="main">
-    <TextArea
-      bind:getCaretPosition
-      bind:value
-      placeholder="Add text, or click the objects on the left to add them to the textbox."
-    />
-    {#if !valid}
-      <p class="syntax-error">
-        Current Handlebars syntax is invalid, please check the guide
-        <a href="https://handlebarsjs.com/guide/">here</a>
-        for more details.
-      </p>
-    {/if}
+    <Tabs selected="Handlebars" on:select={e => (mode = e.detail)}>
+      <Tab title="Handlebars">
+        <div class="main-content">
+          <TextArea
+            bind:getCaretPosition
+            {value}
+            on:change={e => (value = e.detail)}
+            placeholder="Add text, or click the objects on the left to add them to the textbox."
+          />
+          {#if !valid}
+            <p class="syntax-error">
+              Current Handlebars syntax is invalid, please check the guide
+              <a href="https://handlebarsjs.com/guide/">here</a>
+              for more details.
+            </p>
+          {/if}
+        </div>
+      </Tab>
+      {#if allowJS}
+        <Tab title="JavaScript">
+          <div class="main-content">
+            <CodeMirrorEditor
+              bind:getCaretPosition
+              height={200}
+              {value}
+              on:change={e => (value = e.detail)}
+              hints={context?.map(x => `$("${x.readableBinding}")`)}
+            />
+          </div>
+        </Tab>
+      {/if}
+    </Tabs>
   </div>
 </DrawerContent>
 
 <style>
   .main :global(textarea) {
-    min-height: 150px !important;
+    min-height: 202px !important;
+  }
+  .main {
+    margin: calc(-1 * var(--spacing-xl));
+  }
+  .main-content {
+    padding: var(--spacing-s) var(--spacing-xl);
   }
 
   .container {
diff --git a/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
index 4da29cb049..66b567f343 100644
--- a/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
@@ -5,7 +5,7 @@
   import { isValid } from "@budibase/string-templates"
   import { handlebarsCompletions } from "constants/completions"
   import { readableToRuntimeBinding } from "builderStore/dataBinding"
-  import { addToText } from "./utils"
+  import { addHBSBinding } from "./utils"
 
   const dispatch = createEventDispatcher()
 
@@ -47,7 +47,7 @@
               {#each bindings as binding}
                 <li
                   on:click={() => {
-                    value = addToText(value, getCaretPosition(), binding)
+                    value = addHBSBinding(value, getCaretPosition(), binding)
                   }}
                 >
                   <span class="binding__label">{binding.label}</span>
@@ -71,7 +71,7 @@
             {#each filteredHelpers as helper}
               <li
                 on:click={() => {
-                  value = addToText(value, getCaretPosition(), helper.text)
+                  value = addHBSBinding(value, getCaretPosition(), helper.text)
                 }}
               >
                 <div class="helper">
diff --git a/packages/builder/src/components/common/bindings/utils.js b/packages/builder/src/components/common/bindings/utils.js
index 79c496ce9f..28845fe12b 100644
--- a/packages/builder/src/components/common/bindings/utils.js
+++ b/packages/builder/src/components/common/bindings/utils.js
@@ -1,4 +1,4 @@
-export function addToText(value, caretPos, binding) {
+export function addHBSBinding(value, caretPos, binding) {
   binding = typeof binding === "string" ? binding : binding.path
   value = value == null ? "" : value
   if (!value.includes("{{") && !value.includes("}}")) {
@@ -14,3 +14,18 @@ export function addToText(value, caretPos, binding) {
   }
   return value
 }
+
+export function addJSBinding(value, caretPos, binding) {
+  binding = typeof binding === "string" ? binding : binding.path
+  value = value == null ? "" : value
+  binding = `$("${binding}")`
+  if (caretPos.start) {
+    value =
+      value.substring(0, caretPos.start) +
+      binding +
+      value.substring(caretPos.end, value.length)
+  } else {
+    value += binding
+  }
+  return value
+}

From 98ca5da0730fadc2a5a9afbae2bfb3327ab6ddab Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 11 Oct 2021 11:34:19 +0100
Subject: [PATCH 04/14] Fix bug rendering tabs inside a component which uses a
 svelte transition

---
 packages/bbui/src/Tabs/Tab.svelte | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/bbui/src/Tabs/Tab.svelte b/packages/bbui/src/Tabs/Tab.svelte
index 3644280edf..86f2c0ee52 100644
--- a/packages/bbui/src/Tabs/Tab.svelte
+++ b/packages/bbui/src/Tabs/Tab.svelte
@@ -8,11 +8,19 @@
   const selected = getContext("tab")
   let tab
   let tabInfo
+
   const setTabInfo = () => {
-    tabInfo = tab.getBoundingClientRect()
-    if ($selected.title === title) {
-      $selected.info = tabInfo
-    }
+    // If the tabs are being rendered inside a component which uses
+    // a svelte transition to enter, then this initial getBoundingClientRect
+    // will return an incorrect position.
+    // We just need to get this off the main thread to fix this, by using
+    // a 0ms timeout.
+    setTimeout(() => {
+      tabInfo = tab.getBoundingClientRect()
+      if ($selected.title === title) {
+        $selected.info = tabInfo
+      }
+    }, 0)
   }
 
   onMount(() => {

From 4fd31b9eacef8e996ba9e6d83d7cda8baed408ce Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 11 Oct 2021 14:53:55 +0100
Subject: [PATCH 05/14] Add JS helper to string templates

---
 .../string-templates/src/helpers/Helper.js    |  5 +-
 .../string-templates/src/helpers/constants.js |  1 +
 .../string-templates/src/helpers/index.js     |  3 +
 .../src/helpers/javascript.js                 | 66 +++++++++++++++++++
 packages/string-templates/src/index.cjs       |  8 +++
 packages/string-templates/src/index.mjs       |  3 +
 6 files changed, 84 insertions(+), 2 deletions(-)
 create mode 100644 packages/string-templates/src/helpers/javascript.js

diff --git a/packages/string-templates/src/helpers/Helper.js b/packages/string-templates/src/helpers/Helper.js
index 8eee332678..3d7a9316f3 100644
--- a/packages/string-templates/src/helpers/Helper.js
+++ b/packages/string-templates/src/helpers/Helper.js
@@ -6,8 +6,9 @@ class Helper {
 
   register(handlebars) {
     // wrap the function so that no helper can cause handlebars to break
-    handlebars.registerHelper(this.name, value => {
-      return this.fn(value) || value
+    handlebars.registerHelper(this.name, (value, info) => {
+      const context = info?.data?.root
+      return this.fn(value, context || {}) || value
     })
   }
 
diff --git a/packages/string-templates/src/helpers/constants.js b/packages/string-templates/src/helpers/constants.js
index f0d004060a..1f8cf7a59d 100644
--- a/packages/string-templates/src/helpers/constants.js
+++ b/packages/string-templates/src/helpers/constants.js
@@ -19,6 +19,7 @@ module.exports.HelperFunctionNames = {
   OBJECT: "object",
   ALL: "all",
   LITERAL: "literal",
+  JS: "js",
 }
 
 module.exports.LITERAL_MARKER = "%LITERAL%"
diff --git a/packages/string-templates/src/helpers/index.js b/packages/string-templates/src/helpers/index.js
index 23a20c90c7..a8c5ee0752 100644
--- a/packages/string-templates/src/helpers/index.js
+++ b/packages/string-templates/src/helpers/index.js
@@ -1,6 +1,7 @@
 const Helper = require("./Helper")
 const { SafeString } = require("handlebars")
 const externalHandlebars = require("./external")
+const { processJS } = require("./javascript")
 const {
   HelperFunctionNames,
   HelperFunctionBuiltin,
@@ -17,6 +18,8 @@ const HELPERS = [
   new Helper(HelperFunctionNames.OBJECT, value => {
     return new SafeString(JSON.stringify(value))
   }),
+  // javascript helper
+  new Helper(HelperFunctionNames.JS, processJS),
   // this help is applied to all statements
   new Helper(HelperFunctionNames.ALL, value => {
     if (
diff --git a/packages/string-templates/src/helpers/javascript.js b/packages/string-templates/src/helpers/javascript.js
new file mode 100644
index 0000000000..49e3561d8d
--- /dev/null
+++ b/packages/string-templates/src/helpers/javascript.js
@@ -0,0 +1,66 @@
+const CAPTURE_JS = new RegExp(/{{ js "(.*)" }}/)
+const vm = require("vm")
+
+// Helper utility to strip square brackets from a value
+const removeSquareBrackets = value => {
+  if (!value || typeof value !== "string") {
+    return value
+  }
+  const regex = /\[+(.+)]+/
+  const matches = value.match(regex)
+  if (matches && matches[1]) {
+    return matches[1]
+  }
+  return value
+}
+
+// Our context getter function provided to JS code as $.
+// Extracts a value from context.
+const getContextValue = (path, context) => {
+  let data = context
+  path.split(".").forEach(key => {
+    data = data[removeSquareBrackets(key)] || {}
+  })
+  return data
+}
+
+// Evaluates JS code against a certain context
+module.exports.processJS = (handlebars, context) => {
+  try {
+    // Wrap JS in a function and immediately invoke it.
+    // This is required to allow the final `return` statement to be valid.
+    const js = `function run(){${atob(handlebars)}};run();`
+
+    // Our $ context function gets a value from context
+    const sandboxContext = { $: path => getContextValue(path, context) }
+
+    // Create a sandbox with out context and run the JS
+    vm.createContext(sandboxContext)
+    return vm.runInNewContext(js, sandboxContext)
+  } catch (error) {
+    console.warn(error)
+    return "Error while executing JS"
+  }
+}
+
+// Checks if a HBS expression is a valid JS HBS expression
+module.exports.isJSBinding = handlebars => {
+  return module.exports.decodeJSBinding(handlebars) != null
+}
+
+// Encodes a raw JS string as a JS HBS expression
+module.exports.encodeJSBinding = javascript => {
+  return `{{ js "${btoa(javascript)}" }}`
+}
+
+// Decodes a JS HBS expression to the raw JS string
+module.exports.decodeJSBinding = handlebars => {
+  if (!handlebars || typeof handlebars !== "string") {
+    return null
+  }
+  const match = handlebars.match(CAPTURE_JS)
+  if (!match || match.length < 2) {
+    return null
+  }
+  return atob(match[1])
+}
diff --git a/packages/string-templates/src/index.cjs b/packages/string-templates/src/index.cjs
index 05f8c69f5a..31de252381 100644
--- a/packages/string-templates/src/index.cjs
+++ b/packages/string-templates/src/index.cjs
@@ -3,6 +3,7 @@ const { registerAll } = require("./helpers/index")
 const processors = require("./processors")
 const { removeHandlebarsStatements } = require("./utilities")
 const manifest = require("../manifest.json")
+const JS = require("./helpers/javascript")
 
 const hbsInstance = handlebars.create()
 registerAll(hbsInstance)
@@ -159,3 +160,10 @@ module.exports.isValid = string => {
 module.exports.getManifest = () => {
   return manifest
 }
+
+/**
+ * Export utilities for working with JS bindings
+ */
+module.exports.isJSBinding = JS.isJSBinding
+module.exports.decodeJSBinding = JS.decodeJSBinding
+module.exports.encodeJSBinding = JS.encodeJSBinding
\ No newline at end of file
diff --git a/packages/string-templates/src/index.mjs b/packages/string-templates/src/index.mjs
index 90e62b5888..855bd97a55 100644
--- a/packages/string-templates/src/index.mjs
+++ b/packages/string-templates/src/index.mjs
@@ -6,6 +6,9 @@ import templates from "./index.cjs"
 export const isValid = templates.isValid
 export const makePropSafe = templates.makePropSafe
 export const getManifest = templates.getManifest
+export const isJSBinding = templates.isJSBinding
+export const encodeJSBinding = templates.encodeJSBinding
+export const decodeJSBinding = templates.decodeJSBinding
 export const processStringSync = templates.processStringSync
 export const processObjectSync = templates.processObjectSync
 export const processString = templates.processString

From 21c60849c7d3cc788d03f75571599381d9306917 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 11 Oct 2021 14:54:24 +0100
Subject: [PATCH 06/14] Enable binding replacements in JS bindings

---
 .../builder/src/builderStore/dataBinding.js   | 27 ++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index dc1e40e517..3389e20d40 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -7,11 +7,17 @@ import {
 } from "./storeUtils"
 import { store } from "builderStore"
 import { queries as queriesStores, tables as tablesStore } from "stores/backend"
-import { makePropSafe } from "@budibase/string-templates"
+import {
+  makePropSafe,
+  isJSBinding,
+  decodeJSBinding,
+  encodeJSBinding,
+} from "@budibase/string-templates"
 import { TableNames } from "../constants"
 
 // Regex to match all instances of template strings
 const CAPTURE_VAR_INSIDE_TEMPLATE = /{{([^}]+)}}/g
+const CAPTURE_VAR_INSIDE_JS = /\$\("([^")]+)"\)/g
 const CAPTURE_HBS_TEMPLATE = /{{[\S\s]*?}}/g
 
 /**
@@ -430,6 +436,15 @@ function replaceBetween(string, start, end, replacement) {
  * utility function for the readableToRuntimeBinding and runtimeToReadableBinding.
  */
 function bindingReplacement(bindableProperties, textWithBindings, convertTo) {
+  // Decide from base64 if using JS
+  const isJS = isJSBinding(textWithBindings)
+  if (isJS) {
+    textWithBindings = decodeJSBinding(textWithBindings)
+  }
+
+  // Determine correct regex to find bindings to replace
+  const regex = isJS ? CAPTURE_VAR_INSIDE_JS : CAPTURE_VAR_INSIDE_TEMPLATE
+
   const convertFrom =
     convertTo === "runtimeBinding" ? "readableBinding" : "runtimeBinding"
   if (typeof textWithBindings !== "string") {
@@ -441,7 +456,7 @@ function bindingReplacement(bindableProperties, textWithBindings, convertTo) {
     .sort((a, b) => {
       return b.length - a.length
     })
-  const boundValues = textWithBindings.match(CAPTURE_VAR_INSIDE_TEMPLATE) || []
+  const boundValues = textWithBindings.match(regex) || []
   let result = textWithBindings
   for (let boundValue of boundValues) {
     let newBoundValue = boundValue
@@ -449,7 +464,7 @@ function bindingReplacement(bindableProperties, textWithBindings, convertTo) {
     // in the search, working from longest to shortest so always use best match first
     let searchString = newBoundValue
     for (let from of convertFromProps) {
-      if (shouldReplaceBinding(newBoundValue, from, convertTo)) {
+      if (isJS || shouldReplaceBinding(newBoundValue, from, convertTo)) {
         const binding = bindableProperties.find(el => el[convertFrom] === from)
         let idx
         do {
@@ -472,6 +487,12 @@ function bindingReplacement(bindableProperties, textWithBindings, convertTo) {
     }
     result = result.replace(boundValue, newBoundValue)
   }
+
+  // Re-encode to base64 if using JS
+  if (isJS) {
+    result = encodeJSBinding(result)
+  }
+
   return result
 }
 

From d114b3f1ed77c22fb901853ef02e85584aed6432 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 11 Oct 2021 15:51:47 +0100
Subject: [PATCH 07/14] Fix bug determining if a binding is JS or not

---
 packages/builder/src/builderStore/dataBinding.js   |  4 ++++
 .../components/common/bindings/BindingPanel.svelte | 14 ++++++++++----
 .../string-templates/src/helpers/javascript.js     |  6 ++++++
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index 3389e20d40..41f23c5772 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -438,6 +438,10 @@ function replaceBetween(string, start, end, replacement) {
 function bindingReplacement(bindableProperties, textWithBindings, convertTo) {
   // Decide from base64 if using JS
   const isJS = isJSBinding(textWithBindings)
+  console.log("isJS: " + isJS)
+  if (isJS) {
+    console.log(textWithBindings)
+  }
   if (isJS) {
     textWithBindings = decodeJSBinding(textWithBindings)
   }
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 63853213ca..e393702bf1 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -2,7 +2,11 @@
   import groupBy from "lodash/fp/groupBy"
   import { Search, TextArea, DrawerContent, Tabs, Tab } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
-  import { isValid } from "@budibase/string-templates"
+  import {
+    isValid,
+    decodeJSBinding,
+    encodeJSBinding,
+  } from "@budibase/string-templates"
   import { readableToRuntimeBinding } from "builderStore/dataBinding"
   import { handlebarsCompletions } from "constants/completions"
   import { addHBSBinding, addJSBinding } from "./utils"
@@ -15,6 +19,8 @@
   export let valid
   export let allowJS = true
 
+  $: console.log(value)
+
   let helpers = handlebarsCompletions()
   let getCaretPosition
   let search = ""
@@ -82,7 +88,7 @@
     </div>
   </svelte:fragment>
   <div class="main">
-    <Tabs selected="Handlebars" on:select={e => (mode = e.detail)}>
+    <Tabs selected={mode} on:select={e => (mode = e.detail)}>
       <Tab title="Handlebars">
         <div class="main-content">
           <TextArea
@@ -106,8 +112,8 @@
             <CodeMirrorEditor
               bind:getCaretPosition
               height={200}
-              {value}
-              on:change={e => (value = e.detail)}
+              value={decodeJSBinding(value)}
+              on:change={e => (value = encodeJSBinding(e.detail))}
               hints={context?.map(x => `$("${x.readableBinding}")`)}
             />
           </div>
diff --git a/packages/string-templates/src/helpers/javascript.js b/packages/string-templates/src/helpers/javascript.js
index 49e3561d8d..0607fcf1f9 100644
--- a/packages/string-templates/src/helpers/javascript.js
+++ b/packages/string-templates/src/helpers/javascript.js
@@ -58,6 +58,12 @@ module.exports.decodeJSBinding = handlebars => {
   if (!handlebars || typeof handlebars !== "string") {
     return null
   }
+
+  // JS is only valid if it is the only HBS expression
+  if (!handlebars.trim().startsWith("{{ js ")) {
+    return null
+  }
+
   const match = handlebars.match(CAPTURE_JS)
   if (!match || match.length < 2) {
     return null

From b06669fe325670375bfd634810c708b5222140be Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 11 Oct 2021 16:18:20 +0100
Subject: [PATCH 08/14] Fix inserting bindings manually when using JS

---
 .../builder/src/builderStore/dataBinding.js    |  4 ----
 .../common/bindings/BindingPanel.svelte        | 18 ++++++++++++------
 .../string-templates/src/helpers/javascript.js |  1 -
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index 41f23c5772..3389e20d40 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -438,10 +438,6 @@ function replaceBetween(string, start, end, replacement) {
 function bindingReplacement(bindableProperties, textWithBindings, convertTo) {
   // Decide from base64 if using JS
   const isJS = isJSBinding(textWithBindings)
-  console.log("isJS: " + isJS)
-  if (isJS) {
-    console.log(textWithBindings)
-  }
   if (isJS) {
     textWithBindings = decodeJSBinding(textWithBindings)
   }
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index e393702bf1..8c57b381da 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -19,13 +19,12 @@
   export let valid
   export let allowJS = true
 
-  $: console.log(value)
-
   let helpers = handlebarsCompletions()
   let getCaretPosition
   let search = ""
-  let mode = "Handlebars"
+  let mode = value?.startsWith("{{ js ") ? "JavaScript" : "Handlebars"
 
+  $: jsValue = value?.startsWith("{{ js ")
   $: usingJS = mode === "JavaScript"
   $: valid = isValid(readableToRuntimeBinding(bindableProperties, value))
   $: dispatch("change", value)
@@ -38,13 +37,20 @@
     return helper.label.match(searchRgx) || helper.description.match(searchRgx)
   })
 
+  // Adds a HBS helper to the expression
   const addHelper = helper => {
     value = addHBSBinding(value, getCaretPosition(), helper.text)
   }
 
+  // Adds a data binding to the expression
   const addBinding = binding => {
-    const fn = usingJS ? addJSBinding : addHBSBinding
-    value = fn(value, getCaretPosition(), binding.readableBinding)
+    if (usingJS) {
+      let js = decodeJSBinding(value)
+      js = addJSBinding(js, getCaretPosition(), binding.readableBinding)
+      value = encodeJSBinding(js)
+    } else {
+      value = addHBSBinding(value, getCaretPosition(), binding.readableBinding)
+    }
   }
 </script>
 
@@ -93,7 +99,7 @@
         <div class="main-content">
           <TextArea
             bind:getCaretPosition
-            {value}
+            value={jsValue ? null : value}
             on:change={e => (value = e.detail)}
             placeholder="Add text, or click the objects on the left to add them to the textbox."
           />
diff --git a/packages/string-templates/src/helpers/javascript.js b/packages/string-templates/src/helpers/javascript.js
index 0607fcf1f9..cba3966213 100644
--- a/packages/string-templates/src/helpers/javascript.js
+++ b/packages/string-templates/src/helpers/javascript.js
@@ -38,7 +38,6 @@ module.exports.processJS = (handlebars, context) => {
     vm.createContext(sandboxContext)
     return vm.runInNewContext(js, sandboxContext)
   } catch (error) {
-    console.warn(error)
     return "Error while executing JS"
   }
 }

From f0d79a34edca212923d307c4939c4e34d9d7f132 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 12 Oct 2021 15:20:31 +0100
Subject: [PATCH 09/14] Improve handling of toggling between HBS and JS
 bindings

---
 .../common/bindings/BindingPanel.svelte       | 47 ++++++++++++++-----
 1 file changed, 35 insertions(+), 12 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 8c57b381da..15cb3ffcb5 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -22,12 +22,13 @@
   let helpers = handlebarsCompletions()
   let getCaretPosition
   let search = ""
-  let mode = value?.startsWith("{{ js ") ? "JavaScript" : "Handlebars"
+  let initialValueJS = value?.startsWith("{{ js ")
+  let mode = initialValueJS ? "JavaScript" : "Handlebars"
+  let jsValue = initialValueJS ? value : null
+  let hbsValue = initialValueJS ? null : value
 
-  $: jsValue = value?.startsWith("{{ js ")
   $: usingJS = mode === "JavaScript"
   $: valid = isValid(readableToRuntimeBinding(bindableProperties, value))
-  $: dispatch("change", value)
   $: ({ context } = groupBy("type", bindableProperties))
   $: searchRgx = new RegExp(search, "ig")
   $: filteredBindings = context?.filter(context => {
@@ -39,19 +40,41 @@
 
   // Adds a HBS helper to the expression
   const addHelper = helper => {
-    value = addHBSBinding(value, getCaretPosition(), helper.text)
+    hbsValue = addHBSBinding(value, getCaretPosition(), helper.text)
+    dispatch("change", hbsValue)
   }
 
   // Adds a data binding to the expression
   const addBinding = binding => {
     if (usingJS) {
-      let js = decodeJSBinding(value)
+      let js = decodeJSBinding(jsValue)
       js = addJSBinding(js, getCaretPosition(), binding.readableBinding)
-      value = encodeJSBinding(js)
+      jsValue = encodeJSBinding(js)
+      dispatch("change", jsValue)
     } else {
-      value = addHBSBinding(value, getCaretPosition(), binding.readableBinding)
+      hbsValue = addHBSBinding(
+        hbsValue,
+        getCaretPosition(),
+        binding.readableBinding
+      )
+      dispatch("change", hbsValue)
     }
   }
+
+  const onChangeMode = e => {
+    mode = e.detail
+    dispatch("change", mode === "JavaScript" ? jsValue : hbsValue)
+  }
+
+  const onChangeHBSValue = e => {
+    hbsValue = e.detail
+    dispatch("change", hbsValue)
+  }
+
+  const onChangeJSValue = e => {
+    jsValue = encodeJSBinding(e.detail)
+    dispatch("change", jsValue)
+  }
 </script>
 
 <DrawerContent>
@@ -94,13 +117,13 @@
     </div>
   </svelte:fragment>
   <div class="main">
-    <Tabs selected={mode} on:select={e => (mode = e.detail)}>
+    <Tabs selected={mode} on:select={onChangeMode}>
       <Tab title="Handlebars">
         <div class="main-content">
           <TextArea
             bind:getCaretPosition
-            value={jsValue ? null : value}
-            on:change={e => (value = e.detail)}
+            value={hbsValue}
+            on:change={onChangeHBSValue}
             placeholder="Add text, or click the objects on the left to add them to the textbox."
           />
           {#if !valid}
@@ -118,8 +141,8 @@
             <CodeMirrorEditor
               bind:getCaretPosition
               height={200}
-              value={decodeJSBinding(value)}
-              on:change={e => (value = encodeJSBinding(e.detail))}
+              value={decodeJSBinding(jsValue)}
+              on:change={onChangeJSValue}
               hints={context?.map(x => `$("${x.readableBinding}")`)}
             />
           </div>

From 4174b880570aece0965311698d81949e048bb2cf Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 12 Oct 2021 15:32:43 +0100
Subject: [PATCH 10/14] Ensure null or empty values don't cause raw JS to
 appear when executing JS HBS helper

---
 packages/string-templates/src/helpers/javascript.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/string-templates/src/helpers/javascript.js b/packages/string-templates/src/helpers/javascript.js
index cba3966213..2fca180d14 100644
--- a/packages/string-templates/src/helpers/javascript.js
+++ b/packages/string-templates/src/helpers/javascript.js
@@ -36,7 +36,11 @@ module.exports.processJS = (handlebars, context) => {
 
     // Create a sandbox with out context and run the JS
     vm.createContext(sandboxContext)
-    return vm.runInNewContext(js, sandboxContext)
+    const result = vm.runInNewContext(js, sandboxContext)
+    if (result == null || result === "") {
+      return " "
+    }
+    return result
   } catch (error) {
     return "Error while executing JS"
   }

From d6a1e3d248e474658512e2dbb139cd545e1935d6 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 12 Oct 2021 15:40:01 +0100
Subject: [PATCH 11/14] Correctly handle JS nullish values by removing forced
 fallback value of HBS helper

---
 packages/string-templates/src/helpers/Helper.js     | 12 +++++++++---
 packages/string-templates/src/helpers/index.js      |  2 +-
 packages/string-templates/src/helpers/javascript.js |  6 +-----
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/string-templates/src/helpers/Helper.js b/packages/string-templates/src/helpers/Helper.js
index 3d7a9316f3..3dc70ba0dc 100644
--- a/packages/string-templates/src/helpers/Helper.js
+++ b/packages/string-templates/src/helpers/Helper.js
@@ -1,14 +1,20 @@
 class Helper {
-  constructor(name, fn) {
+  constructor(name, fn, useValueFallback = true) {
     this.name = name
     this.fn = fn
+    this.useValueFallback = useValueFallback
   }
 
   register(handlebars) {
     // wrap the function so that no helper can cause handlebars to break
     handlebars.registerHelper(this.name, (value, info) => {
-      const context = info?.data?.root
-      return this.fn(value, context || {}) || value
+      const context = info?.data?.root || {}
+      const result = this.fn(value, context)
+      if (result == null) {
+        return this.useValueFallback ? value : null
+      } else {
+        return result
+      }
     })
   }
 
diff --git a/packages/string-templates/src/helpers/index.js b/packages/string-templates/src/helpers/index.js
index a8c5ee0752..201ecb83da 100644
--- a/packages/string-templates/src/helpers/index.js
+++ b/packages/string-templates/src/helpers/index.js
@@ -19,7 +19,7 @@ const HELPERS = [
     return new SafeString(JSON.stringify(value))
   }),
   // javascript helper
-  new Helper(HelperFunctionNames.JS, processJS),
+  new Helper(HelperFunctionNames.JS, processJS, false),
   // this help is applied to all statements
   new Helper(HelperFunctionNames.ALL, value => {
     if (
diff --git a/packages/string-templates/src/helpers/javascript.js b/packages/string-templates/src/helpers/javascript.js
index 2fca180d14..cba3966213 100644
--- a/packages/string-templates/src/helpers/javascript.js
+++ b/packages/string-templates/src/helpers/javascript.js
@@ -36,11 +36,7 @@ module.exports.processJS = (handlebars, context) => {
 
     // Create a sandbox with out context and run the JS
     vm.createContext(sandboxContext)
-    const result = vm.runInNewContext(js, sandboxContext)
-    if (result == null || result === "") {
-      return " "
-    }
-    return result
+    return vm.runInNewContext(js, sandboxContext)
   } catch (error) {
     return "Error while executing JS"
   }

From 932c332b81eb8c1e551475f2a0b73acc4d9c1371 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 12 Oct 2021 16:07:59 +0100
Subject: [PATCH 12/14] Use custom Input for component settings so that JS
 bindings can be displayed nicley

---
 .../common/bindings/BindingPanel.svelte       | 32 +++++++++++++------
 .../PropertyControls/Input.svelte             | 14 ++++++++
 .../PropertyControls/PropertyControl.svelte   |  1 +
 .../PropertyControls/componentSettings.js     |  3 +-
 4 files changed, 40 insertions(+), 10 deletions(-)
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/Input.svelte

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 15cb3ffcb5..648095f8f5 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -1,6 +1,14 @@
 <script>
   import groupBy from "lodash/fp/groupBy"
-  import { Search, TextArea, DrawerContent, Tabs, Tab } from "@budibase/bbui"
+  import {
+    Search,
+    TextArea,
+    DrawerContent,
+    Tabs,
+    Tab,
+    Body,
+    Layout,
+  } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import {
     isValid,
@@ -17,7 +25,7 @@
   export let bindableProperties
   export let value = ""
   export let valid
-  export let allowJS = true
+  export let allowJS = false
 
   let helpers = handlebarsCompletions()
   let getCaretPosition
@@ -138,13 +146,19 @@
       {#if allowJS}
         <Tab title="JavaScript">
           <div class="main-content">
-            <CodeMirrorEditor
-              bind:getCaretPosition
-              height={200}
-              value={decodeJSBinding(jsValue)}
-              on:change={onChangeJSValue}
-              hints={context?.map(x => `$("${x.readableBinding}")`)}
-            />
+            <Layout noPadding gap="XS">
+              <CodeMirrorEditor
+                bind:getCaretPosition
+                height={200}
+                value={decodeJSBinding(jsValue)}
+                on:change={onChangeJSValue}
+                hints={context?.map(x => `$("${x.readableBinding}")`)}
+              />
+              <Body size="S">
+                JavaScript expressions are executed as functions, so ensure that
+                your expression returns a value.
+              </Body>
+            </Layout>
           </div>
         </Tab>
       {/if}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/Input.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/Input.svelte
new file mode 100644
index 0000000000..74b829ff35
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/Input.svelte
@@ -0,0 +1,14 @@
+<script>
+  import { Input } from "@budibase/bbui"
+  import { isJSBinding } from "@budibase/string-templates"
+
+  export let value
+
+  $: isJS = isJSBinding(value)
+</script>
+
+<Input
+  {...$$props}
+  value={isJS ? "(JavaScript function)" : value}
+  readonly={isJS}
+/>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
index 4ca7d9fc12..91e67c1685 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
@@ -105,6 +105,7 @@
           value={safeValue}
           on:change={e => (tempValue = e.detail)}
           bindableProperties={bindings}
+          allowJS
         />
       </Drawer>
     {/if}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
index c38178b6de..69bb3f8b47 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
@@ -1,4 +1,4 @@
-import { Checkbox, Input, Select, Stepper } from "@budibase/bbui"
+import { Checkbox, Select, Stepper } from "@budibase/bbui"
 import DataSourceSelect from "./DataSourceSelect.svelte"
 import DataProviderSelect from "./DataProviderSelect.svelte"
 import EventsEditor from "./EventsEditor"
@@ -15,6 +15,7 @@ import URLSelect from "./URLSelect.svelte"
 import OptionsEditor from "./OptionsEditor/OptionsEditor.svelte"
 import FormFieldSelect from "./FormFieldSelect.svelte"
 import ValidationEditor from "./ValidationEditor/ValidationEditor.svelte"
+import Input from "./Input.svelte"
 
 const componentMap = {
   text: Input,

From 7d7c28d96766bb4a19ad37845d2dc38263aba3d2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 12 Oct 2021 16:13:07 +0100
Subject: [PATCH 13/14] Fix issue deeply extract falsey values from context
 while executing JS bindings

---
 packages/string-templates/src/helpers/javascript.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/string-templates/src/helpers/javascript.js b/packages/string-templates/src/helpers/javascript.js
index cba3966213..301833fd34 100644
--- a/packages/string-templates/src/helpers/javascript.js
+++ b/packages/string-templates/src/helpers/javascript.js
@@ -19,7 +19,10 @@ const removeSquareBrackets = value => {
 const getContextValue = (path, context) => {
   let data = context
   path.split(".").forEach(key => {
-    data = data[removeSquareBrackets(key)] || {}
+    if (data == null || typeof data !== "object") {
+      return null
+    }
+    data = data[removeSquareBrackets(key)]
   })
   return data
 }

From 445a560e0dce77fdb393a358313d9045911464db Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 12 Oct 2021 16:52:56 +0100
Subject: [PATCH 14/14] Enable JS bindings in all design fields where HBS is
 also enabled

---
 .../automation/SetupPanel/AutomationBlockSetup.svelte      | 2 ++
 .../automation/SetupPanel/QueryParamSelector.svelte        | 1 +
 .../components/automation/SetupPanel/RowSelector.svelte    | 1 +
 .../common/bindings/DrawerBindableCombobox.svelte          | 7 ++++++-
 .../components/common/bindings/DrawerBindableInput.svelte  | 7 ++++++-
 5 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index ff52c7d11a..9ae4801fba 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -178,6 +178,7 @@
             value={inputData[key]}
             on:change={e => onChange(e, key)}
             {bindings}
+            allowJS={false}
           />
         {/if}
       {:else if value.customType === "query"}
@@ -240,6 +241,7 @@
               value={inputData[key]}
               on:change={e => onChange(e, key)}
               {bindings}
+              allowJS={false}
             />
           </div>
         {/if}
diff --git a/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte b/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte
index 91dc369d80..7a4bda3047 100644
--- a/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte
@@ -39,6 +39,7 @@
         type="string"
         {bindings}
         fillWidth={true}
+        allowJS={false}
       />
     {/each}
   </div>
diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
index 1d54c86b4a..9eacc99fb1 100644
--- a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
@@ -88,6 +88,7 @@
               type="string"
               {bindings}
               fillWidth={true}
+              allowJS={false}
             />
           {/if}
         {/if}
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte b/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
index a48a91a44f..655093e684 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
@@ -6,6 +6,7 @@
   } from "builderStore/dataBinding"
   import BindingPanel from "components/common/bindings/BindingPanel.svelte"
   import { createEventDispatcher } from "svelte"
+  import { isJSBinding } from "@budibase/string-templates"
 
   export let panel = BindingPanel
   export let value = ""
@@ -15,11 +16,14 @@
   export let label
   export let disabled = false
   export let options
+  export let allowJS = true
 
   const dispatch = createEventDispatcher()
   let bindingDrawer
+
   $: readableValue = runtimeToReadableBinding(bindings, value)
   $: tempValue = readableValue
+  $: isJS = isJSBinding(value)
 
   const handleClose = () => {
     onChange(tempValue)
@@ -35,7 +39,7 @@
   <Combobox
     {label}
     {disabled}
-    value={readableValue}
+    value={isJS ? "(JavaScript function)" : readableValue}
     on:change={event => onChange(event.detail)}
     {placeholder}
     {options}
@@ -58,6 +62,7 @@
     close={handleClose}
     on:change={event => (tempValue = event.detail)}
     bindableProperties={bindings}
+    {allowJS}
   />
 </Drawer>
 
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
index e5bfab583c..e03e07710f 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
@@ -6,6 +6,7 @@
   } from "builderStore/dataBinding"
   import BindingPanel from "components/common/bindings/BindingPanel.svelte"
   import { createEventDispatcher } from "svelte"
+  import { isJSBinding } from "@budibase/string-templates"
 
   export let panel = BindingPanel
   export let value = ""
@@ -15,12 +16,15 @@
   export let label
   export let disabled = false
   export let fillWidth
+  export let allowJS = true
 
   const dispatch = createEventDispatcher()
   let bindingDrawer
   let valid = true
+
   $: readableValue = runtimeToReadableBinding(bindings, value)
   $: tempValue = readableValue
+  $: isJS = isJSBinding(value)
 
   const saveBinding = () => {
     onChange(tempValue)
@@ -36,7 +40,7 @@
   <Input
     {label}
     {disabled}
-    value={readableValue}
+    value={isJS ? "(JavaScript function)" : readableValue}
     on:change={event => onChange(event.detail)}
     {placeholder}
   />
@@ -60,6 +64,7 @@
     value={readableValue}
     on:change={event => (tempValue = event.detail)}
     bindableProperties={bindings}
+    {allowJS}
   />
 </Drawer>