diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
index abf226048b..239cebdd0a 100644
--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@@ -25,16 +25,10 @@
name: "Screen Placeholder",
route: "*",
props: {
- "_id": "49c3d0a2-7028-46f0-b004-7eddf62ad01c",
+ "_id": "screenslot-placeholder",
"_component": "@budibase/standard-components/container",
"_styles": {
- "normal": {
- "padding": "0px",
- "font-family": "Roboto",
- "border-width": "0",
- "border-style": "None",
- "text-align": "center"
- },
+ "normal": {},
"hover": {},
"active": {},
"selected": {}
@@ -45,47 +39,87 @@
"type": "div",
"_children": [
{
- "_id": "335428f7-f9ca-4acd-9e76-71bc8ad27324",
- "_component": "@budibase/standard-components/container",
- "_styles": {
- "normal": {
- "padding": "16px",
- "border-style": "Dashed",
- "border-width": "2px",
- "border-color": "#8a8989fa"
- },
- "hover": {},
- "active": {},
- "selected": {}
+ "_id": "51a1b494-0fa4-49c3-90cc-c2a6c7a3f888",
+ "_component": "@budibase/standard-components/container",
+ "_styles": {
+ "normal": {
+ "display": "flex",
+ "flex-direction": "column",
+ "align-items": "center"
},
- "_code": "",
- "className": "",
- "onLoad": [],
- "type": "div",
- "_instanceId": "inst_b3b4e95_ab0df02dda3f4d8eb4b35eea2968bad3",
- "_instanceName": "Container",
- "_children": [
- {
- "_id": "ddb6a225-33ba-4ba8-91da-bc6a2697ebf9",
- "_component": "@budibase/standard-components/heading",
- "_styles": {
- "normal": {
- "font-family": "Roboto"
- },
- "hover": {},
- "active": {},
- "selected": {}
+ "hover": {},
+ "active": {},
+ "selected": {}
+ },
+ "_code": "",
+ "className": "",
+ "onLoad": [],
+ "type": "div",
+ "_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
+ "_instanceName": "Container",
+ "_children": [
+ {
+ "_id": "90a52cd0-f215-46c1-b29b-e28f9e7edf72",
+ "_component": "@budibase/standard-components/heading",
+ "_styles": {
+ "normal": {
+ "width": "500px",
+ "padding": "8px"
},
- "_code": "",
- "className": "",
- "text": "Your screens go here",
- "type": "h1",
- "_instanceId": "inst_b3b4e95_ab0df02dda3f4d8eb4b35eea2968bad3",
- "_instanceName": "Heading",
- "_children": []
- }
- ]
- }
+ "hover": {},
+ "active": {},
+ "selected": {}
+ },
+ "_code": "",
+ "className": "",
+ "text": "Screenslot",
+ "type": "h1",
+ "_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
+ "_instanceName": "Heading",
+ "_children": []
+ },
+ {
+ "_id": "71a3da65-72c6-4c43-8c6a-49871c07b77d",
+ "_component": "@budibase/standard-components/text",
+ "_styles": {
+ "normal": {
+ "max-width": "",
+ "text-align": "left",
+ "width": "500px",
+ "padding": "8px"
+ },
+ "hover": {},
+ "active": {},
+ "selected": {}
+ },
+ "_code": "",
+ "text": "The screens that you create will be displayed inside this box.",
+ "type": "none",
+ "_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
+ "_instanceName": "Text"
+ },
+ {
+ "_id": "8af80374-460d-497b-a5d8-7dd2ec4a7bbc",
+ "_component": "@budibase/standard-components/text",
+ "_styles": {
+ "normal": {
+ "max-width": "",
+ "text-align": "left",
+ "width": "500px",
+ "padding": "8px"
+ },
+ "hover": {},
+ "active": {},
+ "selected": {}
+ },
+ "_code": "",
+ "text": "This box is just a placeholder, to show you the position of screens.",
+ "type": "none",
+ "_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
+ "_instanceName": "Text"
+ }
+ ]
+ }
],
"_instanceName": "Content Placeholder"
},
diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
index b78f882fe1..e269e3166e 100644
--- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
@@ -24,6 +24,16 @@ export default `
text-transform: uppercase;
font-weight: bold;
}
+
+ .container-screenslot-placeholder {
+ padding: 20px;
+ text-align: center;
+ border-style: dashed !important;
+ border-width: 1px;
+ color: #806fde;
+ background: #e9e6ff44;
+ height: 100%;
+ }
-{#if selectedModel.schema && Object.keys(selectedModel.schema).length === 0}
-
-{:else if $backendUiStore.selectedDatabase._id && selectedModel.name}
+{#if $backendUiStore.selectedDatabase._id && selectedModel.name}
{:else}
create your first table to start building
diff --git a/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json b/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
index a86d485fe5..032848e68e 100644
--- a/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
+++ b/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
@@ -5,13 +5,58 @@
"componentLibraries": ["@budibase/standard-components", "@budibase/materialdesign-components"],
"props" : {
"_id": "private-master-root",
- "_component": "@budibase/standard-components/container",
- "_children": [
+ "_component": "@budibase/standard-components/container",
+ "_children": [
+ {
+ "_id": "c32dd256-a61c-4c41-876e-95e91c5e3a43",
+ "_component": "@budibase/standard-components/container",
+ "_styles": {
+ "normal": {
+ "background": "#e8e8ef",
+ "padding": "8px",
+ "color": "#393C44",
+ "display": "N/A",
+ "flex-direction": "column"
+ },
+ "hover": {},
+ "active": {},
+ "selected": {}
+ },
+ "_code": "",
+ "className": "",
+ "onLoad": [],
+ "type": "div",
+ "_instanceId": "inst_1808f0d_e1277174d255421784ef2467d470abc8",
+ "_instanceName": "Container",
+ "_children": [
+ {
+ "_id": "fbd9520f-6b34-4e3e-828d-0197144568a1",
+ "_component": "@budibase/standard-components/heading",
+ "_styles": {
+ "normal": {},
+ "hover": {},
+ "active": {},
+ "selected": {}
+ },
+ "_code": "",
+ "className": "",
+ "text": "{{ name }}",
+ "type": "h1",
+ "_instanceId": "inst_1808f0d_e1277174d255421784ef2467d470abc8",
+ "_instanceName": "Heading",
+ "_children": []
+ }
+ ]
+ },
{
"_id": "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
"_component": "##builtin/screenslot",
"_styles": {
- "normal": {},
+ "normal": {
+ "padding": "8px",
+ "align-items": "flex-start",
+ "height": "100vh"
+ },
"hover": {},
"active": {},
"selected": {}
@@ -20,14 +65,22 @@
"_children": []
}
],
- "type": "div",
- "_styles": {
- "active": {},
- "hover": {},
- "normal": {},
- "selected": {}
- },
- "_code": ""
+ "type": "div",
+ "_styles": {
+ "active": {},
+ "hover": {},
+ "normal": {
+ "display": "flex",
+ "flex-direction": "column",
+ "align-items": "stretch",
+ "justify-content": "flex-start",
+ "height": "100vh"
+ },
+ "selected": {}
+ },
+ "_code": "",
+ "className": "",
+ "onLoad": []
},
"_css": "",
"uiFunctions": ""
diff --git a/packages/standard-components/src/DataTable.svelte b/packages/standard-components/src/DataTable.svelte
index e6f097314c..6782a9925c 100644
--- a/packages/standard-components/src/DataTable.svelte
+++ b/packages/standard-components/src/DataTable.svelte
@@ -8,6 +8,16 @@
let headers = []
let store = _bb.store
+ const shouldDisplayField = name => {
+ if (name.startsWith("_")) return false
+ // always 'record'
+ if (name === "type") return false
+ // tables are always tied to a single modelId, this is irrelevant
+ if (name === "modelId") return false
+
+ return true
+ }
+
async function fetchData() {
const FETCH_RECORDS_URL = `/api/views/all_${model}`
@@ -20,7 +30,7 @@
return state
})
- headers = Object.keys(json[0]).filter(key => !key.startsWith("_"))
+ headers = Object.keys(json[0]).filter(shouldDisplayField)
} else {
throw new Error("Failed to fetch records.", response)
}