Update screen templates to work with latest bindings

packages/builder/src/builderStore/store/screenTemplates/index.js

@@ -15,21 +15,9 @@ const allTemplates = tables => [
   emptyRowDetailScreen,
 ]
 
-// Recurses through a component tree and generates new unique ID's
-const makeUniqueIds = component => {
-  if (!component) {
-    return
-  }
-  component._id = uuid()
-  if (component._children) {
-    component._children.forEach(makeUniqueIds)
-  }
-}
-
 // Allows us to apply common behaviour to all create() functions
 const createTemplateOverride = (frontendState, create) => () => {
   const screen = create()
-  makeUniqueIds(screen.props)
   screen.name = screen.props._id
   screen.routing.route = screen.routing.route.toLowerCase()
   return screen

packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js

@@ -21,26 +21,29 @@ export default function(tables) {
 export const newRowUrl = table => sanitizeUrl(`/${table.name}/new/row`)
 export const NEW_ROW_TEMPLATE = "NEW_ROW_TEMPLATE"
 
-function generateTitleContainer(table) {
-  return makeTitleContainer("New Row").addChild(makeSaveButton(table))
+function generateTitleContainer(table, providerId) {
+  return makeTitleContainer("New Row").addChild(
+    makeSaveButton(table, providerId)
+  )
 }
 
 const createScreen = table => {
-  const dataform = new Component(
-    "@budibase/standard-components/dataformwide"
-  ).instanceName("Form")
-
-  const container = makeMainContainer()
-    .addChild(makeBreadcrumbContainer(table.name, "New"))
-    .addChild(generateTitleContainer(table))
-    .addChild(dataform)
-
-  return new Screen()
+  const screen = new Screen()
     .component("@budibase/standard-components/newrow")
     .table(table._id)
     .route(newRowUrl(table))
     .instanceName(`${table.name} - New`)
     .name("")
-    .addChild(container)
-    .json()
+
+  const dataform = new Component(
+    "@budibase/standard-components/dataformwide"
+  ).instanceName("Form")
+
+  const providerId = screen._json.props._id
+  const container = makeMainContainer()
+    .addChild(makeBreadcrumbContainer(table.name, "New"))
+    .addChild(generateTitleContainer(table, providerId))
+    .addChild(dataform)
+
+  return screen.addChild(container).json()
 }

packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js

@@ -25,9 +25,9 @@ export default function(tables) {
 export const ROW_DETAIL_TEMPLATE = "ROW_DETAIL_TEMPLATE"
 export const rowDetailUrl = table => sanitizeUrl(`/${table.name}/:id`)
 
-function generateTitleContainer(table, title) {
+function generateTitleContainer(table, title, providerId) {
   // have to override style for this, its missing margin
-  const saveButton = makeSaveButton(table).normalStyle({
+  const saveButton = makeSaveButton(table, providerId).normalStyle({
     background: "#000000",
     "border-width": "0",
     "border-style": "None",
@@ -60,8 +60,8 @@ function generateTitleContainer(table, title) {
       onClick: [
         {
           parameters: {
-            rowId: "{{ data._id }}",
-            revId: "{{ data._rev }}",
+            rowId: `{{ ${providerId}._id }}`,
+            revId: `{{ ${providerId}._rev }}`,
             tableId: table._id,
           },
           "##eventHandlerType": "Delete Row",
@@ -82,21 +82,22 @@ function generateTitleContainer(table, title) {
 }
 
 const createScreen = (table, heading) => {
-  const dataform = new Component(
-    "@budibase/standard-components/dataformwide"
-  ).instanceName("Form")
-
-  const container = makeMainContainer()
-    .addChild(makeBreadcrumbContainer(table.name, heading || "Edit"))
-    .addChild(generateTitleContainer(table, heading || "Edit Row"))
-    .addChild(dataform)
-
-  return new Screen()
+  const screen = new Screen()
     .component("@budibase/standard-components/rowdetail")
     .table(table._id)
     .instanceName(`${table.name} - Detail`)
     .route(rowDetailUrl(table))
     .name("")
-    .addChild(container)
-    .json()
+
+  const dataform = new Component(
+    "@budibase/standard-components/dataformwide"
+  ).instanceName("Form")
+
+  const providerId = screen._json.props._id
+  const container = makeMainContainer()
+    .addChild(makeBreadcrumbContainer(table.name, heading || "Edit"))
+    .addChild(generateTitleContainer(table, heading || "Edit Row", providerId))
+    .addChild(dataform)
+
+  return screen.addChild(container).json()
 }

packages/builder/src/builderStore/store/screenTemplates/utils/Component.js

@@ -1,4 +1,4 @@
-import { v4 } from "uuid"
+import { uuid } from "builderStore/uuid"
 import { BaseStructure } from "./BaseStructure"
 
 export class Component extends BaseStructure {
@@ -6,7 +6,7 @@ export class Component extends BaseStructure {
     super(false)
     this._children = []
     this._json = {
-      _id: v4(),
+      _id: uuid(),
       _component: name,
       _styles: {
         normal: {},

packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js

@@ -1,4 +1,5 @@
 import { BaseStructure } from "./BaseStructure"
+import { uuid } from "builderStore/uuid"
 
 export class Screen extends BaseStructure {
   constructor() {
@@ -6,7 +7,7 @@ export class Screen extends BaseStructure {
     this._json = {
       layoutId: "layout_private_master",
       props: {
-        _id: "",
+        _id: uuid(),
         _component: "",
         _styles: {
           normal: {},

packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js

@@ -78,7 +78,7 @@ export function makeBreadcrumbContainer(tableName, text, capitalise = false) {
     .addChild(identifierText)
 }
 
-export function makeSaveButton(table) {
+export function makeSaveButton(table, providerId) {
   return new Component("@budibase/standard-components/button")
     .normalStyle({
       background: "#000000",
@@ -100,8 +100,7 @@ export function makeSaveButton(table) {
       onClick: [
         {
           parameters: {
-            contextPath: "data",
-            tableId: table._id,
+            providerId,
           },
           "##eventHandlerType": "Save Row",
         },

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte

@@ -44,14 +44,14 @@
         <option value={provider._id}>{provider._instanceName}</option>
       {/each}
     </Select>
-  {/if}
 
-  {#if parameters.contextPath}
+    {#if parameters.providerId}
       <SaveFields
         parameterFields={parameters.fields}
         {schemaFields}
         on:fieldschanged={onFieldsChanged} />
     {/if}
+  {/if}
 </div>
 
 <style>

packages/standard-components/manifest.json

@@ -426,6 +426,8 @@
     "icon": "ri-profile-line",
     "hasChildren": true,
     "styleable": true,
+    "dataProvider": true,
+    "datasourceSetting": "table",
     "settings": [
       {
         "type": "table",