From e093d78f487c77562dc86eaacbcca5106bf6b07a Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Tue, 13 Jan 2026 20:09:39 +0530
Subject: [PATCH 01/11] feat: add 'display_depends_on' field to form field
 configuration

* Added 'display_depends_on' field to the form field JSON and Python definitions.
* Updated field order to include 'reqd' and 'fieldtype' for better organization.
---
 .../forms_pro/doctype/form_field/form_field.json   | 14 ++++++++++----
 .../forms_pro/doctype/form_field/form_field.py     |  1 +
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/forms_pro/forms_pro/doctype/form_field/form_field.json b/forms_pro/forms_pro/doctype/form_field/form_field.json
index 236861a..07209d6 100644
--- a/forms_pro/forms_pro/doctype/form_field/form_field.json
+++ b/forms_pro/forms_pro/doctype/form_field/form_field.json
@@ -6,14 +6,15 @@
  "editable_grid": 1,
  "engine": "InnoDB",
  "field_order": [
+  "reqd",
   "label",
+  "fieldtype",
   "fieldname",
   "description",
   "column_break_yznn",
-  "fieldtype",
-  "reqd",
   "options",
-  "default"
+  "default",
+  "display_depends_on"
  ],
  "fields": [
   {
@@ -62,13 +63,18 @@
    "fieldname": "default",
    "fieldtype": "Small Text",
    "label": "Default"
+  },
+  {
+   "fieldname": "display_depends_on",
+   "fieldtype": "Code",
+   "label": "Display Depends On"
   }
  ],
  "grid_page_length": 50,
  "index_web_pages_for_search": 1,
  "istable": 1,
  "links": [],
- "modified": "2026-01-09 14:57:39.192268",
+ "modified": "2026-01-13 19:30:52.799413",
  "modified_by": "Administrator",
  "module": "Forms Pro",
  "name": "Form Field",
diff --git a/forms_pro/forms_pro/doctype/form_field/form_field.py b/forms_pro/forms_pro/doctype/form_field/form_field.py
index 12f3caa..87b014b 100644
--- a/forms_pro/forms_pro/doctype/form_field/form_field.py
+++ b/forms_pro/forms_pro/doctype/form_field/form_field.py
@@ -16,6 +16,7 @@ class FormField(Document):
 
         default: DF.SmallText | None
         description: DF.SmallText | None
+        display_depends_on: DF.Code | None
         fieldname: DF.Data
         fieldtype: DF.Literal[
             "Attach",

From 66a8e0e819a85a968f2b710779f1bfc2c4bcb15b Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Tue, 13 Jan 2026 20:29:45 +0530
Subject: [PATCH 02/11] chore introduce FormFieldTypes enum and update
 fieldtype to use it

---
 frontend/src/types/formfield.ts | 26 +++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/frontend/src/types/formfield.ts b/frontend/src/types/formfield.ts
index ae8dc36..8684cfe 100644
--- a/frontend/src/types/formfield.ts
+++ b/frontend/src/types/formfield.ts
@@ -1,10 +1,30 @@
-export interface FormField {
+export enum FormFieldTypes {
+  Attach = "Attach",
+  Data = "Data",
+  Number = "Number",
+  Email = "Email",
+  Date = "Date",
+  DateTime = "Date Time",
+  DateRange = "Date Range",
+  TimePicker = "Time Picker",
+  Password = "Password",
+  Select = "Select",
+  Switch = "Switch",
+  Textarea = "Textarea",
+  TextEditor = "Text Editor",
+  Link = "Link",
+  Checkbox = "Checkbox",
+  Rating = "Rating",
+}
+
+export type FormField = {
   label: string;
   fieldname: string;
-  fieldtype: string;
+  fieldtype: FormFieldTypes;
   description?: string;
   reqd?: boolean;
   options?: string;
   default?: string;
   idx?: number;
-}
+  display_depends_on?: string;
+};

From e6f8a1ba9a6047e2191ce5367ef55fd21e53b121 Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Wed, 14 Jan 2026 13:49:08 +0530
Subject: [PATCH 03/11] refactor: move FieldPropertiesForm to a new directory
 and update imports

* Moved FieldPropertiesForm.vue to the field-editor directory for better organization.
* Updated import paths in FieldEditorSidebar.vue to reflect the new location.
---
 .../src/components/FieldEditorSidebar.vue     |   2 +-
 .../builder/FieldPropertiesForm.vue           |  66 -----------
 .../field-editor/FieldPropertiesForm.vue      | 109 ++++++++++++++++++
 3 files changed, 110 insertions(+), 67 deletions(-)
 delete mode 100644 frontend/src/components/builder/FieldPropertiesForm.vue
 create mode 100644 frontend/src/components/builder/field-editor/FieldPropertiesForm.vue

diff --git a/frontend/src/components/FieldEditorSidebar.vue b/frontend/src/components/FieldEditorSidebar.vue
index 9b34272..0192aa2 100644
--- a/frontend/src/components/FieldEditorSidebar.vue
+++ b/frontend/src/components/FieldEditorSidebar.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useEditForm } from "@/stores/editForm";
-import FieldPropertiesForm from "@/components/builder/FieldPropertiesForm.vue";
+import FieldPropertiesForm from "@/components/builder/field-editor/FieldPropertiesForm.vue";
 
 const editFormStore = useEditForm();
 </script>
