add multiselect component as option for form design

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

@@ -131,6 +131,7 @@ const fieldTypeToComponentMap = {
   string: "stringfield",
   number: "numberfield",
   options: "optionsfield",
+  array: "multifieldselect",
   boolean: "booleanfield",
   longform: "longformfield",
   datetime: "datetimefield",

packages/builder/src/components/backend/DataTable/RowFieldControl.svelte

@@ -36,6 +36,7 @@
 {:else if type === "array"}
   <Multiselect
     bind:value
+    {label}
     options={meta.constraints.inclusion.reduce((p, n) => p.concat(n), [])}
   />
 {:else if type === "link"}

packages/builder/src/components/design/AppPreview/componentStructure.json

@@ -20,7 +20,8 @@
       "datetimefield",
       "attachmentfield",
       "relationshipfield",
-      "daterangepicker"
+      "daterangepicker",
+      "multifieldselect"
     ]
   },
   {

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

@@ -43,6 +43,7 @@ const componentMap = {
   "field/datetime": FormFieldSelect,
   "field/attachment": FormFieldSelect,
   "field/link": FormFieldSelect,
+  "field/array": FormFieldSelect,
   // Some validation types are the same as others, so not all types are
   // explicitly listed here. e.g. options uses string validation
   "validation/string": ValidationEditor,

packages/standard-components/manifest.json

@@ -2005,6 +2005,112 @@
       }
     ]
   },
+  "multifieldselect": {
+    "name": "MultiField Picker",
+    "icon": "ViewList",
+    "styles": ["size"],
+    "illegalChildren": ["section"],
+    "settings": [
+      {
+        "type": "field/array",
+        "label": "Field",
+        "key": "field"
+      },
+      {
+        "type": "text",
+        "label": "Label",
+        "key": "label"
+      },
+      {
+        "type": "text",
+        "label": "Placeholder",
+        "key": "placeholder",
+        "placeholder": "Choose an option"
+      },
+      {
+        "type": "text",
+        "label": "Default value",
+        "key": "defaultValue"
+      },
+      {
+        "type": "boolean",
+        "label": "Autocomplete",
+        "key": "autocomplete",
+        "defaultValue": false,
+        "dependsOn": {
+          "setting": "optionsType",
+          "value": "select"
+        }
+      },
+      {
+        "type": "boolean",
+        "label": "Disabled",
+        "key": "disabled",
+        "defaultValue": false
+      },
+      {
+        "type": "select",
+        "label": "Options source",
+        "key": "optionsSource",
+        "defaultValue": "schema",
+        "placeholder": "Pick an options source",
+        "options": [
+          {
+            "label": "Schema",
+            "value": "schema"
+          },
+          {
+            "label": "Data provider",
+            "value": "provider"
+          },
+          {
+            "label": "Custom",
+            "value": "custom"
+          }
+        ]
+      },
+      {
+        "type": "dataProvider",
+        "label": "Options Provider",
+        "key": "dataProvider",
+        "dependsOn": {
+          "setting": "optionsSource",
+          "value": "provider"
+        }
+      },
+      {
+        "type": "field",
+        "label": "Label Column",
+        "key": "labelColumn",
+        "dependsOn": {
+          "setting": "optionsSource",
+          "value": "provider"
+        }
+      },
+      {
+        "type": "field",
+        "label": "Value Column",
+        "key": "valueColumn",
+        "dependsOn": {
+          "setting": "optionsSource",
+          "value": "provider"
+        }
+      }, 
+      {
+        "type": "options",
+        "key": "customOptions",
+        "dependsOn": {
+          "setting": "optionsSource",
+          "value": "custom"
+        }
+      },
+      {
+        "type": "validation/string",
+        "label": "Validation",
+        "key": "validation"
+      }
+    ]
+  },
   "booleanfield": {
     "name": "Checkbox",
     "icon": "Checkmark",

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

@@ -0,0 +1,73 @@
+<script>
+  import { Multiselect } from "@budibase/bbui"
+  import Field from "./Field.svelte"
+
+  export let field
+  export let label
+  export let placeholder
+  export let disabled = false
+  export let validation
+  export let defaultValue
+  export let optionsSource = "schema"
+  export let dataProvider
+  export let labelColumn
+  export let valueColumn
+  export let customOptions
+  console.log(defaultValue)
+  let fieldState
+  let fieldApi
+  let fieldSchema
+  $: options = getOptions(
+    optionsSource,
+    fieldSchema,
+    dataProvider,
+    labelColumn,
+    valueColumn
+  )
+  const getOptions = (
+    optionsSource,
+    fieldSchema,
+    dataProvider,
+    labelColumn,
+    valueColumn
+  ) => {
+    // Take options from schema
+    if (optionsSource == null || optionsSource === "schema") {
+      return fieldSchema?.constraints?.inclusion ?? []
+    }
+
+    // Extract options from data provider
+    if (optionsSource === "provider" && valueColumn) {
+      let optionsSet = {}
+      dataProvider?.rows?.forEach(row => {
+        const value = row?.[valueColumn]
+        if (value) {
+          const label = row[labelColumn] || value
+          optionsSet[value] = { value, label }
+        }
+      })
+      return Object.values(optionsSet)
+    }
+
+    // Extract custom options
+    if (optionsSource === "custom" && customOptions) {
+      return customOptions
+    }
+
+    return []
+  }
+</script>
+
+<Field
+  {field}
+  {label}
+  {disabled}
+  {validation}
+  {defaultValue}
+  type="array"
+  bind:fieldState
+  bind:fieldApi
+  bind:fieldSchema
+>
+  <Multiselect {placeholder} options={options[0]} />
+</Field>

packages/standard-components/src/forms/index.js

@@ -3,6 +3,7 @@ export { default as fieldgroup } from "./FieldGroup.svelte"
 export { default as stringfield } from "./StringField.svelte"
 export { default as numberfield } from "./NumberField.svelte"
 export { default as optionsfield } from "./OptionsField.svelte"
+export { default as multifieldselect } from "./MultiFieldSelect.svelte"
 export { default as booleanfield } from "./BooleanField.svelte"
 export { default as longformfield } from "./LongFormField.svelte"
 export { default as datetimefield } from "./DateTimeField.svelte"