Fields

Fields are the building blocks of your Schema. Fields can be added by selecting the desired field from the schema editor, and configuring it.

The following fields are available:

  • Single Line Text
  • Multi Line Text
  • Markdown
  • RichText Editor
  • Integer
  • Float
  • Boolean
  • Date
  • Date and Time
  • JSON
  • Asset Picker
  • Color
  • Map
  • Dropdown
  • Reference

Configuring fields

When you add a field, you will be asked to give it a Display Name, API ID, and Description. Not all of these are required, but they do help when referencing fields in your schema and content editor later.

Depending on the field you add, it's possible to assign it as a Title field that is used when viewing related content in the content editor.

You can also configure applicable fields to be required, unique, localized and accept multiple values. It's also possible to hide fields from content editors.

The complete list of field configuration options are:

Settings

  • Display Name
  • API ID
  • Description
  • Use as Title field
  • Allow multiple values
  • Localize field

Validations

  • Make field required
  • Set field as unique
  • Limit character count
  • Match a specific pattern
  • Restrict a specific pattern
  • Limit input range

Advanced

  • Hide field

More on fields and how they work can be found in our API reference

Field Basics

Add a field

  1. Navigate to the schema editor by pressing the top icon in the left-hand sidebar.
  2. Press on a model (or create a new one) that you'd like to add fields to.
  3. Press on any of the fields in the right sidebar to add a field to the selected model.

Edit a field

  1. Navigate to a model you'd like to edit one of the fields.
  2. Hover over a field you'd like to edit.
  3. Press the button labeled "Edit Field".
  4. Make your changes then press the "Update" button at the bottom of the pop-up.

Remove a field

  1. Navigate to a model you'd like to edit one of the fields.
  2. Hover over a field you'd like to remove.
  3. Press the button labeled "Delete Field".
  4. Confirm the deletion.

Configuring a Field

  1. Add a field to a model.
  2. You will immediate see the options to configure the field.

Single Line Text

Single Line Text fields are for shorter string values like simple titles, labels and more.

Configuration

Single Line string fields support all the standard configurations listed above except limiting input range.

Usage

Single Line string fields are the most simple fields to manipulate, simply enter text into the input field.

Multiline Text

Multiline text is useful for cases where simple block text might be used. These can be for short descriptions or for raw text such as HTML, XML or other formats you want to be left unparsed by the CMS itself.

Configuration

Multiline string fields support all the standard configurations listed above except limiting input range.

Usage

Multiline text is similar to Single Line text with the addition of being able to expand and resize the input field as well as use the return key to break content across lines.

Markdown

Markdown has been widely adopted by digital-native companies for the ability to generate semantic HTML from a readable syntax. This would be most commonly used as an alternative to rich-text and where longer-form content or content with embedded markup is desired.

Configuration

Markdown fields support all the standard configurations listed above except limiting input range.

Usage

Markdown fields can resized as needed to fit the content within. Markdown content can be previewed to ensure syntax validity by toggling between "Write" and "Preview" on the left hand side of the field toolbar. Additionally, you can use pre-defined tools such as bold and emphasis to generate the corresponding syntax for you.

RichText Editor

Rich Text is most commonly used where longer-form content or content with embedded markup is desired.

Configuration

Rich Text fields support all the standard configurations listed above except "use as title field", limiting character count, limiting input range, and matching or restricting patterns.

Usage

Rich Text fields can resized as needed to fit the content within. In the field toolbar you can use pre-defined formatters such as bold and emphasis to generate the corresponding syntax for you.

Embedding an iFrame
Additionally, you can embed an iFrame. Press the application window icon and insert the url you'd like to embed into the corresponding modal input field.

Wrapping with a Class
You can wrap content with a class descriptor. Select the text you'd like to annotate with a class, press the pain brush icon and then enter the class name (without a '.' before it) and accept the changes.

Creating and Formatting a Table
You can insert a table using the simple table icon in the field toolbar. Once a table is created, and the cursor is positioned in a cell, you can click on the table icon again for additional formatting options.

Integer

Integers are whole numbers, and are often used to denote whole quantities of something.

Configuration

Integer fields support all the standard configurations listed above except "use as title field", limiting character count, and matching or restricting patterns.

Usage

Integers can be entered in by hand in the single input field or manipulated with a stepper ui to the right of the input field (visible on hover).

Float

Floats are also known as floating point numbers and denote fractional values. They are often used to describe things with precision such as total distance, weight or volume.

Configuration

Float fields support all the standard configurations listed above except "use as title field", limiting character count, and matching or restricting patterns.

Usage

Integers can be entered in by hand in the single input field or manipulated with a stepper ui to the right of the input field (visible on hover).

Boolean

Boolean values represent booleans. They can be in either a true, false or null status. Booleans often represent true or false items such as if a product has been reviewed by management or if an article should exist behind a paywall.

Configuration

Boolean fields support all the standard configurations listed above except "use as title field", limiting character count, limiting input range, and matching or restricting patterns.

Usage

You can define a value as either true or false by clicking on the corresponding radio label called "true" or "false". To set a value back to null use the "clear selection" button just below the labels.

Date

Date field is a proper date primitive in GraphCMS - supporting only day, month and year properties. A common example of a Date only field might be date of birth.

Configuration

Date fields support all the standard configurations listed above except "use as title field", limiting character count, limiting input range, and matching or restricting patterns.

Usage

