Add Custom Fields to the Admin UI

Add Custom Fields to the Admin UI

It’s really common that you’ll want to extend the Admin UI with custom components. Common use cases for this functionality are:

  • You want to show a built-in datatype in a unique way, for example this string input might actually be a tag array that’s separated by commas.
  • You want to show icons / otherwise visually design what users are seeing in the Admin area.
  • You have a complex JSON field in my database and you want to present UI to the users to edit it instead of a text box, for example it might represent the schedule for repeating on a meeting invite or similar, so you want to show that UI to users.

All of this is possible (and easy!) in Graphweaver. In fact if you want to inject whole pages into the admin area, you can learn more about that in .

By default, Graphweaver looks for custom fields in [your project]/admin-ui/custom-fields/index. If it finds an export called customFields after importing that file, then it’ll build your custom fields into the admin UI and start using them.

Example

Here’s an example of a custom field from our REST example project:

import { CustomField } from '@exogee/graphweaver-admin-ui-components';
import { Link } from './link';

export const customFields = new Map<string, CustomField[]>();
customFields.set('Task', [
	{
		name: 'search',
		type: 'custom',
		index: 3,
		component: Link,

		hideOnDetailForm: true,
	},
]);

This tells Graphweaver that:

  • There’s a custom field we want to add to the Task entity.
  • The field is called 'search' and should be displayed at index 3
  • By default this field is shown both in the table and on the detail form, but we only want this to show up on the table.
  • When rendering this, we should render the Link component, which looks like this:
import { MouseEventHandler } from 'react';

import { ReactComponent as OpenIcon } from '../assets/16-open-external.svg';
import { CustomFieldArgs } from '@exogee/graphweaver-admin-ui-components';

interface Task {
	user: {
		label: string;
		value: string;
	};
}

export const Link = ({ entity }: CustomFieldArgs<Task>) => {
	const handleClick = (e: MouseEventHandler<HTMLDivElement>) => {
		e.preventDefault();
		e.stopPropagation();
		window.open(`https://google.com/search?q=${entity.user.label}`, '_blank', 'noreferrer');
	};
	return (
		<div style={{ cursor: 'pointer' }} onClick={handleClick}>
			<OpenIcon />
		</div>
	);
};

This will render a link icon that when clicked, searches Google for the user that owns the task in a new window.

Overriding Default Fields

You can override default fields for entities by adding a custom field that has the same name as an existing field. Graphweaver will render your custom field instead of the in-built UI for that field in this case, and you can select whatever index you want for the field.

Manipulating Detail Panel Form Data

We use Formik in the Admin UI to show and manage the detail form. This means in your custom fields you can utilise the useFormikContext() hook to read initial values vs current values, implement validation, and change the value of any other field on the form from your custom field as users edit the values.

Configuring Where Graphweaver Looks for Custom Fields

By default custom fields are located in [your project]/admin-ui/custom-fields, but if you want to change the import path you can control this with the adminUI.customFieldsPath configuration option in the graphweaver-config file.

Exogee