Add support for new relationship objects in client apps

packages/standard-components/src/forms/Form.svelte

@@ -35,7 +35,7 @@
 
   // Form API contains functions to control the form
   const formApi = {
-    registerField: (field, defaultValue = null, fieldDisabled = false) => {
+    registerField: (field, defaultValue = undefined, fieldDisabled = false) => {
       if (!field) {
         return
       }

packages/standard-components/src/forms/Picker.svelte

@@ -57,7 +57,7 @@
             role="option"
             aria-selected="true"
             tabindex="0"
-            on:click={() => onSelectOption(null)}>
+            on:click={() => onSelectOption(undefined)}>
             <span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
             <svg
               class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"

packages/standard-components/src/forms/RelationshipField.svelte

@@ -22,7 +22,7 @@
   const setFieldText = value => {
     if (fieldSchema?.relationshipType === "one-to-many") {
       if (value?.length && options?.length) {
-        const row = options.find(row => row._id === value[0])
+        const row = options.find(row => row._id === value[0]?._id)
         return getDisplayName(row)
       } else {
         return placeholder || "Choose an option"
@@ -60,27 +60,30 @@
   }
 
   const getDisplayName = row => {
-    return row[tableDefinition?.primaryDisplay || "_id"]
+    return row?.[tableDefinition?.primaryDisplay || "_id"] || "-"
   }
 
   const getValueLookupMap = value => {
     let map = {}
     if (value?.length) {
       value.forEach(option => {
-        map[option] = true
+        if (option?._id) {
+          map[option._id] = true
+        }
       })
     }
     return map
   }
 
-  const toggleOption = option => {
+  const toggleOption = id => {
-    if (fieldSchema.type === "one-to-many") {
+    if (fieldSchema.relationshipType === "one-to-many") {
-      fieldApi.setValue([option])
+      fieldApi.setValue([{ _id: id }])
     } else {
-      if ($fieldState.value.includes(option)) {
+      if ($fieldState.value.find(option => option?._id === id)) {
-        fieldApi.setValue($fieldState.value.filter(x => x !== option))
+        const filtered = $fieldState.value.filter(option => option?._id !== id)
+        fieldApi.setValue(filtered)
       } else {
-        fieldApi.setValue([...$fieldState.value, option])
+        fieldApi.setValue([...$fieldState.value, { _id: id }])
       }
     }
   }

packages/standard-components/src/grid/Relationship/RelationshipLabel.svelte

@@ -7,7 +7,7 @@
 
 <div class="container">
   {#each items as item}
-    <div class="item">{item?.primaryDisplay}</div>
+    <div class="item">{item?.primaryDisplay ?? ''}</div>
   {/each}
 </div>
 

packages/standard-components/src/grid/customRenderer.js

@@ -5,7 +5,7 @@ import AttachmentCell from "./AttachmentCell/Button.svelte"
 import ViewDetails from "./ViewDetails/Cell.svelte"
 import Select from "./Select/Wrapper.svelte"
 import DatePicker from "./DateTime/Wrapper.svelte"
-import RelationshipCount from "./Relationship/RelationshipCount.svelte"
+import RelationshipLabel from "./Relationship/RelationshipLabel.svelte"
 
 const renderers = new Map([
   ["boolean", booleanRenderer],
@@ -127,7 +127,7 @@ function linkedRowRenderer(options, constraints, editable, SDK) {
     container.style.placeItems = "center"
     container.style.height = "100%"
 
-    new RelationshipCount({
+    new RelationshipLabel({
       target: container,
       props: {
         row: params.data,