Screens

What are Screens?

A screen is a layout for a ticket. It decides which fields show up, in what order, how wide each one is, and how they group together. Every screen belongs to a template, so each ticket type can present itself differently.

Screens are written in the screen layout language, a compact JSX-style markup. You rarely start from scratch: every template ships with a full set of default screens, and the visual editor lets you tweak the markup with a live preview beside it.

Screen Types

A template has one screen for each place a ticket is shown, plus any number of sidebar sections. The screen's type (its name) determines where it renders.

Create

The create screen is the form shown when someone creates a ticket from this template. Keep it lean, since only the fields people must fill in up front belong here. By default it asks for just a title and a description.

Issues (detail view)

The issues screen is the main body of the full ticket detail page - the large central area next to the sidebar. It is where the primary content of a ticket lives, such as the description and any rich body fields.

Preview pane

The preview-pane screen renders in the split-view pane that slides in when you click a ticket on the board, so you can review and edit without leaving the board. It typically shows the most-used fields at a glance.

Preview modal

The preview-modal screen is the compact hover card shown when you hover over a ticket reference elsewhere in the app. It is read-only and meant for a quick summary, so it favors labels over editable fields.

Ticket card

The ticket-card screen defines how a ticket looks as a card on a board or in a list. It is read-only and usually small: a sequence number, title, status, and a couple of key labels.

Sections

A section screen is a named block in the sidebar of the ticket detail page. Unlike the other types, a template can have many section screens, each with its own name and sort order, and they stack down the sidebar as collapsible groups.

Default Screens

When an organization is created, Pomavo seeds five templates - Epic, Task, SubTask, User Story, and Bug Report - and gives every one of them the same starting set of screens. Here is exactly what each default screen contains, rendered as its layout result.

Default create screen

Just the essentials, so creating a ticket stays quick.

1
2

<Field id="Title" width={12} />
<Field id="Description" width={12} height={3} />

Default issues screen

The detail body leads with a tall description field.

1

<Field id="Description" width={12} height={5} />

Default preview pane

A fuller view with the fields you reach for most.

1
2
3
4
5
6
7
8
9
10
11
12

<Field id="Description" width={12} height={5} />
<Row width={12}>
  <Field id="Assignee" width={6} />
  <Field id="Priority" width={6} />
</Row>
<Field id="Author" width={12} />
<Row width={12}>
  <Field id="Start Date" width={4} />
  <Field id="End Date" width={4} />
  <Field id="Effort" width={4} />
</Row>
<Field id="Tags" width={12} />

Default preview modal

A read-only hover card. Note how it uses <Label> elements for status and the last-updated time, with the description below.

1
2
3
4
5
6
7

<Row width={6}>
  <Label type="status" />
  <Field id="Priority" width={1} />
  <Field id="Assignee" width={1} />
</Row>
<Label type="last-updated-relative" x={6} y={0} width={6} align="right" />
<Field id="Description" width={12} height={3} />

Default sidebar sections

Every template starts with three sidebar sections. The Tracking section is the only place the defaults differ: Epic omits the Iteration field, since epics are not tied to a single iteration.

1
2
3
4

<Field id="Assignee" width={12} />
<Field id="Priority" width={12} />
<Field id="Author" width={12} />
<Field id="Tags" width={12} />

1
2

<Field id="Project" width={12} />
<Field id="Iteration" width={12} />

1
2
3

<Field id="Start Date" width={6} />
<Field id="End Date" width={6} />
<Field id="Effort" width={12} />

Rendered in the sidebar, these three sections become the Details, Tracking, and Time Tracking groups you see on the ticket detail page.

Editing Screens

Open a template, choose a screen, and edit its markup in the screen editor. A live preview updates beside the code so you can see the layout as you type, and the editor validates field references and grid constraints as you go.

• Only fields defined on the template can be referenced. Add the field first on the Fields page, then place it on a screen.
• Marking a field mandatory on the create screen makes it required when the ticket is created.
• The same field can appear on several screens with different widths and heights.

See also