diff --git a/frontend/src/components/builder/FieldPropertiesForm.vue b/frontend/src/components/builder/FieldPropertiesForm.vue
deleted file mode 100644
index 465dd05..0000000
--- a/frontend/src/components/builder/FieldPropertiesForm.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<script setup>
-import { useEditForm } from "@/stores/editForm";
-import { FormControl } from "frappe-ui";
-
-const editFormStore = useEditForm();
-
-const getFieldTypeOptions = () => {
-    return [
-        "Data",
-        "Number",
-        "Email",
-        "Date",
-        "Date Time",
-        "Date Range",
-        "Time Picker",
-        "Password",
-        "Select",
-        "Switch",
-        "Textarea",
-        "Text Editor",
-        "Attach",
-        "Link",
-        "Checkbox",
-    ];
-};
-
-const getFieldProperties = () => {
-    return [
-        { label: "Label", type: "text", field: "label", required: true },
-        {
-            label: "Fieldname",
-            type: "text",
-            field: "fieldname",
-            required: true,
-        },
-        {
-            label: "Fieldtype",
-            type: "select",
-            field: "fieldtype",
-            required: true,
-            options: getFieldTypeOptions(),
-        },
-        { label: "Description", type: "textarea", field: "description", required: false },
-        { label: "Mandatory", type: "checkbox", field: "reqd", required: false },
-        { label: "Options", type: "textarea", field: "options", required: false },
-        { label: "Default", type: "textarea", field: "default", required: false },
-    ];
-};
-</script>
-<template>
-    <div class="flex flex-col gap-6 p-4 w-full">
-        <h3 class="text-lg font-medium">Edit Properties</h3>
-        <hr />
-        <div class="flex flex-col gap-6 w-full">
-            <template v-for="property in getFieldProperties()" :key="property.label">
-                <FormControl
-                    v-model="editFormStore.selectedField[property.field]"
-                    :label="property.label"
-                    :type="property.type"
-                    :required="property.required"
-                    :options="property.options"
-                />
-            </template>
-        </div>
-    </div>
-</template>
diff --git a/frontend/src/components/builder/field-editor/FieldPropertiesForm.vue b/frontend/src/components/builder/field-editor/FieldPropertiesForm.vue
new file mode 100644
index 0000000..b5a97f9
--- /dev/null
+++ b/frontend/src/components/builder/field-editor/FieldPropertiesForm.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { useEditForm } from "@/stores/editForm";
+import { FormControl } from "frappe-ui";
+import { FormField, FormFieldTypes } from "@/types/formfield";
+import { computed } from "vue";
+
+import type { Component } from "vue";
+import ConditionRender from "./ConditionRender.vue";
+
+const editFormStore = useEditForm();
+
+type FieldProperty = {
+    fieldname: keyof FormField;
+    component: Component;
+    props: Record<string, any>;
+};
+
+const fieldProperties = computed(() => {
+    return [
+        {
+            fieldname: "label",
+            component: FormControl,
+            props: {
+                type: "text",
+                label: "Label",
+                required: true,
+                variant: "outline",
+            },
+        },
+        {
+            fieldname: "fieldname",
+            component: FormControl,
+            props: {
+                type: "text",
+                label: "Fieldname",
+                required: true,
+                variant: "outline",
+            },
+        },
+        {
+            fieldname: "fieldtype",
+            component: FormControl,
+            props: {
+                type: "select",
+                label: "Fieldtype",
+                required: true,
+                variant: "outline",
+                options: Object.values(FormFieldTypes),
+            },
+        },
+        {
+            fieldname: "reqd",
+            component: FormControl,
+            props: {
+                type: "checkbox",
+                label: "Mandatory",
+                description: "If enabled, the field becomes required and cannot be left blank.",
+            },
+        },
+        {
+            fieldname: "description",
+            component: FormControl,
+            props: {
+                type: "textarea",
+                label: "Description",
+                required: false,
+                variant: "outline",
+                rows: 5,
+            },
+        },
+        {
+            fieldname: "options",
+            component: FormControl,
+            props: {
+                type: "textarea",
+                label: "Options",
+                description: "Enter the options for the field, one per line.",
+                variant: "outline",
+                rows: 5,
+            },
+        },
+        {
+            fieldname: "default",
+            component: FormControl,
+            props: {
+                type: "text",
+                label: "Default Value",
+                description: "The default value for the field.",
+                variant: "outline",
+            },
+        },
+    ] as FieldProperty[];
+});
+</script>
+<template>
+    <div class="flex flex-col gap-6 p-4 w-full">
+        <h3 class="text-lg font-medium">Edit Properties</h3>
+        <hr />
+        <template v-if="editFormStore.selectedField">
+            <template v-for="property in fieldProperties" :key="property.fieldname">
+                <component
+                    :is="property.component"
+                    v-model="editFormStore.selectedField[property.fieldname]"
+                    v-bind="property.props"
+                />
+            </template>
+        </template>
+    </div>
+</template>

From b32f21a71c456d9333afe102cafda4dec9c9f460 Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Wed, 14 Jan 2026 14:47:57 +0530
Subject: [PATCH 04/11] feat: enhance outside click detection for
 FormBuilderContent

---
 .../src/components/FormBuilderContent.vue     | 84 ++++++++++++++++++-
 1 file changed, 81 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/FormBuilderContent.vue b/frontend/src/components/FormBuilderContent.vue
index d67a833..9ccf909 100644
--- a/frontend/src/components/FormBuilderContent.vue
+++ b/frontend/src/components/FormBuilderContent.vue
@@ -14,6 +14,54 @@ const editFormStore = useEditForm();
 // Ref for the entire FormBuilderContent component
 const fieldContentRef = ref<HTMLElement | null>(null);
 
