The Commitspark content editing frontend user interface for content editors is generated on the fly for any valid Commitspark content model (schema). This generation can be adjusted via a GraphQL directive in the content model (schema) file.

Directives are a feature of GraphQL that allows schemas to carry additional information to provide to schema consuming services. See the GraphQL specification for details.

@UI

The directive UI is used by the Commitspark content editing frontend to determine any customizations of the content editing user interface.

To use the directive, it must first be declared in the GraphQL schema file as follows:

directive @Ui($ARGUMENTS) on FIELD_DEFINITION

The value of $ARGUMENTS depends on which specific customization features are to be available for use in the schema. Combine the directive argument definitions of all customizations you want to use into a comma-separated string and replace $ARGUMENTS with this string.

visibleList

This directive argument allows specifying that a given text field of a GraphQL @Entry type is to be used for labeling entries of that type in list views instead of the entry's ID field.

The concrete argument definition is as follows:

visibleList:Boolean

This directive can be applied to more than one field of an @Entry type.

Example

directive @Ui(visibleList:Boolean) on FIELD_DEFINITION

type Page @Entry {
    id: ID!
    title: String! @Ui(visibleList:true)
    slug: String! @Ui(visibleList:true)
}

editor

This directive argument allows defining for a given text field of a GraphQL type, that the field is to be rendered with a specific editor widget instead of the default single line text input.

The concrete argument definition is as follows:

editor:String

This directive can be applied to more than one field of an @Entry type.

Available Editors

multiline

Applying this value causes the annotated string field to be rendered with a plain text multi-line editor.

Example

directive @Ui(editor:String) on FIELD_DEFINITION

type Page @Entry {
    id: ID!
    body: String! @Ui(editor: "multiline")
}

markdown

Applying this value causes the annotated string field to be rendered with a multi-line markdown editor, specifically with remarkjs.

Example

directive @Ui(editor:String) on FIELD_DEFINITION

type Page @Entry {
    id: ID!
    body: String! @Ui(editor: "markdown")
}

Example repository

To see Commitspark directives in action, please also take a look at our example content repository.