Getting client partially working, having an issue with search fields not updating for a table block.

packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterDrawer.svelte

@@ -14,7 +14,7 @@
   import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
   import { generate } from "shortid"
   import { getValidOperatorsForType, OperatorOptions } from "constants/lucene"
-  import { tables } from "stores/backend"
+  import { getFields } from "helpers/searchFields"
 
   export let schemaFields
   export let filters = []
@@ -22,34 +22,6 @@
   export let panel = ClientBindingPanel
   export let allowBindings = true
 
-  const BannedTypes = ["link", "attachment", "formula", "json", "jsonarray"]
-
-  function getTableFields(linkField) {
-    const table = $tables.list.find(table => table._id === linkField.tableId)
-    if (!table || !table.sql) {
-      return []
-    }
-    const linkFields = getFields(Object.values(table.schema), {
-      allowLinks: false,
-    })
-    return linkFields.map(field => ({
-      ...field,
-      name: `${linkField.name}.${field.name}`,
-    }))
-  }
-
-  function getFields(fields, { allowLinks } = { allowLinks: true }) {
-    let fieldNames = fields.filter(field => !BannedTypes.includes(field.type))
-    if (allowLinks) {
-      const linkFields = fields.filter(field => field.type === "link")
-      for (let linkField of linkFields) {
-        // only allow one depth of SQL relationship filtering
-        fieldNames = fieldNames.concat(getTableFields(linkField))
-      }
-    }
-    return fieldNames
-  }
-
   $: enrichedSchemaFields = getFields(schemaFields || [])
   $: fieldOptions = enrichedSchemaFields.map(field => field.name) || []
   $: valueTypeOptions = allowBindings ? ["Value", "Binding"] : ["Value"]

packages/builder/src/components/design/PropertiesPanel/PropertyControls/SearchFieldSelect.svelte

@@ -0,0 +1,52 @@
+<script>
+  import { Multiselect } from "@budibase/bbui"
+  import {
+    getDatasourceForProvider,
+    getSchemaForDatasource,
+  } from "builderStore/dataBinding"
+  import { currentAsset } from "builderStore"
+  import { tables } from "stores/backend"
+  import { createEventDispatcher } from "svelte"
+  import { getTableFields } from "helpers/searchFields"
+
+  export let componentInstance = {}
+  export let value = ""
+  export let placeholder
+
+  const dispatch = createEventDispatcher()
+  $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
+  $: schema = getSchemaForDatasource($currentAsset, datasource).schema
+  $: options = getOptions(datasource, schema || {})
+  $: boundValue = getSelectedOption(value, options)
+
+  function getOptions(ds, dsSchema) {
+    let base = Object.keys(dsSchema)
+    if (!ds?.tableId) {
+      return base
+    }
+    const currentTable = $tables.list.find(table => table._id === ds.tableId)
+    if (currentTable && currentTable.sql) {
+      for (let column of Object.values(currentTable.schema)) {
+        if (column.type === "link") {
+          base = base.concat(getTableFields(column).map(field => field.name))
+        }
+      }
+    }
+    return base
+  }
+
+  function getSelectedOption(selectedOptions, allOptions) {
+    // Fix the hardcoded default string value
+    if (!Array.isArray(selectedOptions)) {
+      selectedOptions = []
+    }
+    return selectedOptions.filter(val => allOptions.indexOf(val) !== -1)
+  }
+
+  const setValue = value => {
+    boundValue = getSelectedOption(value.detail, options)
+    dispatch("change", boundValue)
+  }
+</script>
+
+<Multiselect {placeholder} value={boundValue} on:change={setValue} {options} />

packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js

@@ -7,6 +7,7 @@ import ColorPicker from "./ColorPicker.svelte"
 import { IconSelect } from "./IconSelect"
 import FieldSelect from "./FieldSelect.svelte"
 import MultiFieldSelect from "./MultiFieldSelect.svelte"
+import SearchFieldSelect from "./SearchFieldSelect.svelte"
 import SchemaSelect from "./SchemaSelect.svelte"
 import SectionSelect from "./SectionSelect.svelte"
 import NavigationEditor from "./NavigationEditor/NavigationEditor.svelte"
