<CustomField>
Allows custom fields in Formally forms in JSX.
This documentation page is about Custom Fields in JSX specifically. To read more generally about Custom Fields in Formally.
When using React JSX you may implement a Custom Field resolver as...
Use of <CustomField>
<CustomField
id="myCustomField"
component="myMap"
labelHtml={{ en: 'your custom component label' }}
/>
Note the component="myMap"
.
Provide a resolver for myMap
with the customFields
prop,
<Formally
formBuilderId="whatever-your-formbuilder-id-was"
customFields={{
myMap: myMapComponent,
}}
/>;
const myMapComponent = ({
inputFieldId,
locale,
node,
name,
value,
fieldState,
label,
hint,
error,
onChange,
onBlur,
}) => {
// TODO your custom field goes here!
//
// Use the 'value' and 'onChange'.
// Use 'onBlur' to trigger validation.
//
// For accessibility reasons be sure to use
// the 'label' prop or render your own
// <label htmlFor={inputFieldId}>
return (
<>
{label}
<MapPicker value={value} onChange={onChange} onBlur={onBlur} />
</>
);
};
See also
React Custom Fields.<CustomField>
's props
Prop | About | Type |
---|---|---|
component | a The | string |
hideInAnswerSummary | Whether to hide any answers below this. | boolean |
hintHtml | Localisable HTML: hint content E.g.
| LocalisedHtml |
isRequired | Whether users are required to fill in this form field. The custom | boolean |
labelHelpPopoutContentButtonLabel | Localisable text: Popout Content button label | LocalisedPlainText |
labelHelpPopoutContentModalContentHtml | Localisable text: Popout Content modal title | LocalisedHtml |
labelHelpPopoutContentModalHeadingHtml | Localisable text: Popout Content modal title | LocalisedHtml |
labelHtml | Localisable HTML: Label content E.g.
| LocalisedHtml |
name | The Name of the form control. Submitted with the form as part of a name:value pair in the | string |
validationErrorInvalidHtml | Localisable HTML: invalid validation content | LocalisedHtml |
validationErrorRequiredHtml | Localisable HTML: required validation content | LocalisedHtml |
id | Component Id. Must be unique within the form. | string |
meta | Arbitrary metadata on this node. This is useful when developing custom controls as it allows you to pass down metadata/extensions. | string |
hasChildrenById | Non-editable. Used to indicate that this component doesn't have children. | false |
hasTagsById | Non-editable. Used to indicate that this component isn't a form field with tags by id. | false |
isFormField | Non-editable. Used to indicate that this component is a form field. | true |
isMultichoice | Non-editable. Used to indicate that this component isn't a multichoice form field like | false |
type | Non-editable. Type of component of | "CustomField" |