Interacting with other fields

UI extensions can interact with the other fields of the form, and with the form itself.

For these purposes, the form property exposes the following methods:

Method Signature Description
change (fieldName: string, value: any) => Promise<void> changes the value of another field
getState () => Promise<FormState> returns the current form state
getFieldState (fieldName: string) => Promise<FieldState> returns the given field state
subscribeToFieldState (fieldName: string, callback: (state: FieldState, subscription: FieldSubscription) => void) => Promise<Unsubscribe> opens a subscription to a field's state changes
subscribeToFormState (callback: (state: FormState) => void, subscription: FormSubscription) => Promise<Unsubscribe>; opens a subscrition to the form's state changes
setFieldsVisibility (arg: VisibilityMap| ((currentVisibilityMap:VisibilityMap) => VisibilityMap)) => void; Allows modifying visibility of any field

TypesAnchor

Internally, GraphCMS uses final-form to manage form and field states.

FormStateAnchor

See FormState on final-form.

The FormSubscription param has the same shape as FormState, but using a boolean to describe which state changes you want to subscribe to.

subscribeToFormState((state) => console.log(state.dirty, state.errors), {
// react only to form `dirty` and `invalid` state changes
dirty: true,
invalid: true,
});

FieldStateAnchor

See FormState on final-form.

The FieldSubscription param has the same shape as FieldState, but using a boolean to describe which state changes you want to subscribe to.

subscribeToFieldState('title', (state) => console.log(state.value), {
// react only to field `value` changes
value: true,
});

UnsubscribeAnchor

Both subscribeToFieldState and subscribeToFormState return a function to be called when needing to unsubscribe from changes. In order to avoid perfomance issues, make sure to unsubscribe any existing subscription before subscribing again.

Example in React:

React.useEffect(() => {
let unsubscribe;
subscribeToFieldState(
'title',
(state) => console.log(state.value),
{ value: true },
)
.then(fieldUnsubscribe => unsubscribe = fieldUnsubscribe);
return () => { unsubscribe?.() };
}, []);

Set Fields VisibilityAnchor

type VisibilityMap = {
[fieldApiId: string]: 'READ_ONLY' | 'HIDDEN' | 'READ_WRITE'
}

Using object form to set visibility for field with API ID fieldApiId

setFieldsVisibility({
fieldApiId: 'READ_ONLY'
})

Using callback to calculate next visibility value for field with API ID fieldApiId

setFieldsVisibility(
(currentVisibilityMap) => {
const nextVisibilityValue = currentVisibilityMap[fieldApiId] === 'READ_ONLY'
? 'READ_WRITE'
: 'READ_ONLY'
return {
fieldApiId: nextVisibilityValue
}
}
)

Did you find this page useful?

Your feedback helps us improve our docs, and product.