feat: make options field as link field for Table & Link type fields

frappe/public/js/form_builder/components/FieldProperties.vue

@@ -17,6 +17,20 @@ let docfield_df = computed(() => {
 			return false;
 		}
 
+		if (df.fieldname === "options") {
+			df.fieldtype = "Small Text";
+			df.options = "";
+
+			if (in_list(["Table", "Link"], store.selected_field.fieldtype)) {
+				df.fieldtype = "Link";
+				df.options = "DocType";
+
+				if (store.selected_field.fieldtype === "Table") {
+					df.is_table_field = 1;
+				}
+			}
+		}
+
 		if (search_text.value) {
 			if (
 				df.label.toLowerCase().includes(search_text.value.toLowerCase()) ||

frappe/public/js/form_builder/components/controls/LinkControl.vue

@@ -0,0 +1,76 @@
+<!-- Used as Link Control -->
+<script setup>
+import { onMounted, ref, useSlots, computed, watch } from "vue";
+import { useStore } from "../../store";
+
+let store = useStore();
+let props = defineProps(["df", "modelValue"]);
+let emit = defineEmits(["update:modelValue"]);
+let slots = useSlots();
+
+let link = ref(null);
+let link_control = ref(null);
+let update_control = ref(true);
+
+let content = computed({
+	get: () => props.modelValue,
+	set: value => emit("update:modelValue", value)
+});
+
+onMounted(() => {
+	if (link.value) {
+		props.df.hidden = 0;
+
+		if (props.df.is_table_field) {
+			props.df.filters = { istable: 1 };
+		}
+
+		link_control.value = frappe.ui.form.make_control({
+			parent: link.value,
+			df: {
+				...props.df,
+				change: () => {
+					if (update_control.value) {
+						content.value = link_control.value.get_value();
+					}
+					update_control.value = true;
+				}
+			},
+			disabled: Boolean(slots.label) || store.read_only,
+			value: content.value,
+			render_input: true,
+			only_input: Boolean(slots.label)
+		});
+	}
+});
+
+watch(
+	() => content.value,
+	value => {
+		update_control.value = false;
+		link_control.value.set_value(value);
+	}
+);
+</script>
+
+<template>
+	<div
+		v-if="slots.label"
+		class="control frappe-control"
+		:data-fieldtype="df.fieldtype"
+		:class="{ editable: slots.label }"
+	>
+		<!-- label -->
+		<div class="field-controls">
+			<slot name="label" />
+			<slot name="actions" />
+		</div>
+
+		<!-- link input -->
+		<input class="form-control" type="text" disabled />
+
+		<!-- description -->
+		<div v-if="df.description" class="mt-2 description" v-html="df.description" />
+	</div>
+	<div v-else ref="link"></div>
+</template>

frappe/public/js/form_builder/components/controls/TableControl.vue

@@ -6,6 +6,7 @@ let props = defineProps(["df"]);
 
 let table_columns = computedAsync(async () => {
 	let doctype = props.df.options;
+	if (!doctype) return [];
 	await frappe.model.with_doctype(doctype);
 	let child_doctype = frappe.get_meta(doctype);
 	return get_table_columns(props.df, child_doctype);

frappe/public/js/form_builder/globals.js

@@ -5,6 +5,7 @@ import CodeControl from "./components/controls/CodeControl.vue";
 import DataControl from "./components/controls/DataControl.vue";
 import GeolocationControl from "./components/controls/GeolocationControl.vue";
 import ImageControl from "./components/controls/ImageControl.vue";
+import LinkControl from "./components/controls/LinkControl.vue";
 import RatingControl from "./components/controls/RatingControl.vue";
 import SelectControl from "./components/controls/SelectControl.vue";
 import SignatureControl from "./components/controls/SignatureControl.vue";
@@ -36,7 +37,7 @@ export function registerGlobalComponents(app) {
 		.component("ImageControl", ImageControl)
 		.component("IntControl", DataControl)
 		.component("JSONControl", CodeControl)
-		.component("LinkControl", DataControl)
+		.component("LinkControl", LinkControl)
 		.component("LongTextControl", TextControl)
 		.component("MarkdownEditorControl", CodeControl)
 		.component("PasswordControl", DataControl)