Settings >URL select handles Record detail urls

packages/builder/src/builderStore/fetchBindableProperties.js

@@ -90,6 +90,8 @@ const contextToBindables = (models, walkResult) => context => {
     runtimeBinding: `${contextParentPath}data.${key}`,
     // how the binding exressions looks to the user of the builder
     readableBinding: `${context.instance._instanceName}.${model.name}.${key}`,
+    // model / view info
+    model: context.model,
   })
 
   // see ModelViewSelect.svelte for the format of context.model

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

@@ -1,18 +1,80 @@
 <script>
   import { DataList } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
-  import { store } from "builderStore"
+  import { store, backendUiStore } from "builderStore"
+  import fetchBindableProperties from "builderStore/fetchBindableProperties"
 
   const dispatch = createEventDispatcher()
 
   export let value = ""
 
+  $: urls = getUrls()
+
   const handleBlur = () => dispatch("change", value)
+
+  // this will get urls of all screens, but only
+  // choose detail screens that are usable in the current context
+  // and substitute the :id param for the actual {{ ._id }} binding
+  const getUrls = () => {
+    const urls = [
+      ...$store.screens
+        .filter(screen => !screen.props._component.endsWith("/rowdetail"))
+        .map(screen => ({
+          name: screen.props._instanceName,
+          url: screen.route,
+          sort: screen.props._component,
+        })),
+    ]
+
+    const bindableProperties = fetchBindableProperties({
+      componentInstanceId: $store.currentComponentInfo._id,
+      components: $store.components,
+      screen: $store.currentPreviewItem,
+      models: $backendUiStore.models,
+    })
+
+    const idBindingForModel = modelId => {
+      for (let bindableProp of bindableProperties) {
+      }
+    }
+
+    const detailScreens = $store.screens.filter(screen =>
+      screen.props._component.endsWith("/rowdetail")
+    )
+
+    for (let detailScreen of detailScreens) {
+      const idBinding = bindableProperties.find(p => {
+        if (
+          p.type === "context" &&
+          p.runtimeBinding.endsWith("._id") &&
+          p.model
+        ) {
+          const modelId =
+            typeof p.model === "string" ? p.model : p.model.modelId
+          return modelId === detailScreen.props.model
+        }
+        return false
+      })
+
+      if (idBinding) {
+        urls.push({
+          name: detailScreen.props._instanceName,
+          url: detailScreen.route.replace(
+            ":id",
+            `{{ ${idBinding.runtimeBinding} }}`
+          ),
+          sort: detailScreen.props._component,
+        })
+      }
+
+      return urls
+    }
+  }
 </script>
 
 <DataList editable secondary on:blur={handleBlur} on:change bind:value>
   <option value="" />
-  {#each $store.allScreens as screen}
-    <option value={screen.route}>{screen.props._instanceName}</option>
+  {#each urls as url}
+    <option value={url.url}>{url.name}</option>
   {/each}
 </DataList>

packages/builder/src/components/userInterface/temporaryPanelStructure.js

@@ -356,7 +356,7 @@ export default {
               {
                 label: "destinationUrl",
                 key: "destinationUrl",
-                control: Input,
+                control: ScreenSelect,
                 placeholder: "/table/_id",
               },
             ],
@@ -405,7 +405,7 @@ export default {
                   {
                     label: "Link Url",
                     key: "linkUrl",
-                    control: Input,
+                    control: ScreenSelect,
                     placeholder: "Link URL",
                   },
                   {
@@ -480,7 +480,7 @@ export default {
                   {
                     label: "Link Url",
                     key: "linkUrl",
-                    control: Input,
+                    control: ScreenSelect,
                     placeholder: "Link URL",
                   },
                   {