Sitecore Headless Forms - Hidden Field Using Query Value

This one goes out to @AJS on Sitecore slack who asked how they could implement the query string provider in Sitecore Forms (headless/JSS).

Firstly, make sure you add the QueryStringProvider from Sitecore Forms Extensions, as well adding the required Sitecore item(s) to your instance.

Once that's done see the Sitecore documentation on adding a React/Next.JS form to your headless app.

Finally you're ready to implement a custom field factory (see my previous post) with a custom hidden element, setting the value based on the value from the query string:

	import { useRouter } from 'next/router';
	import {
	FieldViewModel,
	InputViewModel
	} from '@sitecore-jss/sitecore-jss-forms';
	import {
	createDefaultFieldFactory,
	ValueFieldProps
	} from '@sitecore-jss/sitecore-jss-react-forms';
	export interface ValueProviderViewModel extends FieldViewModel {
	valueProviderSettings: {
	valueProviderItemId: string;
	parameters: string;
	};
	}
	export interface ValueProviderInputViewModel extends InputViewModel, ValueProviderViewModel {}
	const CustomFieldFactory = createDefaultFieldFactory();
	// GUID for Hidden field - /sitecore/system/Settings/Forms/Field Types/Basic/Hidden
	CustomFieldFactory.setComponent('{B67C70C1-6776-4BCB-8529-AA28E02F6412}', ({ field }: ValueFieldProps<ValueProviderInputViewModel>) => {
	const router = useRouter();
	// GUID is for Query String Value Provider
	// https://github.com/bartverdonck/Sitecore-Forms-Extensions/blob/master/src/Feature/FormsExtensions/items/ValueProviders/Value%20Providers/URL%20Parameter%20-%20Query%20String.yml
	if(field.model.valueProviderSettings.valueProviderItemId == '{ACF6ABAD-6B2C-4294-808B-02FED11552A2}')
	field.model.value = router.query[field.model.valueProviderSettings.parameters] as string;
	return (
	<input type="hidden" id={field.valueField.id} name={field.valueField.name} value={field.model.value as string} />
	);
	});

view raw custom-field-factory.tsx hosted with ❤ by GitHub

Enjoy!