adds functionality to show the user the readableBinding while it saves the runtimeBinding

packages/builder/src/components/userInterface/BindingDropdown.svelte

@@ -1,27 +1,9 @@
 <script>
-  import api from "builderStore/api"
-
-  import { store } from "builderStore"
-  import fetchBindableProperties from "builderStore/fetchBindableProperties"
   export let value = "Something is wrong"
-
-  async function getBindableProperties() {
-    const modelResponse = await api.get(`/api/models/`)
-    const models = await modelResponse.json()
-
-    const result = fetchBindableProperties({
-      componentInstanceId: $store.currentComponentInfo._id,
-      components: $store.components,
-      screen: $store.currentPreviewItem,
-      models: [],
-    })
-
-    console.log("Result: ", result)
-  }
 </script>
 
 <div class="container">{value}</div>
-<button on:click={getBindableProperties}>Get stuff!</button>
+<button on:click>Get stuff!</button>
 <ul>
   <li>1</li>
   <li>2</li>

packages/builder/src/components/userInterface/PropertyControl.svelte

@@ -1,4 +1,6 @@
 <script>
+  import { store, backendUiStore } from "builderStore"
+  import fetchBindableProperties from "builderStore/fetchBindableProperties"
   import { DropdownMenu } from "@budibase/bbui"
   import BindingDropdown from "components/userInterface/BindingDropdown.svelte"
   import { onMount, getContext } from "svelte"
@@ -9,9 +11,41 @@
   export let value
   export let props = {}
   export let onChange = () => {}
+
+  let bindableProperties
+
   let anchor
   let dropdown
 
+  $: console.log()
+
+  async function getBindableProperties() {
+    // Get all bindableProperties
+    bindableProperties = fetchBindableProperties({
+      componentInstanceId: $store.currentComponentInfo._id,
+      components: $store.components,
+      screen: $store.currentPreviewItem,
+      models: $backendUiStore.models,
+    })
+  }
+
+  async function replaceBindings(val) {
+    getBindableProperties()
+    // Find all instances of mustasche
+    const boundValues = val.match(/{{([^}]+)}}/g)
+
+    // Replace with names:
+    boundValues.forEach(v => {
+      const binding = bindableProperties.find(({ readableBinding }) => {
+        return v === `{{ ${readableBinding} }}`
+      })
+      if (binding) {
+        val = val.replace(v, `{{ ${binding.runtimeBinding} }}`)
+      }
+    })
+    onChange(key, val)
+  }
+
   function handleChange(key, v) {
     let innerVal = v
     if (typeof v === "object") {
@@ -21,13 +55,30 @@
         innerVal = props.valueKey ? v.target[props.valueKey] : v.target.value
       }
     }
-    onChange(key, innerVal)
+    replaceBindings(innerVal)
   }
 
   const safeValue = () => {
+    getBindableProperties()
+    let temp = value
+    const boundValues = value.match(/{{([^}]+)}}/g) || []
+    console.log(boundValues)
+
+    // Replace with names:
+    boundValues.forEach(v => {
+      const { readableBinding } = bindableProperties.find(
+        ({ runtimeBinding }) => {
+          return v === `{{ ${runtimeBinding} }}`
+        }
+      )
+      if (readableBinding) {
+        temp = temp.replace(v, `{{ ${readableBinding} }}`)
+      }
+    })
+    // console.log(temp)
     return value === undefined && props.defaultValue !== undefined
       ? props.defaultValue
-      : value
+      : temp
   }
 
   //Incase the component has a different value key name
@@ -35,7 +86,7 @@
     props.valueKey ? { [props.valueKey]: safeValue() } : { value: safeValue() }
 </script>
 
-<div class="property-control">
+<div class="property-control" bind:this={anchor}>
   <div class="label">{label}</div>
   <div data-cy={`${key}-prop-control`} class="control">
     <svelte:component
@@ -46,9 +97,7 @@
       {...props}
       name={key} />
   </div>
-  <div bind:this={anchor}>
-    <button on:click={dropdown.show}>Dropdown</button>
-  </div>
+  <button on:click={dropdown.show}>O</button>
 </div>
 <DropdownMenu bind:this={dropdown} {anchor} align="right">
   <BindingDropdown />
@@ -56,6 +105,7 @@
 
 <style>
   .property-control {
+    position: relative;
     display: flex;
     flex-flow: row;
     width: 260px;
@@ -81,4 +131,12 @@
     padding-left: 2px;
     max-width: 164px;
   }
+  button {
+    position: absolute;
+    background: none;
+    border: none;
+    right: 0px;
+    top: 0;
+    bottom: 0;
+  }
 </style>

packages/builder/src/components/userInterface/PropertyGroup.svelte

@@ -10,6 +10,8 @@
   export let onStyleChanged = () => {}
   export let open = false
 
+  $: console.log(properties)
+
   $: style = componentInstance["_styles"][styleCategory] || {}
 </script>