Merge pull request #35933 from git-avc/form_control_alignment

feat: let's set form control alignment

frappe/core/doctype/docfield/docfield.json

@@ -72,6 +72,7 @@
   "mandatory_depends_on",
   "read_only_depends_on",
   "display",
+  "alignment",
   "print_width",
   "width",
   "max_height",
@@ -475,6 +476,13 @@
    "max_height": "3rem",
    "options": "JS"
   },
+  {
+   "depends_on": "eval:in_list([\"Data\", \"Int\", \"Float\", \"Currency\", \"Percent\"], doc.fieldtype)",
+   "fieldname": "alignment",
+   "fieldtype": "Select",
+   "label": "Alignment",
+   "options": "\nLeft\nCenter\nRight"
+  },
   {
    "fieldname": "column_break_38",
    "fieldtype": "Column Break"

frappe/core/doctype/docfield/docfield.py

@@ -17,6 +17,7 @@ class DocField(Document):
 		allow_bulk_edit: DF.Check
 		allow_in_quick_entry: DF.Check
 		allow_on_submit: DF.Check
+		alignment: DF.Literal["", "Left", "Center", "Right"]
 		bold: DF.Check
 		button_color: DF.Literal["", "Default", "Primary", "Info", "Success", "Warning", "Danger"]
 		collapsible: DF.Check
@@ -126,7 +127,6 @@ class DocField(Document):
 
 	def get_link_doctype(self):
 		"""Return the Link doctype for the `docfield` (if applicable).
-
 		* If fieldtype is Link: Return "options".
 		* If fieldtype is Table MultiSelect: Return "options" of the Link field in the Child Table.
 		"""

frappe/custom/doctype/custom_field/custom_field.json

@@ -46,6 +46,7 @@
   "print_hide",
   "print_hide_if_no_value",
   "print_width",
+  "alignment",
   "no_copy",
   "allow_on_submit",
   "in_list_view",
@@ -302,6 +303,13 @@
    "no_copy": 1,
    "print_hide": 1
   },
+  {
+   "depends_on": "eval:['Data', 'Int', 'Float', 'Currency', 'Percent'].includes(doc.fieldtype)",
+   "fieldname": "alignment",
+   "fieldtype": "Select",
+   "label": "Alignment",
+   "options": "\nLeft\nCenter\nRight"
+  },
   {
    "default": "0",
    "fieldname": "no_copy",

frappe/custom/doctype/custom_field/custom_field.py

@@ -24,6 +24,7 @@ class CustomField(Document):
 
 		allow_in_quick_entry: DF.Check
 		allow_on_submit: DF.Check
+		alignment: DF.Literal["", "Left", "Center", "Right"]
 		bold: DF.Check
 		button_color: DF.Literal["", "Default", "Primary", "Info", "Success", "Warning", "Danger"]
 		collapsible: DF.Check

frappe/custom/doctype/customize_form/customize_form.py

@@ -768,6 +768,7 @@ docfield_properties = {
 	"permlevel": "Int",
 	"width": "Data",
 	"print_width": "Data",
+	"alignment": "Select",
 	"non_negative": "Check",
 	"reqd": "Check",
 	"unique": "Check",

frappe/custom/doctype/customize_form_field/customize_form_field.json

@@ -65,6 +65,7 @@
   "print_hide",
   "print_hide_if_no_value",
   "print_width",
+  "alignment",
   "columns",
   "width",
   "is_custom_field"
@@ -356,6 +357,13 @@
    "print_width": "50px",
    "width": "50px"
   },
+  {
+   "depends_on": "eval:in_list(['Data', 'Int', 'Float', 'Currency', 'Percent'], doc.fieldtype)",
+   "fieldname": "alignment",
+   "fieldtype": "Select",
+   "label": "Alignment",
+   "options": "\nLeft\nCenter\nRight"
+  },
   {
    "depends_on": "eval:parent.istable",
    "description": "Number of columns for a field in a Grid (Total Columns in a grid should be less than 11)",

frappe/custom/doctype/customize_form_field/customize_form_field.py

@@ -16,6 +16,7 @@ class CustomizeFormField(Document):
 		allow_bulk_edit: DF.Check
 		allow_in_quick_entry: DF.Check
 		allow_on_submit: DF.Check
+		alignment: DF.Literal["", "Left", "Center", "Right"]
 		bold: DF.Check
 		button_color: DF.Literal["", "Default", "Primary", "Info", "Success", "Warning", "Danger"]
 		collapsible: DF.Check

frappe/public/js/frappe/form/controls/base_input.js

@@ -177,7 +177,16 @@ frappe.ui.form.ControlInput = class ControlInput extends frappe.ui.form.Control
 		let doc = this.doc || (this.frm && this.frm.doc);
 		let display_value = frappe.format(value, this.df, { no_icon: true, inline: true }, doc);
 		// This is used to display formatted output AND showing values in read only fields
-		this.disp_area && $(this.disp_area).html(display_value);
+		if (this.disp_area) {
+			$(this.disp_area).html(display_value);
+			// Apply alignment only for supported fields
+			if (
+				this.df.alignment &&
+				["Data", "Int", "Float", "Currency", "Percent"].includes(this.df.fieldtype)
+			) {
+				$(this.disp_area).css("text-align", this.df.alignment.toLowerCase());
+			}
+		}
 	}
 	set_label(label) {
 		if (label) this.df.label = label;

frappe/public/js/frappe/form/controls/data.js

@@ -251,6 +251,13 @@ frappe.ui.form.ControlData = class ControlData extends frappe.ui.form.ControlInp
 		if (this.df.input_class) {
 			this.$input.addClass(this.df.input_class);
 		}
+		// Apply alignment for supported field types
+		if (
+			this.df.alignment &&
+			["Data", "Int", "Float", "Currency", "Percent"].includes(this.df.fieldtype)
+		) {
+			this.$input.css("text-align", this.df.alignment.toLowerCase());
+		}
 	}
 	set_input(value) {
 		this.last_value = this.value;