setColumnStyle(columnName, cssStyle)

The setColumnStyle function is available in many hooks and enables developers to style individual fields. It supports virtually all CSS styles, but keep in mind that JavaScript requires styles to be written in camelCase instead of kebab-case.

Scope: FORM

Parameters

Parameter	Type	Description
columnName	string	The name of the database table column.
cssStyle	object	CSS style applied to the specified column.

Structure parameter cssStyle

{
	control : {
		// CSS to overwrite control style
	},
	label: {
		// CSS to overwrite label style
	},
	input: {
		// CSS to overwrite input style
	},
	hint: {
		// CSS to overwrite hint style
	}
}

Return Value

None

Using camelCase

In JavaScript, kebab-case is not allowed for property names because hyphens are not valid in identifiers. For example, padding-top is not a valid property name, so it must be written as paddingTop. Make sure to follow this format when applying styles.

✨ CSS written in kebab-case

input: {
	font-size: 1em,
	color: #ccc,
	background-color: white,
	border: 1px solid black,
}

✨ Same CSS written in camelCase

input: {
	fontSize: "1em",
	color: "#ccc",
	backgroundColor: "white",
	border: "1px solid black",
}

Example of a onRowInit Hook

Change style for anonymous users.

((mode, getColumnValue, setColumnValue, setColumnStyle) => {

	if (app.getUsername() === "anonymous") {
		setColumnStyle("dname", {
			control: {
				opacity: 0.4,
			},
			label: {
				fontStyle: "italic",
			},
			input: {
				pointerEvents: "none",
			},
			hint: {
				display: "none",
			},
		})
	}

})