Added recordDetail component

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

@@ -406,7 +406,7 @@ export default {
         {
           name: "List",
           _component: "@budibase/standard-components/list",
-          description: "Shiny list",
+          description: "Renders all children once per record, of a given model",
           icon: "ri-file-list-fill",
           properties: {
             design: { ...all },
@@ -414,6 +414,17 @@ export default {
           },
           children: [],
         },
+        {
+          name: "Record Detail",
+          _component: "@budibase/standard-components/recorddetail",
+          description: "Loads a record, using an id from the URL, which can be used with {{ context }}, in children",
+          icon: "ri-profile-line",
+          properties: {
+            design: { ...all },
+            settings: [{ label: "Model", key: "model", control: ModelSelect }],
+          },
+          children: [],
+        },
         {
           name: "Map",
           _component: "@budibase/standard-components/datamap",

packages/client/src/render/screenRouter.js

@@ -56,13 +56,13 @@ export const screenRouter = ({ screens, onScreenSelected, window }) => {
 
     const screenIndex = current !== -1 ? current : fallback
 
-    onScreenSelected(screens[screenIndex], _url)
-
     try {
       !url.state && history.pushState(_url, null, _url)
     } catch (_) {
       // ignoring an exception here as the builder runs an iframe, which does not like this
     }
+
+    onScreenSelected(screens[screenIndex], _url)
   }
 
   function click(e) {

packages/standard-components/components.json

@@ -235,15 +235,14 @@
 		"description": "A configurable data list that attaches to your backend models.",
 		"data": true,
 		"props": {
-			"model": "models",
-			"layout": {
-				"type": "options",
-				"default": "list",
-				"options": [
-					"list",
-					"grid"
-				]
+			"model": "models"
 		}
+	},
+	"recorddetail": {
+		"description": "Loads a record, using an ID in the url",
+		"data": true,
+		"props": {
+			"model": "models"
 		}
 	},
 	"datamap": {

packages/standard-components/src/RecordDetail.svelte

@@ -0,0 +1,52 @@
+<script>
+  import { onMount } from "svelte"
+
+  export let _bb
+  export let model
+
+  let headers = []
+  let store = _bb.store
+  let target
+
+  async function fetchFirstRecord() {
+    const FETCH_RECORDS_URL = `/api/views/all_${model}`
+    const response = await _bb.api.get(FETCH_RECORDS_URL)
+    if (response.status === 200) {
+      const allRecords = await response.json()
+      if (allRecords.length > 0) return allRecords[0]
+    }
+  }
+
+  async function fetchData() {
+    const pathParts = window.location.pathname.split("/")
+
+    let record
+    // if srcdoc, then we assume this is the builder preview
+    if(pathParts.length === 0 || pathParts[0] === "srcdoc") {
+      record = await fetchFirstRecord()
+    } else {
+      const id = pathParts[pathParts.length - 1]
+      const GET_RECORD_URL = `/api/${model}/records/${id}`
+      const response = await _bb.api.get(GET_RECORD_URL)
+      if (response.status === 200) {
+        record = await response.json()
+      }
+    }
+
+    if (record) {
+      _bb.attachChildren(target, {
+        hydrate: false,
+        context: record,
+      })
+    } else {
+      throw new Error("Failed to fetch record.", response)
+    }
+  }
+
+  onMount(async () => {
+    await fetchData()
+  })
+</script>
+
+<section bind:this={target}>
+</section>

packages/standard-components/src/index.js

@@ -23,3 +23,4 @@ export { default as list } from "./List.svelte"
 export { default as datasearch } from "./DataSearch.svelte"
 export { default as datamap } from "./DataMap.svelte"
 export { default as embed } from "./Embed.svelte"
+export { default as recorddetail } from "./RecordDetail.svelte"