+// Function to check if an element is a dropdown/popover (including portals)
+const isDropdownOrPopover = (element: Element | null): boolean => {
+    if (!element) return false;
+
+    // Walk up the DOM tree to check for dropdown indicators
+    let current: Element | null = element;
+    while (current && current !== document.body) {
+        // Check for Headless UI patterns
+        if (
+            current.hasAttribute("role") &&
+            (current.getAttribute("role") === "listbox" ||
+                current.getAttribute("role") === "option" ||
+                current.getAttribute("role") === "combobox")
+        ) {
+            return true;
+        }
+
+        // Check for Headless UI data attributes
+        if (current.hasAttribute("data-headlessui-state") || current.id?.includes("headlessui")) {
+            return true;
+        }
+
+        // Check for Radix UI patterns
+        if (
+            current.hasAttribute("data-radix-popper-content-wrapper") ||
+            current.id?.startsWith("radix") ||
+            current.hasAttribute("data-radix")
+        ) {
+            return true;
+        }
+
+        // Check for common dropdown classes
+        const classList = current.classList;
+        if (
+            classList.contains("dropdown-menu") ||
+            classList.contains("combobox-options") ||
+            classList.contains("popover-content") ||
+            current.hasAttribute("data-popover")
+        ) {
+            return true;
+        }
+
+        current = current.parentElement;
+    }
+
+    return false;
+};
+
 // Set up outside click detection for the entire FormBuilderContent component
 onClickOutside(fieldContentRef, (event) => {
     // Check if the click is on any other form builder components
@@ -24,8 +72,38 @@ onClickOutside(fieldContentRef, (event) => {
         target.closest(".form-builder-sidebar") ||
         target.closest(".form-builder-header");
 
-    // Only deselect if NOT clicking on other form builder components
-    if (!isFormBuilderComponent) {
+    // Check if the click is on a dropdown menu (which may be rendered in a portal)
+    // This handles Headless UI, Radix UI, and other common dropdown patterns
+    const isDropdownElement = isDropdownOrPopover(target);
+
+    // Also check if there are any visible/open dropdowns in the DOM
+    // This catches dropdowns that might be open but the click target isn't directly on them
+    const hasOpenDropdown = !!(
+        document.querySelector('[role="listbox"]:not([hidden]):not([style*="display: none"])') ||
+        document.querySelector('[role="combobox"][aria-expanded="true"]') ||
+        document.querySelector('[data-headlessui-state="open"]') ||
+        document.querySelector('[aria-expanded="true"][role="combobox"]')
+    );
+
+    // Check if the active element (focused element) is within the sidebar
+    // This helps catch cases where a dropdown is open and the user is interacting with it
+    const activeElement = document.activeElement;
+    const isActiveElementInSidebar = activeElement
+        ? !!(
+              activeElement.closest(".field-editor-sidebar") ||
+              activeElement.closest('[data-form-builder-component="field-editor-sidebar"]') ||
+              activeElement.closest('[data-form-builder-component="field-properties-form"]')
+          )
+        : false;
+
+    // Only deselect if NOT clicking on other form builder components or dropdowns
+    // Also don't deselect if there's an open dropdown or if the active element is in the sidebar
+    if (
+        !isFormBuilderComponent &&
+        !isDropdownElement &&
+        !hasOpenDropdown &&
+        !isActiveElementInSidebar
+    ) {
         editFormStore.selectField(null);
     }
 });
@@ -36,6 +114,7 @@ onClickOutside(fieldContentRef, (event) => {
     </div>
     <div
         v-if="editFormStore.formData"
+        ref="fieldContentRef"
         class="bg-secondary min-h-[800px] max-w-screen-md w-full border rounded my-12 p-4 shadow-[0_0_10px_rgba(0,0,0,0.1)]"
     >
         <div class="flex flex-col gap-2">
@@ -69,7 +148,6 @@ onClickOutside(fieldContentRef, (event) => {
             <draggableComponent :list="editFormStore.fields" item-key="idx" tag="div">
                 <template #item="{ element }">
                     <div
-                        ref="fieldContentRef"
                         @click="editFormStore.selectField(element)"
                         :class="{ 'border-gray-400': editFormStore.selectedField === element }"
                         class="p-2 my-3 bg-gray-50 rounded border flex gap-2 relative transition-colors"

From 041d0550befc6439c38e2833984256b45c1a8688 Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Wed, 14 Jan 2026 21:29:26 +0530
Subject: [PATCH 05/11] feat: conditional logic in fields

---
 .../field-editor/ConditionalLogicSection.vue  | 226 +++++++++++
 .../field-editor/FieldPropertiesForm.vue      |  13 +-
 .../components/submission/FormRenderer.vue    |  23 +-
 frontend/src/stores/submissionForm.ts         |  19 +-
 .../src/types/conditional-render.types.ts     |  42 ++
 frontend/src/utils/conditionals.ts            | 361 ++++++++++++++++++
 6 files changed, 677 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/components/builder/field-editor/ConditionalLogicSection.vue
 create mode 100644 frontend/src/types/conditional-render.types.ts
 create mode 100644 frontend/src/utils/conditionals.ts

diff --git a/frontend/src/components/builder/field-editor/ConditionalLogicSection.vue b/frontend/src/components/builder/field-editor/ConditionalLogicSection.vue
new file mode 100644
index 0000000..d632497
--- /dev/null
+++ b/frontend/src/components/builder/field-editor/ConditionalLogicSection.vue
@@ -0,0 +1,226 @@
+<script setup lang="ts">
+import { useEditForm } from "@/stores/editForm";
+import { ref, watch, computed } from "vue";
+import {
+    ConditionalLogic,
+    ConditionalOperators,
+    type Condition,
+    Actions,
+} from "@/types/conditional-render.types";
+import { EllipsisVertical, Trash, Workflow, Zap } from "lucide-vue-next";
+import { FormControl, Popover } from "frappe-ui";
+import type { FormField } from "@/types/formfield";
+
+const editFormStore = useEditForm();
+
+const conditionalLogic = ref<ConditionalLogic | null>(null);
+const isUpdatingFromStore = ref(false);
+
+// Helper function to parse display_depends_on value
+const parseDisplayDependsOn = (
+    value: string | ConditionalLogic | undefined
+): ConditionalLogic | null => {
+    if (!value) return null;
+    if (typeof value === "string") {
+        try {
+            return JSON.parse(value) as ConditionalLogic;
+        } catch (e) {
+            console.error("Failed to parse display_depends_on:", e);
+            return null;
+        }
+    }
+    return value as ConditionalLogic;
+};
+
+// Helper function to stringify conditionalLogic
+const stringifyConditionalLogic = (value: ConditionalLogic | null): string | undefined => {
+    if (!value) return undefined;
+    return JSON.stringify(value);
+};
+
+// Watch for changes in selectedField.display_depends_on from external sources
+watch(
+    () => editFormStore.selectedField?.display_depends_on,
+    (newValue) => {
+        // Prevent infinite loop - don't update if we're the ones updating the store
+        if (isUpdatingFromStore.value) return;
+
+        const parsed = parseDisplayDependsOn(newValue);
+        conditionalLogic.value = parsed;
+    },
+    { immediate: true }
+);
+
+// Watch conditionalLogic and update selectedField.display_depends_on whenever it changes
+watch(
+    conditionalLogic,
+    (newValue) => {
+        if (!editFormStore.selectedField) return;
+
+        // Set flag to prevent infinite loop
+        isUpdatingFromStore.value = true;
+
+        try {
+            if (conditionalLogic.value?.conditions.length === 0) {
+                editFormStore.selectedField.display_depends_on = "";
+            } else {
+                editFormStore.selectedField.display_depends_on =
+                    stringifyConditionalLogic(newValue);
+            }
+        } finally {
+            // Reset flag after a microtask to allow the other watcher to process
+            setTimeout(() => {
+                isUpdatingFromStore.value = false;
+            }, 0);
+        }
+    },
+    { deep: true }
+);
+
+const addCondition = () => {
+    if (!conditionalLogic.value) {
+        conditionalLogic.value = {
+            conditions: [],
+            action: Actions.ShowField,
+            target_field: null,
+        } as ConditionalLogic;
+    }
+
+    conditionalLogic.value.conditions.push({
+        fieldname: "",
+        operator: ConditionalOperators.Is,
+        value: "",
+    } as Condition);
+};
+
+const removeCondition = (index: number) => {
+    if (!conditionalLogic.value) return;
+    conditionalLogic.value.conditions.splice(index, 1);
+};
+
+const availableFieldOptions = computed(() => {
+    return editFormStore.fields.map((field: FormField) => ({
+        label: field.label,
+        value: field.fieldname,
+    }));
+});
+
+const operatorOptions = computed(() => {
+    return Object.values(ConditionalOperators).map((operator) => ({
+        label: operator,
+        value: operator,
+    }));
+});
+
+const actionOptions = computed(() => {
+    return Object.values(Actions).map((action) => ({
+        label: action,
+        value: action,
+    }));
+});
+
+const showValueInput = (operator: ConditionalOperators) => {
+    return (
+        operator !== ConditionalOperators.IsEmpty &&
+        operator !== ConditionalOperators.IsNotEmpty &&
+        operator !== ConditionalOperators.IsSet
+    );
+};
+</script>
+<template>
+    <div class="flex flex-col gap-2">
+        <label class="block text-xs text-ink-gray-5">Conditional Logic</label>
+        <div
+            v-if="conditionalLogic && conditionalLogic.conditions.length > 0"
+            class="p-3 bg-surface-gray-1 border rounded flex flex-col gap-4"
+        >
+            <div
+                v-for="(condition, index) in conditionalLogic?.conditions"
+                :key="index"
+                class="flex flex-col gap-2"
+            >
+                <div class="flex items-center justify-between gap-2">
+                    <div class="flex items-center gap-2 text-ink-gray-5 text-sm">
+                        <Workflow class="w-4 h-4" />
+                        <span>When</span>
+                    </div>
+                    <Popover>
+                        <template #target="{ togglePopover }">
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                @click="togglePopover"
+                                :icon="EllipsisVertical"
+                                tooltip="Actions"
+                            />
+                        </template>
+                        <template #body-main>
+                            <div
+                                class="flex flex-col gap-2 p-2 bg-surface-white rounded field-editor-sidebar"
+                            >
+                                <Button
+                                    variant="ghost"
+                                    theme="red"
+                                    size="sm"
+                                    @click="removeCondition(index)"
+                                    :icon-left="Trash"
+                                    label="Remove"
+                                    tooltip="Remove Condition"
+                                />
+                            </div>
+                        </template>
+                    </Popover>
+                </div>
+                <FormControl
+                    type="select"
+                    placeholder="Select Field"
+                    variant="outline"
+                    :options="availableFieldOptions"
+                    v-model="condition.fieldname"
+                />
+                <FormControl
+                    type="select"
+                    placeholder="Select Operator"
+                    variant="outline"
+                    :options="operatorOptions"
+                    v-model="condition.operator"
+                />
+                <FormControl
+                    v-if="showValueInput(condition.operator)"
+                    type="text"
+                    placeholder="Value"
+                    variant="outline"
+                    v-model="condition.value"
+                />
+
+                <!-- Actions -->
+                <div class="flex items-center gap-2 text-ink-gray-5 text-sm">
+                    <Zap class="w-4 h-4" />
+                    <span>Then</span>
+                </div>
+                <FormControl
+                    type="select"
+                    placeholder="Select Action"
+                    variant="outline"
+                    :options="actionOptions"
+                    v-model="conditionalLogic.action"
+                />
+                <FormControl
+                    type="select"
+                    placeholder="Select Field"
+                    variant="outline"
+                    :options="availableFieldOptions"
+                    v-model="conditionalLogic.target_field"
+                />
+            </div>
+        </div>
+        <Button
+            v-if="!conditionalLogic || conditionalLogic?.conditions.length === 0"
+            variant="outline"
+            size="sm"
+            @click="addCondition"
+            icon="plus"
+            tooltip="Add Condition"
+        />
+    </div>
+</template>
diff --git a/frontend/src/components/builder/field-editor/FieldPropertiesForm.vue b/frontend/src/components/builder/field-editor/FieldPropertiesForm.vue
index b5a97f9..8373c9f 100644
--- a/frontend/src/components/builder/field-editor/FieldPropertiesForm.vue
+++ b/frontend/src/components/builder/field-editor/FieldPropertiesForm.vue
@@ -3,9 +3,8 @@ import { useEditForm } from "@/stores/editForm";
 import { FormControl } from "frappe-ui";
 import { FormField, FormFieldTypes } from "@/types/formfield";
 import { computed } from "vue";
-
 import type { Component } from "vue";
-import ConditionRender from "./ConditionRender.vue";
+import ConditionalLogicSection from "./ConditionalLogicSection.vue";
 
 const editFormStore = useEditForm();
 
@@ -89,11 +88,19 @@ const fieldProperties = computed(() => {
                 variant: "outline",
             },
         },
+        {
+            fieldname: "display_depends_on",
+            component: ConditionalLogicSection,
+            props: {},
+        },
     ] as FieldProperty[];
 });
 </script>
 <template>
-    <div class="flex flex-col gap-6 p-4 w-full">
+    <div
+        class="flex flex-col gap-6 p-4 w-full"
+        data-form-builder-component="field-properties-form"
+    >
         <h3 class="text-lg font-medium">Edit Properties</h3>
         <hr />
         <template v-if="editFormStore.selectedField">
diff --git a/frontend/src/components/submission/FormRenderer.vue b/frontend/src/components/submission/FormRenderer.vue
index 08c1a15..e7190a6 100644
--- a/frontend/src/components/submission/FormRenderer.vue
+++ b/frontend/src/components/submission/FormRenderer.vue
@@ -2,6 +2,9 @@
 import { ErrorMessage, LoadingIndicator, Button } from "frappe-ui";
 import { useSubmissionForm } from "@/stores/submissionForm";
 import FieldRenderer from "@/components/builder/FieldRenderer.vue";
+import { computed } from "vue";
+import { shouldFieldBeVisible, shouldFieldBeRequired } from "@/utils/conditionals";
+import type { FormField } from "@/types/formfield";
 
 const submissionFormStore = useSubmissionForm();
 
@@ -14,6 +17,15 @@ const props = withDefaults(
     }
 );
 
+// Computed property to get visible fields based on conditional logic
+// This will automatically update when form values change
+const visibleFields = computed(() => {
+    const fields = submissionFormStore.formResource.data?.fields || [];
+    return fields.filter((field: FormField) =>
+        shouldFieldBeVisible(field, submissionFormStore.fields, fields)
+    );
+});
+
 function handleSubmitForm() {
     submissionFormStore.submitForm();
 }
@@ -23,11 +35,18 @@ function handleSubmitForm() {
         <LoadingIndicator class="mx-auto my-auto w-5 h-5" />
     </div>
     <div v-if="submissionFormStore.inFormFillingState" class="flex flex-col gap-4">
-        <div v-for="field in submissionFormStore.formResource.data?.fields" :key="field.fieldname">
+        <div v-for="field in visibleFields" :key="field.fieldname">
             <FieldRenderer
                 :disabled="disabled"
                 v-model="submissionFormStore.fields[field.fieldname]"
-                :field="field"
+                :field="{
+                    ...field,
+                    reqd: shouldFieldBeRequired(
+                        field,
+                        submissionFormStore.fields,
+                        submissionFormStore.formResource.data?.fields || []
+                    ),
+                }"
                 :inEditMode="false"
             />
         </div>
diff --git a/frontend/src/stores/submissionForm.ts b/frontend/src/stores/submissionForm.ts
index 7400720..d51814c 100644
--- a/frontend/src/stores/submissionForm.ts
+++ b/frontend/src/stores/submissionForm.ts
@@ -5,6 +5,10 @@ import { computed, ref } from "vue";
 import { FormField } from "@/types/formfield";
 import { useStorage } from "@vueuse/core";
 import { session } from "@/data/session";
+import {
+  shouldFieldBeRequired,
+  shouldFieldBeVisible,
+} from "@/utils/conditionals";
 
 export type UserSubmission = {
   name: string;
@@ -163,8 +167,19 @@ export const useSubmissionForm = defineStore("submissionForm", () => {
 
   function validateValues() {
     errors.value = [];
-    formResource.value.data.fields.forEach((field: FormField) => {
-      if (field.reqd && !fields.value[field.fieldname]) {
+    const allFields = formResource.value.data.fields || [];
+
+    allFields.forEach((field: FormField) => {
+      // Only validate visible fields
+      const isVisible = shouldFieldBeVisible(field, fields.value, allFields);
+      if (!isVisible) {
+        return;
+      }
+
+      // Check if field is required (including conditional requirements)
+      const isRequired = shouldFieldBeRequired(field, fields.value, allFields);
+
+      if (isRequired && !fields.value[field.fieldname]) {
         errors.value.push(`${field.label} is required`);
       }
     });
diff --git a/frontend/src/types/conditional-render.types.ts b/frontend/src/types/conditional-render.types.ts
new file mode 100644
index 0000000..fbd7767
--- /dev/null
+++ b/frontend/src/types/conditional-render.types.ts
@@ -0,0 +1,42 @@
+export enum ConditionalOperators {
+  Is = "Is",
+  IsNot = "Is Not",
+  IsEmpty = "Is Empty",
+  IsNotEmpty = "Is Not Empty",
+  IsSet = "Is Set",
+  Contains = "Contains",
+  DoesNotContain = "Does Not Contain",
+  IsLessThan = "Is Less Than",
+  IsLessThanOrEqualTo = "Is Less Than Or Equal To",
+  IsGreaterThan = "Is Greater Than",
+  IsGreaterThanOrEqualTo = "Is Greater Than Or Equal To",
+  IsBetween = "Is Between",
+  IsNotBetween = "Is Not Between",
+  StartsWith = "Starts With",
+  DoesNotStartWith = "Does Not Start With",
+  EndsWith = "Ends With",
+  DoesNotEndWith = "Does Not End With",
+}
+
+export enum LogicOperators {
+  And = "And",
+  Or = "Or",
+}
+
+export type Condition = {
+  fieldname: string;
+  operator: ConditionalOperators;
+  value: string | number | boolean;
+};
+
+export enum Actions {
+  ShowField = "Show Field",
+  HideField = "Hide Field",
+  RequireAnswer = "Require Answer",
+}
+
+export type ConditionalLogic = {
+  conditions: Condition[];
+  action: Actions;
+  target_field: string | null;
+};
diff --git a/frontend/src/utils/conditionals.ts b/frontend/src/utils/conditionals.ts
new file mode 100644
index 0000000..b91324e
--- /dev/null
+++ b/frontend/src/utils/conditionals.ts
@@ -0,0 +1,361 @@
+import {
+  ConditionalLogic,
+  ConditionalOperators,
+  Condition,
+  Actions,
+} from "@/types/conditional-render.types";
+import { FormField } from "@/types/formfield";
+
+/**
+ * Parse display_depends_on string into ConditionalLogic object
+ */
+export function parseConditionalLogic(
+  displayDependsOn: string | undefined | null
+): ConditionalLogic | null {
+  if (!displayDependsOn || displayDependsOn.trim() === "") {
+    return null;
+  }
+
+  try {
+    return JSON.parse(displayDependsOn) as ConditionalLogic;
+  } catch (e) {
+    console.error("Failed to parse display_depends_on:", e);
+    return null;
+  }
+}
+
+/**
+ * Get the value of a field from form data, handling different field types
+ */
+function getFieldValue(
+  fieldValue: any,
+  fieldType: string
+): string | number | boolean | null {
+  if (fieldValue === null || fieldValue === undefined || fieldValue === "") {
+    return null;
+  }
+
+  // Handle boolean/switch fields
+  if (fieldType === "Switch" || fieldType === "Checkbox") {
+    return Boolean(fieldValue);
+  }
+
+  // Handle number fields
+  if (fieldType === "Number") {
+    const num = Number(fieldValue);
+    return isNaN(num) ? null : num;
+  }
+
+  // Handle string fields
+  return String(fieldValue);
+}
+
+/**
+ * Normalize values for comparison (convert to strings for most comparisons)
+ */
+function normalizeValue(value: any): string | number | boolean | null {
+  if (value === null || value === undefined) {
+    return null;
+  }
+  if (typeof value === "boolean") {
+    return value;
+  }
+  if (typeof value === "number") {
+    return value;
+  }
+  return String(value).trim();
+}
+
+/**
+ * Evaluate a single condition against form field values
+ */
+function evaluateCondition(
+  condition: Condition,
+  formValues: Record<string, any>,
+  allFields: FormField[]
+): boolean {
+  const { fieldname, operator, value } = condition;
+
+  // Get the field definition to understand its type
+  const field = allFields.find((f) => f.fieldname === fieldname);
+  if (!field) {
+    console.warn(`Field ${fieldname} not found in form fields`);
+    return false;
+  }
+
+  const fieldValue = getFieldValue(formValues[fieldname], field.fieldtype);
+  const conditionValue = normalizeValue(value);
+  const normalizedFieldValue = normalizeValue(fieldValue);
+
+  switch (operator) {
+    case ConditionalOperators.Is:
+      return normalizedFieldValue === conditionValue;
+
+    case ConditionalOperators.IsNot:
+      return normalizedFieldValue !== conditionValue;
+
+    case ConditionalOperators.IsEmpty:
+      return (
+        normalizedFieldValue === null ||
+        normalizedFieldValue === "" ||
+        normalizedFieldValue === undefined
+      );
+
+    case ConditionalOperators.IsNotEmpty:
+      return (
+        normalizedFieldValue !== null &&
+        normalizedFieldValue !== "" &&
+        normalizedFieldValue !== undefined
+      );
+
+    case ConditionalOperators.IsSet:
+      return (
+        normalizedFieldValue !== null && normalizedFieldValue !== undefined
+      );
+
+    case ConditionalOperators.Contains:
+      if (normalizedFieldValue === null) return false;
+      return String(normalizedFieldValue)
+        .toLowerCase()
+        .includes(String(conditionValue).toLowerCase());
+
+    case ConditionalOperators.DoesNotContain:
+      if (normalizedFieldValue === null) return true;
+      return !String(normalizedFieldValue)
+        .toLowerCase()
+        .includes(String(conditionValue).toLowerCase());
+
+    case ConditionalOperators.IsLessThan:
+      if (
+        typeof normalizedFieldValue === "number" &&
+        typeof conditionValue === "number"
+      ) {
+        return normalizedFieldValue < conditionValue;
+      }
+      return false;
+
+    case ConditionalOperators.IsLessThanOrEqualTo:
+      if (
+        typeof normalizedFieldValue === "number" &&
+        typeof conditionValue === "number"
+      ) {
+        return normalizedFieldValue <= conditionValue;
+      }
+      return false;
+
+    case ConditionalOperators.IsGreaterThan:
+      if (
+        typeof normalizedFieldValue === "number" &&
+        typeof conditionValue === "number"
+      ) {
+        return normalizedFieldValue > conditionValue;
+      }
+      return false;
+
+    case ConditionalOperators.IsGreaterThanOrEqualTo:
+      if (
+        typeof normalizedFieldValue === "number" &&
+        typeof conditionValue === "number"
+      ) {
+        return normalizedFieldValue >= conditionValue;
+      }
+      return false;
+
+    case ConditionalOperators.StartsWith:
+      if (normalizedFieldValue === null) return false;
+      return String(normalizedFieldValue)
+        .toLowerCase()
+        .startsWith(String(conditionValue).toLowerCase());
+
+    case ConditionalOperators.DoesNotStartWith:
+      if (normalizedFieldValue === null) return true;
+      return !String(normalizedFieldValue)
+        .toLowerCase()
+        .startsWith(String(conditionValue).toLowerCase());
+
+    case ConditionalOperators.EndsWith:
+      if (normalizedFieldValue === null) return false;
+      return String(normalizedFieldValue)
+        .toLowerCase()
+        .endsWith(String(conditionValue).toLowerCase());
+
+    case ConditionalOperators.DoesNotEndWith:
+      if (normalizedFieldValue === null) return true;
+      return !String(normalizedFieldValue)
+        .toLowerCase()
+        .endsWith(String(conditionValue).toLowerCase());
+
+    case ConditionalOperators.IsBetween:
+      // For "Is Between", value should be a string like "min,max"
+      if (normalizedFieldValue === null || typeof conditionValue !== "string") {
+        return false;
+      }
+      const [min, max] = conditionValue.split(",").map((v) => Number(v.trim()));
+      if (
+        isNaN(min) ||
+        isNaN(max) ||
+        typeof normalizedFieldValue !== "number"
+      ) {
+        return false;
+      }
+      return normalizedFieldValue >= min && normalizedFieldValue <= max;
+
+    case ConditionalOperators.IsNotBetween:
+      // For "Is Not Between", value should be a string like "min,max"
+      if (normalizedFieldValue === null || typeof conditionValue !== "string") {
+        return true;
+      }
+      const [minNot, maxNot] = conditionValue
+        .split(",")
+        .map((v) => Number(v.trim()));
+      if (
+        isNaN(minNot) ||
+        isNaN(maxNot) ||
+        typeof normalizedFieldValue !== "number"
+      ) {
+        return true;
+      }
+      return normalizedFieldValue < minNot || normalizedFieldValue > maxNot;
+
+    default:
+      console.warn(`Unknown operator: ${operator}`);
+      return false;
+  }
+}
+
+/**
+ * Evaluate all conditions in a ConditionalLogic object
+ * Currently supports AND logic (all conditions must be true)
+ * TODO: Add support for OR logic if needed
+ */
+function evaluateConditions(
+  conditionalLogic: ConditionalLogic,
+  formValues: Record<string, any>,
+  allFields: FormField[]
+): boolean {
+  if (
+    !conditionalLogic.conditions ||
+    conditionalLogic.conditions.length === 0
+  ) {
+    return false;
+  }
+
+  // All conditions must be true (AND logic)
+  return conditionalLogic.conditions.every((condition) =>
+    evaluateCondition(condition, formValues, allFields)
+  );
+}
+
+/**
+ * Determine if a field should be visible based on all conditional logic rules
+ * that target it. A field is visible if:
+ * - No conditional logic targets it, OR
+ * - At least one "Show Field" action evaluates to true, OR
+ * - No "Hide Field" actions evaluate to true
+ */
+export function shouldFieldBeVisible(
+  field: FormField,
+  formValues: Record<string, any>,
+  allFields: FormField[]
+): boolean {
+  // If field has no display_depends_on, it's always visible
+  if (!field.display_depends_on || field.display_depends_on.trim() === "") {
+    return true;
+  }
+
+  // Find all conditional logic rules that target this field
+  const targetingRules: ConditionalLogic[] = [];
+
+  allFields.forEach((otherField) => {
+    if (!otherField.display_depends_on) return;
+
+    const logic = parseConditionalLogic(otherField.display_depends_on);
+    if (logic && logic.target_field === field.fieldname) {
+      targetingRules.push(logic);
+    }
+  });
+
+  // If no rules target this field, it's visible
+  if (targetingRules.length === 0) {
+    return true;
+  }
+
+  // Check each rule
+  let hasShowRule = false;
+  let hasHideRule = false;
+
+  for (const rule of targetingRules) {
+    const conditionsMet = evaluateConditions(rule, formValues, allFields);
+
+    if (conditionsMet) {
+      if (rule.action === Actions.ShowField) {
+        hasShowRule = true;
+      } else if (rule.action === Actions.HideField) {
+        hasHideRule = true;
+      }
+    }
+  }
+
+  // If any "Show Field" rule is met, field is visible
+  if (hasShowRule) {
+    return true;
+  }
+
+  // If any "Hide Field" rule is met, field is hidden
+  if (hasHideRule) {
+    return false;
+  }
+
+  // Default: field is visible if no rules are met
+  return true;
+}
+
+/**
+ * Determine if a field should be required based on conditional logic
+ */
+export function shouldFieldBeRequired(
+  field: FormField,
+  formValues: Record<string, any>,
+  allFields: FormField[]
+): boolean {
+  // Start with the field's base required status
+  let isRequired = field.reqd || false;
+
+  // Find all conditional logic rules that target this field with "Require Answer"
+  const targetingRules: ConditionalLogic[] = [];
+
+  allFields.forEach((otherField) => {
+    if (!otherField.display_depends_on) return;
+
+    const logic = parseConditionalLogic(otherField.display_depends_on);
+    if (
+      logic &&
+      logic.target_field === field.fieldname &&
+      logic.action === Actions.RequireAnswer
+    ) {
+      targetingRules.push(logic);
+    }
+  });
+
+  // If any "Require Answer" rule conditions are met, make field required
+  for (const rule of targetingRules) {
+    if (evaluateConditions(rule, formValues, allFields)) {
+      isRequired = true;
+      break;
+    }
+  }
+
+  return isRequired;
+}
+
+/**
+ * Get all fields that should be visible based on current form values
+ */
+export function getVisibleFields(
+  fields: FormField[],
+  formValues: Record<string, any>
+): FormField[] {
+  return fields.filter((field) =>
+    shouldFieldBeVisible(field, formValues, fields)
+  );
+}

From b2d9c01e44fedb32bae891f8711a599a5e76f2d1 Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Wed, 14 Jan 2026 21:33:38 +0530
Subject: [PATCH 06/11] refactor: rename 'display_depends_on' to
 'conditional_logic' across the codebase

* Updated JSON, Python, and Vue components to reflect the new field name.
* Adjusted parsing and evaluation functions to accommodate the change.
* Ensured consistency in the handling of conditional logic throughout the application.
---
 .../doctype/form_field/form_field.json        |  8 +++----
 .../doctype/form_field/form_field.py          |  2 +-
 .../field-editor/ConditionalLogicSection.vue  | 18 +++++++--------
 .../field-editor/FieldPropertiesForm.vue      |  2 +-
 frontend/src/types/formfield.ts               |  2 +-
 frontend/src/utils/conditionals.ts            | 22 +++++++++----------
 6 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/forms_pro/forms_pro/doctype/form_field/form_field.json b/forms_pro/forms_pro/doctype/form_field/form_field.json
index 07209d6..5c9f83e 100644
--- a/forms_pro/forms_pro/doctype/form_field/form_field.json
+++ b/forms_pro/forms_pro/doctype/form_field/form_field.json
@@ -14,7 +14,7 @@
   "column_break_yznn",
   "options",
   "default",
-  "display_depends_on"
+  "conditional_logic"
  ],
  "fields": [
   {
@@ -65,16 +65,16 @@
    "label": "Default"
   },
   {
-   "fieldname": "display_depends_on",
+   "fieldname": "conditional_logic",
    "fieldtype": "Code",
-   "label": "Display Depends On"
+   "label": "Conditional Logic"
   }
  ],
  "grid_page_length": 50,
  "index_web_pages_for_search": 1,
  "istable": 1,
  "links": [],
- "modified": "2026-01-13 19:30:52.799413",
+ "modified": "2026-01-14 21:30:43.961415",
  "modified_by": "Administrator",
  "module": "Forms Pro",
  "name": "Form Field",
diff --git a/forms_pro/forms_pro/doctype/form_field/form_field.py b/forms_pro/forms_pro/doctype/form_field/form_field.py
index 87b014b..e223cda 100644
--- a/forms_pro/forms_pro/doctype/form_field/form_field.py
+++ b/forms_pro/forms_pro/doctype/form_field/form_field.py
@@ -14,9 +14,9 @@ class FormField(Document):
     if TYPE_CHECKING:
         from frappe.types import DF
 
+        conditional_logic: DF.Code | None
         default: DF.SmallText | None
         description: DF.SmallText | None
-        display_depends_on: DF.Code | None
         fieldname: DF.Data
         fieldtype: DF.Literal[
             "Attach",
diff --git a/frontend/src/components/builder/field-editor/ConditionalLogicSection.vue b/frontend/src/components/builder/field-editor/ConditionalLogicSection.vue
index d632497..9458b4a 100644
--- a/frontend/src/components/builder/field-editor/ConditionalLogicSection.vue
+++ b/frontend/src/components/builder/field-editor/ConditionalLogicSection.vue
@@ -16,8 +16,8 @@ const editFormStore = useEditForm();
 const conditionalLogic = ref<ConditionalLogic | null>(null);
 const isUpdatingFromStore = ref(false);
 
-// Helper function to parse display_depends_on value
-const parseDisplayDependsOn = (
+// Helper function to parse conditional_logic value
+const parseConditionalLogic = (
     value: string | ConditionalLogic | undefined
 ): ConditionalLogic | null => {
     if (!value) return null;
@@ -25,7 +25,7 @@ const parseDisplayDependsOn = (
         try {
             return JSON.parse(value) as ConditionalLogic;
         } catch (e) {
-            console.error("Failed to parse display_depends_on:", e);
+            console.error("Failed to parse conditional_logic:", e);
             return null;
         }
     }
@@ -38,20 +38,20 @@ const stringifyConditionalLogic = (value: ConditionalLogic | null): string | und
     return JSON.stringify(value);
 };
 
-// Watch for changes in selectedField.display_depends_on from external sources
+// Watch for changes in selectedField.conditional_logic from external sources
 watch(
-    () => editFormStore.selectedField?.display_depends_on,
+    () => editFormStore.selectedField?.conditional_logic,
     (newValue) => {
         // Prevent infinite loop - don't update if we're the ones updating the store
         if (isUpdatingFromStore.value) return;
 
-        const parsed = parseDisplayDependsOn(newValue);
+        const parsed = parseConditionalLogic(newValue);
         conditionalLogic.value = parsed;
     },
     { immediate: true }
 );
 
-// Watch conditionalLogic and update selectedField.display_depends_on whenever it changes
+// Watch conditionalLogic and update selectedField.conditional_logic whenever it changes
 watch(
     conditionalLogic,
     (newValue) => {
@@ -62,9 +62,9 @@ watch(
 
         try {
             if (conditionalLogic.value?.conditions.length === 0) {
-                editFormStore.selectedField.display_depends_on = "";
+                editFormStore.selectedField.conditional_logic = "";
             } else {
-                editFormStore.selectedField.display_depends_on =
+                editFormStore.selectedField.conditional_logic =
                     stringifyConditionalLogic(newValue);
             }
         } finally {
diff --git a/frontend/src/components/builder/field-editor/FieldPropertiesForm.vue b/frontend/src/components/builder/field-editor/FieldPropertiesForm.vue
index 8373c9f..368e0c9 100644
--- a/frontend/src/components/builder/field-editor/FieldPropertiesForm.vue
+++ b/frontend/src/components/builder/field-editor/FieldPropertiesForm.vue
@@ -89,7 +89,7 @@ const fieldProperties = computed(() => {
             },
         },
         {
-            fieldname: "display_depends_on",
+            fieldname: "conditional_logic",
             component: ConditionalLogicSection,
             props: {},
         },
diff --git a/frontend/src/types/formfield.ts b/frontend/src/types/formfield.ts
index 8684cfe..513415b 100644
--- a/frontend/src/types/formfield.ts
+++ b/frontend/src/types/formfield.ts
@@ -26,5 +26,5 @@ export type FormField = {
   options?: string;
   default?: string;
   idx?: number;
-  display_depends_on?: string;
+  conditional_logic?: string;
 };
diff --git a/frontend/src/utils/conditionals.ts b/frontend/src/utils/conditionals.ts
index b91324e..3186556 100644
--- a/frontend/src/utils/conditionals.ts
+++ b/frontend/src/utils/conditionals.ts
@@ -7,19 +7,19 @@ import {
 import { FormField } from "@/types/formfield";
 
 /**
- * Parse display_depends_on string into ConditionalLogic object
+ * Parse conditional_logic string into ConditionalLogic object
  */
 export function parseConditionalLogic(
-  displayDependsOn: string | undefined | null
+  conditionalLogic: string | undefined | null
 ): ConditionalLogic | null {
-  if (!displayDependsOn || displayDependsOn.trim() === "") {
+  if (!conditionalLogic || conditionalLogic.trim() === "") {
     return null;
   }
 
   try {
-    return JSON.parse(displayDependsOn) as ConditionalLogic;
+    return JSON.parse(conditionalLogic) as ConditionalLogic;
   } catch (e) {
-    console.error("Failed to parse display_depends_on:", e);
+    console.error("Failed to parse conditional_logic:", e);
     return null;
   }
 }
@@ -258,8 +258,8 @@ export function shouldFieldBeVisible(
   formValues: Record<string, any>,
   allFields: FormField[]
 ): boolean {
-  // If field has no display_depends_on, it's always visible
-  if (!field.display_depends_on || field.display_depends_on.trim() === "") {
+  // If field has no conditional_logic, it's always visible
+  if (!field.conditional_logic || field.conditional_logic.trim() === "") {
     return true;
   }
 
@@ -267,9 +267,9 @@ export function shouldFieldBeVisible(
   const targetingRules: ConditionalLogic[] = [];
 
   allFields.forEach((otherField) => {
-    if (!otherField.display_depends_on) return;
+    if (!otherField.conditional_logic) return;
 
-    const logic = parseConditionalLogic(otherField.display_depends_on);
+    const logic = parseConditionalLogic(otherField.conditional_logic);
     if (logic && logic.target_field === field.fieldname) {
       targetingRules.push(logic);
     }
@@ -325,9 +325,9 @@ export function shouldFieldBeRequired(
   const targetingRules: ConditionalLogic[] = [];
 
   allFields.forEach((otherField) => {
-    if (!otherField.display_depends_on) return;
+    if (!otherField.conditional_logic) return;
 
-    const logic = parseConditionalLogic(otherField.display_depends_on);
+    const logic = parseConditionalLogic(otherField.conditional_logic);
     if (
       logic &&
       logic.target_field === field.fieldname &&

From 125efd6150a243f805649c6e38f4a4faae6d3560 Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Wed, 14 Jan 2026 21:36:24 +0530
Subject: [PATCH 07/11] refactor: improve formatting and structure in
 ConditionalLogicSection.vue

---
 .../field-editor/ConditionalLogicSection.vue  | 38 +++++++++----------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/builder/field-editor/ConditionalLogicSection.vue b/frontend/src/components/builder/field-editor/ConditionalLogicSection.vue
index 9458b4a..19f9049 100644
--- a/frontend/src/components/builder/field-editor/ConditionalLogicSection.vue
+++ b/frontend/src/components/builder/field-editor/ConditionalLogicSection.vue
@@ -192,27 +192,27 @@ const showValueInput = (operator: ConditionalOperators) => {
                     variant="outline"
                     v-model="condition.value"
                 />
+            </div>
 
-                <!-- Actions -->
-                <div class="flex items-center gap-2 text-ink-gray-5 text-sm">
-                    <Zap class="w-4 h-4" />
-                    <span>Then</span>
-                </div>
-                <FormControl
-                    type="select"
-                    placeholder="Select Action"
-                    variant="outline"
-                    :options="actionOptions"
-                    v-model="conditionalLogic.action"
-                />
-                <FormControl
-                    type="select"
-                    placeholder="Select Field"
-                    variant="outline"
-                    :options="availableFieldOptions"
-                    v-model="conditionalLogic.target_field"
-                />
+            <!-- Actions -->
+            <div class="flex items-center gap-2 text-ink-gray-5 text-sm">
+                <Zap class="w-4 h-4" />
+                <span>Then</span>
             </div>
+            <FormControl
+                type="select"
+                placeholder="Select Action"
+                variant="outline"
+                :options="actionOptions"
+                v-model="conditionalLogic.action"
+            />
+            <FormControl
+                type="select"
+                placeholder="Select Field"
+                variant="outline"
+                :options="availableFieldOptions"
+                v-model="conditionalLogic.target_field"
+            />
         </div>
         <Button
             v-if="!conditionalLogic || conditionalLogic?.conditions.length === 0"

From 87b095a97f799b7cc1212311b4af6823fa296cf0 Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Wed, 14 Jan 2026 21:37:37 +0530
Subject: [PATCH 08/11] refactor: remove unsupported InBetween conditionals

---
 frontend/src/types/conditional-render.types.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/src/types/conditional-render.types.ts b/frontend/src/types/conditional-render.types.ts
index fbd7767..f5733bd 100644
--- a/frontend/src/types/conditional-render.types.ts
+++ b/frontend/src/types/conditional-render.types.ts
@@ -10,8 +10,6 @@ export enum ConditionalOperators {
   IsLessThanOrEqualTo = "Is Less Than Or Equal To",
   IsGreaterThan = "Is Greater Than",
   IsGreaterThanOrEqualTo = "Is Greater Than Or Equal To",
-  IsBetween = "Is Between",
-  IsNotBetween = "Is Not Between",
   StartsWith = "Starts With",
   DoesNotStartWith = "Does Not Start With",
   EndsWith = "Ends With",

From e63ed153c0f51ac0b61ddcc16fac4e57b8cd2719 Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Wed, 14 Jan 2026 21:41:00 +0530
Subject: [PATCH 09/11] feat: add 'Checkbox' and 'Rating' options to form field
 type selection

---
 forms_pro/forms_pro/doctype/form_field/form_field.json | 4 ++--
 forms_pro/forms_pro/doctype/form_field/form_field.py   | 2 ++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/forms_pro/forms_pro/doctype/form_field/form_field.json b/forms_pro/forms_pro/doctype/form_field/form_field.json
index 5c9f83e..5f74562 100644
--- a/forms_pro/forms_pro/doctype/form_field/form_field.json
+++ b/forms_pro/forms_pro/doctype/form_field/form_field.json
@@ -36,7 +36,7 @@
    "fieldtype": "Select",
    "in_list_view": 1,
    "label": "Fieldtype",
-   "options": "Attach\nData\nNumber\nEmail\nDate\nDate Time\nDate Range\nTime Picker\nPassword\nSelect\nSwitch\nTextarea\nText Editor\nLink",
+   "options": "Attach\nData\nNumber\nEmail\nDate\nDate Time\nDate Range\nTime Picker\nPassword\nSelect\nSwitch\nTextarea\nText Editor\nLink\nCheckbox\nRating",
    "reqd": 1
   },
   {
@@ -74,7 +74,7 @@
  "index_web_pages_for_search": 1,
  "istable": 1,
  "links": [],
- "modified": "2026-01-14 21:30:43.961415",
+ "modified": "2026-01-14 21:40:40.060805",
  "modified_by": "Administrator",
  "module": "Forms Pro",
  "name": "Form Field",
diff --git a/forms_pro/forms_pro/doctype/form_field/form_field.py b/forms_pro/forms_pro/doctype/form_field/form_field.py
index e223cda..e365b97 100644
--- a/forms_pro/forms_pro/doctype/form_field/form_field.py
+++ b/forms_pro/forms_pro/doctype/form_field/form_field.py
@@ -33,6 +33,8 @@ class FormField(Document):
             "Textarea",
             "Text Editor",
             "Link",
+            "Checkbox",
+            "Rating",
         ]
         label: DF.Data
         options: DF.SmallText | None

From 6393120d1de858aa6fcf2f8dfcb176a4cf943a25 Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Wed, 14 Jan 2026 21:48:38 +0530
Subject: [PATCH 10/11] refactor: clean up conditional logic evaluation
 functions

* Added missing commas for consistency in function parameters.
* Removed deprecated "Is Between" and "Is Not Between" conditional checks.
* Improved visibility determination logic for fields based on conditional rules.
---
 frontend/src/utils/conditionals.ts | 44 +++---------------------------
 1 file changed, 4 insertions(+), 40 deletions(-)

diff --git a/frontend/src/utils/conditionals.ts b/frontend/src/utils/conditionals.ts
index 3186556..f48bc9e 100644
--- a/frontend/src/utils/conditionals.ts
+++ b/frontend/src/utils/conditionals.ts
@@ -185,38 +185,6 @@ function evaluateCondition(
         .toLowerCase()
         .endsWith(String(conditionValue).toLowerCase());
 
-    case ConditionalOperators.IsBetween:
-      // For "Is Between", value should be a string like "min,max"
-      if (normalizedFieldValue === null || typeof conditionValue !== "string") {
-        return false;
-      }
-      const [min, max] = conditionValue.split(",").map((v) => Number(v.trim()));
-      if (
-        isNaN(min) ||
-        isNaN(max) ||
-        typeof normalizedFieldValue !== "number"
-      ) {
-        return false;
-      }
-      return normalizedFieldValue >= min && normalizedFieldValue <= max;
-
-    case ConditionalOperators.IsNotBetween:
-      // For "Is Not Between", value should be a string like "min,max"
-      if (normalizedFieldValue === null || typeof conditionValue !== "string") {
-        return true;
-      }
-      const [minNot, maxNot] = conditionValue
-        .split(",")
-        .map((v) => Number(v.trim()));
-      if (
-        isNaN(minNot) ||
-        isNaN(maxNot) ||
-        typeof normalizedFieldValue !== "number"
-      ) {
-        return true;
-      }
-      return normalizedFieldValue < minNot || normalizedFieldValue > maxNot;
-
     default:
       console.warn(`Unknown operator: ${operator}`);
       return false;
@@ -247,9 +215,10 @@ function evaluateConditions(
 }
 
 /**
- * Determine if a field should be visible based on all conditional logic rules
- * that target it. A field is visible if:
- * - No conditional logic targets it, OR
+ * Determine if a field should be visible based on conditional logic rules
+ * defined on other fields that target this field. Visibility is driven by
+ * rules on other fields, not a property on the field itself. A field is visible if:
+ * - No conditional logic rules target it, OR
  * - At least one "Show Field" action evaluates to true, OR
  * - No "Hide Field" actions evaluate to true
  */
@@ -258,11 +227,6 @@ export function shouldFieldBeVisible(
   formValues: Record<string, any>,
   allFields: FormField[]
 ): boolean {
-  // If field has no conditional_logic, it's always visible
-  if (!field.conditional_logic || field.conditional_logic.trim() === "") {
-    return true;
-  }
-
   // Find all conditional logic rules that target this field
   const targetingRules: ConditionalLogic[] = [];
 

From ba09ba33abf48002422f3995e5dfff17c6dc4c77 Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Wed, 14 Jan 2026 21:52:51 +0530
Subject: [PATCH 11/11] fix: extend fieldtype handling to include 'Checkbox' in
 addition to 'Switch'

---
 forms_pro/forms_pro/doctype/form_field/form_field.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/forms_pro/forms_pro/doctype/form_field/form_field.py b/forms_pro/forms_pro/doctype/form_field/form_field.py
index e365b97..3c41811 100644
--- a/forms_pro/forms_pro/doctype/form_field/form_field.py
+++ b/forms_pro/forms_pro/doctype/form_field/form_field.py
@@ -59,7 +59,7 @@ def to_frappe_field(self) -> dict:
             _fieldtype = "Data"
         elif self.fieldtype == "Time Picker":
             _fieldtype = "Time"
-        elif self.fieldtype == "Switch":
+        elif self.fieldtype == "Switch" or self.fieldtype == "Checkbox":
             _fieldtype = "Check"
         elif self.fieldtype == "Textarea":
             _fieldtype = "Text"