API reference

Field ExtensionAnchor

export interface FieldExtensionProps {
// name of the field in the form (may differ from the field apiId, ie. for localized fields)
name: string;
// current locale on localized field
locale?: string;
// id of the current entry, null on a new entry.
entryId: string | null;
isTableCell: boolean;
value: any;
onBlur: <T extends HTMLElement = HTMLElement>(
event?: FocusEvent<T>,
) => Promise<void>;
onChange: <T extends HTMLElement = HTMLElement>(
event: ChangeEvent<T> | any,
) => Promise<void>;
onFocus: <T extends HTMLElement = HTMLElement>(
event?: FocusEvent<T>,
) => Promise<void>;
// @see https://final-form.org/docs/react-final-form/types/FieldRenderProps
meta: {
active: boolean;
error: any;
touched: boolean;
};
// open the asset picker (see the Asset type in your Content Api)
openAssetPicker: () => Promise<null | (Asset & Record<string, unknown>)>;
// access to the form state and other form fields
form: {
change: <Value = any>(name: string, value: Value) => Promise<void>;
// @see https://graphcms.com/docs/ui-extensions/react-sdk/state-getters#get-state
getState: <Values = Record<string, any>>() => Promise<FormState<Values>>;
// @see https://graphcms.com/docs/ui-extensions/react-sdk/state-getters#get-field-state
getFieldState: <Value = any>(
fieldName: string,
) => Promise<FieldState<Value>>;
// @see https://graphcms.com/docs/ui-extensions/react-sdk/state-subscriptions#subscribe-to-field-state
subscribeToFieldState: <Value = any>(
name: string,
callback: (state: FieldState<Value>) => any,
subscription: FieldSubscription,
) => Promise<() => any>;
// @see https://graphcms.com/docs/ui-extensions/react-sdk/state-subscriptions#subscribe-to-form-state
subscribeToFormState: <Values = Record<string, any>>(
callback: Subscriber<FormState<Values>>,
subscription: FormSubscription,
) => Promise<() => any>;
// @see https://graphcms.com/docs/ui-extensions/field-extension/interacting-with-fields#set-fields-visibility
setFieldsVisibility: (
arg:
| VisibilityMap
| ((currentVisibilityMap: VisibilityMap) => VisibilityMap),
) => void;
};
// details about the current field
field: {
id: string;
apiId: string;
description: string | null;
displayName: string;
isList: boolean;
isLocalized?: boolean;
isRequired?: boolean;
isUnique?: boolean;
// true when in version or stage comparison view
isPreview: boolean;
type: FieldExtensionType;
};
// details about the current model
model: {
apiId: string;
apiIdPlural: string;
id: string;
description: string | null;
displayName: string;
isLocalized: boolean;
};
// status and configuration of the extension.
extension: {
config: Record<string, any>;
status: 'connected' | 'connecting' | 'error' | 'disconnected';
};
// whether the field is currently in fullscreen mode
isExpanded: boolean;
// set fullscreen mode
expand: (expand: boolean | ((isExpanded: boolean) => boolean)) => void;
// information needed to be able to use the project api's
context: {
project: {
id: string;
name: string;
// management api access
mgmtApi: string;
mgmtToken: string;
};
environment: {
id: string;
name: string;
// content api access
endpoint: string;
authToken: string;
};
};
openDialog: <DialogReturn = any, DialogProps = Record<string, any>>(
src: string,
props?: {
disableOverlayClick?: boolean;
maxWidth?: string;
ariaLabel?: string;
} & DialogProps,
) => Promise<DialogReturn | null>;
// Saved instance config
fieldConfig?: Record<string, boolean | number | string | undefined | null>;
tableConfig?: Record<string, boolean | number | string | undefined | null>;
}
export interface FormSidebarExtensionProps extends ExtensionPropsBase {
form: Form;
model: Model;
/**
* @deprecated Please use {@link Form.setFieldsVisibility}
*/
setFieldsVisibility: SetFieldsVisibility;
/**
* Saved instance config of the following shape
* `{ [key in FormSidebarExtensionDeclaration['sidebarConfig']]: value }`
*/
sidebarConfig?: Record<string, boolean | number | string | undefined | null>;
allLocales: Locale[];
stages: Stage[];
entry?: {
id: string | null;
createdBy?: User;
updatedBy?: User;
createdAt?: string;
updatedAt?: string;
};
}

HooksAnchor

useUiExtension()Anchor

export interface ExtensionPropsBase {
extension: {
config: Record<string, any>;
status: 'connected' | 'connecting' | 'error' | 'disconnected';
};
isExpanded: boolean;
expand: (expand: boolean | ((isExpanded: boolean) => boolean)) => unknown;
context: {
project: {
id: string;
name: string;
mgmtApi: string;
mgmtToken: string;
};
environment: {
id: string;
name: string;
endpoint: string;
authToken: string;
};
};
openDialog: <DialogReturn = any, DialogProps = Record<string, any>>(
src: string,
props?: {
disableOverlayClick?: boolean;
maxWidth?: string;
ariaLabel?: string;
} & DialogProps,
) => Promise<DialogReturn | null>;
showToast: ShowToast;
}

useUiExtensionDialog()Anchor

export interface ExtensionDialogProps extends ExtensionPropsBase {
onCloseDialog: (value: any) => void;
}

Did you find this page useful?

Your feedback helps us improve our docs, and product.