@@ -30,6 +31,7 @@ const componentMap = {
   icon: IconSelect,
   field: FieldSelect,
   multifield: MultiFieldSelect,
+  searchfield: SearchFieldSelect,
   options: OptionsEditor,
   schema: SchemaSelect,
   section: SectionSelect,

packages/builder/src/constants/backend/index.js

@@ -229,3 +229,11 @@ export const PaginationLocations = [
   { label: "Query parameters", value: "query" },
   { label: "Request body", value: "body" },
 ]
+
+export const BannedSearchTypes = [
+  "link",
+  "attachment",
+  "formula",
+  "json",
+  "jsonarray",
+]

packages/builder/src/helpers/searchFields.js

@@ -0,0 +1,31 @@
+import { tables } from "../stores/backend"
+import { BannedSearchTypes } from "../constants/backend"
+import { get } from "svelte/store"
+
+export function getTableFields(linkField) {
+  const table = get(tables).list.find(table => table._id === linkField.tableId)
+  if (!table || !table.sql) {
+    return []
+  }
+  const linkFields = getFields(Object.values(table.schema), {
+    allowLinks: false,
+  })
+  return linkFields.map(field => ({
+    ...field,
+    name: `${table.name}.${field.name}`,
+  }))
+}
+
+export function getFields(fields, { allowLinks } = { allowLinks: true }) {
+  let fieldNames = fields.filter(
+    field => !BannedSearchTypes.includes(field.type)
+  )
+  if (allowLinks) {
+    const linkFields = fields.filter(field => field.type === "link")
+    for (let linkField of linkFields) {
+      // only allow one depth of SQL relationship filtering
+      fieldNames = fieldNames.concat(getTableFields(linkField))
+    }
+  }
+  return fieldNames
+}

packages/client/manifest.json

@@ -2811,7 +2811,7 @@
         "key": "dataSource"
       },
       {
-        "type": "multifield",
+        "type": "searchfield",
         "label": "Search Columns",
         "key": "searchColumns",
         "placeholder": "Choose search columns"

packages/client/src/components/app/blocks/TableBlock.svelte

@@ -41,9 +41,11 @@
   let dataProviderId
   let schema
   let schemaLoaded = false
+  let enrichedSearchColumns
+  let enrichedSearchColumnsLoaded = false
 
   $: fetchSchema(dataSource)
-  $: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema)
+  $: enrichSearchColumns(searchColumns, schema)
   $: enrichedFilter = enrichFilter(filter, enrichedSearchColumns, formId)
   $: titleButtonAction = [
     {
@@ -71,9 +73,9 @@
   }
 
   // Determine data types for search fields and only use those that are valid
-  const enrichSearchColumns = (searchColumns, schema) => {
+  const enrichSearchColumns = async (searchColumns, schema) => {
     let enrichedColumns = []
-    searchColumns?.forEach(column => {
+    const addType = column => {
       const schemaType = schema?.[column]?.type
       const componentType = schemaComponentMap[schemaType]
       if (componentType) {
@@ -82,9 +84,39 @@
           componentType,
           type: schemaType,
         })
+        return true
       }
+      return false
+    }
+    for (let column of searchColumns || []) {
+      // if addType returns false, it didn't find one, look for SQL relationships
+      if (!addType(column) && column.includes(".")) {
+        const [tableName, linkColumn] = column.split(".")
+        for (let colSchema of Object.values(schema || {})) {
+          // found the related table
+          if (
+            colSchema.type === "link" &&
+            colSchema.tableId &&
+            colSchema.tableId.endsWith(tableName)
+          ) {
+            try {
+              const linkSchema = await fetchDatasourceSchema({
+                ...dataSource,
+                tableId: colSchema.tableId,
               })
-    return enrichedColumns.slice(0, 3)
+              if (linkSchema) {
+                schema[column] = linkSchema[linkColumn]
+                addType(column)
+              }
+            } catch (err) {
+              // ignore the error, couldn't get table
+            }
+          }
+        }
+      }
+    }
+    enrichedSearchColumns = enrichedColumns.slice(0, 3)
+    enrichedSearchColumnsLoaded = true
   }
 
   // Load the datasource schema so we can determine column types
@@ -96,7 +128,7 @@
   }
 </script>
 
-{#if schemaLoaded}
+{#if schemaLoaded && enrichedSearchColumnsLoaded}
   <Block>
     <div class={size} use:styleable={$component.styles}>
       <BlockComponent type="form" bind:id={formId} props={{ dataSource }}>

packages/string-templates/test/basic.spec.js

@@ -146,3 +146,14 @@ describe("check manifest", () => {
     )
   })
 })
+
+describe("check full stops that are safe", () => {
+  it("should allow using an escaped full stop", async () => {
+    const data = {
+      "c53a4a604fa754d33baaafd5bca4d3658-YXuUBqt5vI": { "persons.firstname": "1" }
+    }
+    const template = "{{ [c53a4a604fa754d33baaafd5bca4d3658-YXuUBqt5vI].[persons.firstname] }}"
+    const output = await processString(template, data)
+    expect(output).toEqual("1")
+  })
+})