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 your database and want to present a full-featured 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. If it finds an export called customFields after importing that file / folder, 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.

GQL in Custom Fields

It’s possible to include a GQL query in a custom component, but you may only see the first result if the query returns multiple results. This is an effect of Apollo cache configuration, but the cache configuration can be changed to avoid this or the id can be added to the fields returned.

Configuring the Apollo Client cache