Typing the Input
You can type a date into the date field. Note, you need to type the input sequentially from left to right.

Using the Input Helper
At the right edge of the input, press on the calendar icon and select a date from the calendar.

Date and Time

The Date and Time field adheres to ISO 8601 standard, outlined in section 5.6 of RFC 3339. Data and time is useful for tracking the exact start of an event or the time a message was sent.

Configuration

Date and Time fields support all the standard configurations listed above except "use as title field", limiting character count, limiting input range, and matching or restricting patterns.

Usage

Typing the Input
You can type a date into the date field. Note, you need to type the input sequentially from left to right.

Using the Input Helper

  1. At the right edge of the input, press on the calendar icon and select a date from the calendar modal.
  2. Additionally, press on the clock icon from within the calendar modal and set the desired time.

JSON

JSON is useful for storing data that comes from external systems or are otherwise highly complex data structures that my not need to be edited by an editorial team. Examples may include waypoint data from a GPS device or chart data from a visualization library.

Configuration

JSON fields support all the standard configurations listed above except "use as title field", limiting character count, limiting input range, and matching or restricting patterns.

Usage

The JSON field includes an embedded editor that will check the validity of the JSON syntax. Type or paste valid JSON into this field.

Asset Picker

Assets are a core feature in GraphCMS and support any file-type. You can upload PDFs, videos, audio files, images and more.

Configuration

Asset fields support all the standard configurations listed above except "use as title field" and "localize" settings as assets are localized by default. Assets as a model can be modified to support additional fields. Press the asset model at the top of the schema editor. Proceed with workflow of adding additional fields.

Usage

Choosing an Existing Asset
Press the link icon on the left of an existing asset in the content entries modal.

Uploading an Asset:

from Disk

  1. Press the computer icon at the top of the left-hand sidebar.
  2. Either drag an asset to the drop-zone in the asset modal window or press the "+" icon to choose an asset from your local system.

from URL

  1. Press the Link icon in the left-hand sidebar.
  2. Enter a publicly accessible asset url from the internet.
  3. Press the blue link icon on the right of the input field.

from Search

  1. Press the magnifying glass icon in the left-hand sidebar.
  2. Enter a search term in the search bar of the application window.
  3. Choose from one of the corresponding search results.

from Social

  1. Press one of the integration icons in the side-bar such as Facebook or Google Drive.
  2. Follow the process of approving access to your account.
  3. Choose from the presented assets.

Crop, Circle Crop or Rotate
After uploading the asset, if it is an image, you'll be presented with the option to crop, crop to a circle or rotate the image before uploading.

Color

Color is a simple primitive that supports HEX and RGBA values.

Configuration

Color fields support all the standard configurations listed above except "use as title field", limiting character count, limiting input range, and matching or restricting patterns.

Usage

Press the color field then use the provided color selector, HEX input or RGBA input fields to choose a desired color.

Map

The map field represents two data points and one method. The underlying data stored is latitude and longitude and the method will calculate the distance between the defined coordinates and a different set of coordinates provided as an input.

Configuration

Map fields support all the standard configurations listed above except "use as title field", limiting character count, limiting input range, and matching or restricting patterns.

Usage

Choosing from the Map
Navigate around the map and click were you'd like and drop a pin to a specific location on a map.

Searching
Search for a location such as "Seattle Space Needle", press "Search" in the input field and choose from one of the returned results.

Dropdown fields represent enumerations. They are useful for representing values like state such as the status of an order.

Configuration

Dropdown fields support all the standard configurations listed above except "use as title field", limiting character count, limiting input range, and matching or restricting patterns. Make sure you have an enumeration already created.

Usage

Press on the field and choose from one of options available in the dropdown.

Reference

References are the mortar holding the models together, turning a loose collection of data types into a graph structure. References are how you define the connections between models, turning a person type into a family tree or a shirt type into an ecommerce store.

Configuration

Reference fields support all the standard configurations listed above except "use as title field" and "make unique". Additionally, you'll need to define the model(s) you want to act as the reverse side of the reference. Use the toggle switch to enable multiple model references (creating a union type) and choose from the existing models in your schema in the dropdown beneath the toggle.

You'll need to also configure at the field settings on the reverse side of the reference at the same time.

Usage

Connecting an Existing Entry

  1. Beneath the reference field, press on the link icon that defines connecting an existing entry.
  2. In the case of a union type, choose from the type you want to connect.
  3. Press the link icon to the left of the content entry in the content modal that appears that you want to connect.

Create and Connect an Existing Entry

  1. Beneath the reference field, press on the link icon that defines creating and connecting an existing entry.
  2. In the case of a union type, choose from the type you want to create an entry for.
  3. Fill in the content form that loads in from the right of the interface.
  4. Choose to either save (in DRAFT) or save and publish (DRAFT and PUBLISHED) - this connects the entry automatically.

Disconnect an Entry
You can press on the unlink icon on the right side of a connected entry to remove it from the list.

Editing a Connected Entry
You can either edit a connected entry in that entries parent content model tab or press the pencil icon on the left of the connected content entry.

Ordering a Content Entry
Dragging the four-dot handle on the left of a content entry allows you to change the order of connected entries list. Querying this content in the API will respect this order by default.


Were you expecting something more?

We are constantly contributing to our documentation, but if you spot something we're missing, let us know and we'll be sure to add it.

This site uses cookies to provide you with a better user experience. For more information, refer to our Privacy Policy