Improve the Local Baserow action form experience (baserow#4340)

* Working on improving the Local Baserow field mappings so that they clarify what data type they expect. We now also show the field's description, if it's set.

* Removing the example, it was from a previous idea.

* Re-adding the stylelint comment.

Author: picklepete

changelog/entries/unreleased/feature/improved_the_local_baserow_action_fields_so_that_they_inform.json

@@ -0,0 +1,9 @@
+{
+    "type": "feature",
+    "message": "Improved the Local Baserow action fields so that they inform users about what data type they expect to receive.",
+    "issue_origin": "github",
+    "issue_number": null,
+    "domain": "integration",
+    "bullet_points": [],
+    "created_at": "2025-11-26"
+}

web-frontend/modules/core/assets/scss/components/formula_input_field.scss

@@ -40,8 +40,8 @@
 }
 
 /* stylelint-disable-next-line selector-class-pattern */
-.ProseMirror div.is-editor-empty:first-child::before {
-  content: attr(data-placeholder);
+.formula-input-field--formula-empty .ProseMirror div:first-child::before {
+  content: var(--formula-placeholder);
   float: left;
   color: $palette-neutral-500;
   pointer-events: none;

web-frontend/modules/core/components/FormGroup.vue

@@ -116,7 +116,7 @@ export default {
       default: null,
     },
     /**
-     * Wether the label should be displayed as a small label.
+     * Whether the label should be displayed as a small label.
      */
     smallLabel: {
       type: Boolean,
@@ -149,7 +149,7 @@ export default {
       default: false,
     },
     /**
-     * Whether the label is required. (if false that will diplay an 'optional' label)
+     * Whether the label is required. (if false that will display an 'optional' label)
      */
     required: {
       type: Boolean,

web-frontend/modules/core/components/formula/FormulaInputField.vue

@@ -9,6 +9,7 @@
         role="textbox"
         :class="classes"
         :editor="editor"
+        :style="{ '--formula-placeholder': `'${placeholder}'` }"
         @data-node-clicked="dataNodeClicked"
       />
     </div>
@@ -39,7 +40,6 @@
 
 <script>
 import { Editor, EditorContent, Node } from '@tiptap/vue-2'
-import { Placeholder } from '@tiptap/extension-placeholder'
 import { Document } from '@tiptap/extension-document'
 import { Text } from '@tiptap/extension-text'
 import { History } from '@tiptap/extension-history'
@@ -175,6 +175,11 @@ export default {
     }
   },
   computed: {
+    isFormulaEmpty() {
+      if (!this.editor) return true
+      const formula = this.toFormula(this.wrapperContent)
+      return !formula || formula.length === 0
+    },
     classes() {
       return {
         'form-input--disabled': this.disabled,
@@ -183,13 +188,9 @@ export default {
           !this.disabled && !this.readOnly && this.isFocused,
         'formula-input-field--disabled': this.disabled,
         'formula-input-field--error': this.isFormulaInvalid,
+        'formula-input-field--formula-empty': this.isFormulaEmpty,
       }
     },
-    placeHolderExt() {
-      return Placeholder.configure({
-        placeholder: this.placeholder,
-      })
-    },
     formulaComponents() {
       return Object.values(this.$registry.getAll('runtimeFormulaFunction'))
         .map((type) => type.formulaComponent)
@@ -283,7 +284,6 @@ export default {
         ArrowKeyNavigationExtension,
         SmartDeletionExtension,
         ZWSManagementExtension,
-        this.placeHolderExt,
         History.configure({
           depth: 100,
         }),

web-frontend/modules/database/fieldTypes.js

@@ -3659,7 +3659,7 @@ export class SingleSelectFieldType extends SelectOptionBaseFieldType {
   }
 
   getDocsDataType() {
-    return 'integer or string'
+    return 'number'
   }
 
   getDocsDescription(field) {
@@ -4956,7 +4956,7 @@ export class PasswordFieldType extends FieldType {
   }
 
   getDocsDataType(field) {
-    return 'bool'
+    return 'boolean'
   }
 
   getDocsDescription(field) {

web-frontend/modules/integrations/localBaserow/components/services/FieldMappingForm.vue

@@ -1,14 +1,18 @@
 <template>
   <div v-if="mapping?.enabled">
-    <FormGroup small-label :label="field.name" required class="margin-bottom-2">
+    <FormGroup
+      small-label
+      :label="field.name"
+      :help-icon-tooltip="field.description"
+      required
+      class="margin-bottom-2"
+    >
       <InViewport>
         <InjectedFormulaInput
           :key="`${field.id} ${mapping.enabled}`"
           v-model="fieldValue"
           :disabled="!mapping.enabled"
-          :placeholder="
-            $t('localBaserowUpsertRowServiceForm.fieldMappingPlaceholder')
-          "
+          :placeholder="placeholderForType"
         />
         <template #placeholder>
           <div class="field-mapping-form__placeholder" />
@@ -66,6 +70,9 @@ export default {
     }
   },
   computed: {
+    fieldType() {
+      return this.$registry.get('field', this.field.type)
+    },
     fieldValue: {
       get() {
         return this.localValue
@@ -81,6 +88,14 @@ export default {
         }, 500)
       },
     },
+    placeholderForType() {
+      const expectedType = this.fieldType.getDocsDataType(this.field)
+      const capitalizedType =
+        expectedType.charAt(0).toUpperCase() + expectedType.slice(1)
+      return this.$t(
+        `localBaserowUpsertRowServiceForm.fieldMappingPlaceholder${capitalizedType}`
+      )
+    },
   },
   watch: {
     'mapping.value'(newValue) {

web-frontend/modules/integrations/locales/en.json

@@ -119,7 +119,7 @@
   "localBaserowGetRowForm": {
     "rowFieldLabel": "Row ID",
     "invalidFormula": "The formula is invalid",
-    "rowFieldPlaceHolder": "Select a row ID",
+    "rowFieldPlaceHolder": "Choose a single row ID",
     "rowFieldHelpText": "Leave this value empty to return the first row.",
     "searchFieldPlaceHolder": "Enter a search term...",
     "noTableChosenForFiltering": "Choose a table to begin using data source filters.",
@@ -277,7 +277,7 @@
     "branchesDescription": "Branches allow you to only execute nodes when a condition is met. Branches are executed left to right until a condition is met, otherwise the default branch will be executed. ",
     "branchLabel": "Label",
     "branchConditionLabel": "Condition",
-    "branchConditionPlaceholder": "Enter condition...",
+    "branchConditionPlaceholder": "If true, we follow this branch.",
     "addEdge": "Add branch",
     "edgeDefaultName": "Branch",
     "noLabel": "No label",
@@ -313,10 +313,16 @@
   "localBaserowServiceForm": {
     "integrationDropdownLabel": "Integration",
     "rowIdLabel": "Row ID",
-    "rowIdPlaceholder": "Select a row ID"
+    "rowIdPlaceholder": "Choose a single row ID"
   },
   "localBaserowUpsertRowServiceForm": {
-    "fieldMappingPlaceholder": "Choose a field value",
+    "fieldMappingPlaceholderArray": "Choose an array value, e.g [42]",
+    "fieldMappingPlaceholderString": "Choose a string value, e.g. \\'baserow\\'",
+    "fieldMappingPlaceholderNumber": "Choose a number value, e.g. 42",
+    "fieldMappingPlaceholderBoolean": "Choose a boolean value, e.g. true",
+    "fieldMappingPlaceholderDate": "Choose a date value, e.g. 2025-07-25",
+    "fieldMappingPlaceholderDecimal": "Choose a decimal value, e.g. 3.14",
+    "fieldMappingPlaceholderDuration": "Choose a duration value, e.g. 1:23:40",
     "noTableSelectedMessage": "Choose a table to begin configuring your fields.",
     "noWritableFields": "This table does not contain any writable fields."
   }