From beaca8ea38d6f75204f5a2393e4dfa6a3b5dca84 Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Fri, 9 Jan 2026 13:24:44 +0530
Subject: [PATCH] feat: add link field options retrieval and update form field
 type to include 'Link'

---
 forms_pro/api/form.py                         | 18 +++++++
 .../doctype/form_field/form_field.json        |  4 +-
 .../doctype/form_field/form_field.py          |  1 +
 .../src/components/builder/FieldRenderer.vue  | 52 +++++++++++++++++--
 frontend/src/utils/form_fields.ts             |  1 +
 5 files changed, 71 insertions(+), 5 deletions(-)

diff --git a/forms_pro/api/form.py b/forms_pro/api/form.py
index ca1c048..0bddacb 100644
--- a/forms_pro/api/form.py
+++ b/forms_pro/api/form.py
@@ -60,6 +60,24 @@ def get_form(form_id: str) -> dict:
     }
 
 
+@frappe.whitelist(allow_guest=True)
+def get_link_field_options(
+    doctype: str,
+    filters: dict | None = None,
+    page_length: int = 20,
+) -> list[str]:
+    meta = frappe.get_meta(doctype)
+    title_field = meta.title_field or "name"
+
+    results = frappe.get_all(
+        doctype=doctype,
+        filters=filters or {},
+        page_length=page_length,
+        fields=["name as value", f"{title_field} as label"],
+    )
+    return results
+
+
 @frappe.whitelist()
 def get_form_shared_with(form_id: str) -> list[frappe.Any]:
     """
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 70ba48d..350d660 100644
--- a/forms_pro/forms_pro/doctype/form_field/form_field.json
+++ b/forms_pro/forms_pro/doctype/form_field/form_field.json
@@ -35,7 +35,7 @@
    "fieldtype": "Select",
    "in_list_view": 1,
    "label": "Fieldtype",
-   "options": "Data\nNumber\nEmail\nDate\nDate Time\nDate Range\nTime Picker\nPassword\nSelect\nSwitch\nTextarea\nText Editor",
+   "options": "Data\nNumber\nEmail\nDate\nDate Time\nDate Range\nTime Picker\nPassword\nSelect\nSwitch\nTextarea\nText Editor\nLink",
    "reqd": 1
   },
   {
@@ -68,7 +68,7 @@
  "index_web_pages_for_search": 1,
  "istable": 1,
  "links": [],
- "modified": "2025-10-06 03:28:25.437379",
+ "modified": "2026-01-09 13:23:39.055114",
  "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 3986792..f2d832b 100644
--- a/forms_pro/forms_pro/doctype/form_field/form_field.py
+++ b/forms_pro/forms_pro/doctype/form_field/form_field.py
@@ -30,6 +30,7 @@ class FormField(Document):
             "Switch",
             "Textarea",
             "Text Editor",
+            "Link",
         ]
         label: DF.Data
         options: DF.SmallText | None
diff --git a/frontend/src/components/builder/FieldRenderer.vue b/frontend/src/components/builder/FieldRenderer.vue
index 793c844..dbc2af0 100644
--- a/frontend/src/components/builder/FieldRenderer.vue
+++ b/frontend/src/components/builder/FieldRenderer.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref, watch, onMounted } from "vue";
 import { Asterisk } from "lucide-vue-next";
 import RenderField from "../RenderField.vue";
+import { createResource } from "frappe-ui";
+import { useSubmissionForm } from "@/stores/submissionForm";
+
+const submissionFormStore = useSubmissionForm();
 
 const props = defineProps({
     field: {
@@ -47,7 +51,15 @@ const getClasses = computed(() => {
     }
 });
 
-const getOptions = () => {
+type SelectOption = {
+    label: string;
+    value: string;
+};
+
+// Reactive ref to store options
+const selectOptions = ref<string[] | SelectOption[] | null>(null);
+
+const getOptions = async () => {
     if (!fieldData.value.options) {
         return "";
     }
@@ -56,8 +68,42 @@ const getOptions = () => {
         return fieldData.value.options.split("\n");
     }
 
+    if (fieldData.value.fieldtype === "Link") {
+        const _options = createResource({
+            url: "forms_pro.api.form.get_link_field_options",
+            makeParams: () => {
+                return {
+                    doctype: fieldData.value.options,
+                    filters: {},
+                    page_length: 999,
+                };
+            },
+        });
+        await _options.fetch();
+        return _options.data;
+    }
+
     return fieldData.value.options;
 };
+
+// Load options when component mounts or field data changes
+const loadOptions = async () => {
+    selectOptions.value = await getOptions();
+};
+
+// Watch for changes to field type or options
+watch(
+    () => [fieldData.value.fieldtype, fieldData.value.options],
+    () => {
+        loadOptions();
+    },
+    { immediate: true }
+);
+
+// Also load on mount
+onMounted(() => {
+    loadOptions();
+});
 </script>
 <template>
     <div :class="getClasses" v-if="fieldData.fieldtype == 'Switch'">
@@ -151,7 +197,7 @@ const getOptions = () => {
             :field="fieldData"
             :class="{ 'pointer-events-none': inEditMode }"
             :disabled="disabled"
-            :options="getOptions()"
+            :options="selectOptions"
         />
         <small class="text-gray-500">
             {{ fieldData.description }}
diff --git a/frontend/src/utils/form_fields.ts b/frontend/src/utils/form_fields.ts
index 7e1487a..31df0e2 100644
--- a/frontend/src/utils/form_fields.ts
+++ b/frontend/src/utils/form_fields.ts
@@ -129,6 +129,7 @@ export const CheckboxField: FormFieldType = {
 
 export const formFields: FormFields[] = [
   { name: "Data", ...DataField },
+  { name: "Link", ...SelectField },
   { name: "Number", ...NumberField },
   { name: "Email", ...EmailField },
   { name: "Date", ...DateField },