FormField Components

Learn about FormField components.

The issue linking and alert rule action UI components can use FormField components to display attributes in their respective modals. These components can render custom forms with inputs specified according to the schemes below. They behave similarly to their HTML equivalents.

schema.json
Copied
{
  "type": "text",
  "label": <String>,
  "name": <String>,
  "default": <String>,
}

  • label - (Required) Label text to be rendered for the form field
  • name - (Required) Value to use in name attribute of the field
  • default - default to pre-populate with. Options include issue.title and issue.description. Only used for issue link components.
    • issue.title - title of the Sentry issue
    • issue.description - description of the Sentry issue

schema.json
Copied
{
  "type": "textarea",
  "label": <String>,
  "name": <String>,
  "default": <String>,
}

  • label - (Required) Label text to be rendered for the form field
  • name - (Required) Value to use in name attribute of the field
  • default - default to pre-populate with options include issue.title and issue.description. Only used for issue link components.
    • issue.title - title of the Sentry issue
    • issue.description - description of the Sentry issue

schema.json
Copied
{
  "type": "select",
  "label": <String>,
  "name": <String>,
  "uri": <URI>,
  "async": <Boolean>,
  "options": <Array<Array<String, String>>>,
  "depends_on": <Array<String>>,
  "skip_load_on_open": <Boolean>
}

  • label - (Required) Label text to be rendered for the form field
  • name - (Required) Value to use in name attribute of the field
  • uri - (Required if developer doesn't provide options) URI to retrieve values from. Check out our URI Guidelines documentation for formatting help.
  • async - (Optional) Used only if uri is present. If true (default), will query the URI as the user types, for autocomplete suggestions (see response format below). If false, will query the URI once initially to retrieve all possible options. This request must succeed, and the response must return data in the format Sentry expects, otherwise the entire component won't render.
  • options - (Required if developer doesn't provide uri) Static list of options in the format of [["value1", "label1"], ["value2", "label2"]]
  • depends_on - (Optional) If a field value depends on the value of another field, a request will be made to load those options when the dependent field is set.
  • skip_load_on_open (Optional) If true, this field will not load options when the page loads. Instead, it will wait for the user to start typing before fetching options.

The request sent to the uri to load options is a GET request. The parameters are encoded into the query parameters like so:

Copied
{
  "installationId": <String>,
  "projectSlug": <String>,
  "query": <String>,
  "dependentData": <String>,
}
  • installationId - The ID of the installation associated with the request
  • projectSlug - The slug of the project in Sentry
  • query - The search term the user is typing
  • dependentData - A JSON encoded string of the dependent data if that field has depends_on set

Response from uri, when specified, must be JSON and match the following format:

Copied
[
  {
    "label": <String>,
    "value": <String>,
    "default": <Boolean>,
  },
  ...
]
Help improve this content
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").