Take part in the GraphQL Challenges Survey 2023

Field element declaration

Field element propertiesAnchor

KeyTypeDescription
nameStringName of the field element
apiIdStringAPI ID of the field element
typefield (required)The type of element
features[FieldExtensionFeature] (required)List of features implemented by the element (at least one)
fieldTypeFieldExtensionType (required)What field type is your app element targeting
urlStringURL of the field element
descriptionStringDescription of the field element
fieldConfigConfigFieldsOptional definition of field configuration settings. Supports the following field types: string, number, and boolean

FieldExtensionType enumerationAnchor

Supported FieldExtensionType enumeration values:

Typevalue type
STRINGstring
INTnumber (without decimals)
FLOATnumber
BOOLEANboolean
JSONany valid JSON value
DATEstring in format 'yyyy-MM-dd'
DATETIMEstring in ISO 8601 format
LOCATIONobject { "latitude": number; "longitude": number; }
COLORobject { "rgba": { "r": number; "g": number; "b": number; "a": number; } }

FieldExtensionFeature enumerationAnchor

  • FieldRenderer: The element replaces a form field.
  • ListRenderer: By enabling this feature, you indicate that the element can handle array values as well, and that Hygraph should call it directly instead of the default list renderer on multiple value inputs.
  • TableRenderer: The element should also be used to display values in the content table.

Field configurationAnchor

This is an example for the JSON object for the field configuration:

{
  "CUSTOM_COLORS": {
    "type": "string",
    "description": "Enter color options to display, separated by comma. E.g.: #fff, #f00, #0f0",
    "displayName": "Colors"
  }
}

According to this example, when the form is rendered, it will render a field called CUSTOM_COLORS of type string, with the display name "Colors", and the description "Enter color options to display, separated by a comma. E.g.: #fff, #f00, #0f0".

This information will be sent as metadata to the app element, and will display in the schema editor - as part of the custom field that it was configured for - and users will be able to add it to their models.

The schema view of the above example would look like this:

fieldConfig example - Field
fieldConfig example - Field

To later retrieve this information, you can do this:

// Reading config data in Field Extension
function FieldElement() {
  const {
    extension: { fieldConfig },
  } = useFieldExtension();
  const colorsConfig = fieldConfig?.colors;


  return <div>{colorsConfig}</div>;
}