Skip to main content

<PagedView>

Category: Visual tag

The PagedView tag is a container like <View> that renders its children one page at a time instead of all at once, with a pager underneath. Use it when a task carries many similar blocks (dozens of utterances, images, or search results) and mounting them all would be slow or overwhelming — only the current page's tags are rendered.

It is the tag that <Repeater on="$items" mode="pagination"> expands into (one <View> per array item, each becoming one page), and it can also be written by hand: every direct child is one page.

Use with the following data types: any — PagedView only arranges other tags.

Attributes​

PagedView has no attributes of its own. Each direct child becomes one page (see Page size below).

Allowed children: View, Header, Labels, Label, Table, Taxonomy, Choices, Choice, Collapse, DateTime, Number, Rating, Ranker, Rectangle, Ellipse, Polygon, KeyPoint, Brush, MagicWand, RectangleLabels, EllipseLabels, PolygonLabels, VectorLabels, KeyPointLabels, BrushLabels, BitmaskLabels, HyperTextLabels, TimeSeriesLabels, Text, Audio, AudioRecord, AudioTextAlign, VideoRecord, VideoTiers, Image, HyperText, RichText, TimeSeries, List, Dialog, TextArea, Pairwise, Style, Relations, Filter, PagedView, Paragraphs, ParagraphLabels, Video, VideoRectangle.

Behavior​

  • Page size is 1 child per page. There is no page-size selector in the pager; the value is read once from the browser's localStorage key pages:repeater (an integer), so a deployment can pre-seed a larger page size but annotators can't change it from the UI.
  • Navigation — the pager at the bottom, plus hotkeys Alt+Right (next page) and Alt+Left (previous page). Changing page deselects all regions and scrolls the side panels back to the top.
  • URL sync — the current page is mirrored into the ?view_page=N query parameter (omitted on page 1), so a reload or a shared link lands on the same page. The parameter is dropped when the task changes.
  • Region → page jump — selecting a region (e.g. from the Regions panel) switches to the page that holds the region's object tag. The tag derives the page from the object's name: it reads the token after the first underscore as a zero-based index (text_7 → item 8 → its page). Name paged object tags <prefix>_<index> — the Repeater {{idx}} convention — or the jump misfires.
  • Produces no annotation results; the child tags do.

Examples​

Repeater with pagination (the usual way to get a PagedView)​

<View>
  <Repeater on="$utterances" indexFlag="{{idx}}" mode="pagination">
    <Text name="user_{{idx}}" value="$utterances[{{idx}}].text"/>
    <Header value="Utterance review"/>
    <Choices name="action_{{idx}}" toName="user_{{idx}}" showInline="true">
      <Choice value="No action"/>
      <Choice value="Training"/>
      <Choice value="New intent"/>
    </Choices>
  </Repeater>
</View>
{ "utterances": [ { "text": "Ina kwana" }, { "text": "Lafiya lau" } ] }

Expands to a <PagedView> with one <View> per utterance — one utterance per page, pager underneath.

Hand-written pages​

<View>
  <PagedView>
    <View>
      <Image name="img_0" value="$images[0]"/>
      <RectangleLabels name="box_0" toName="img_0"><Label value="Sign"/></RectangleLabels>
    </View>
    <View>
      <Image name="img_1" value="$images[1]"/>
      <RectangleLabels name="box_1" toName="img_1"><Label value="Sign"/></RectangleLabels>
    </View>
  </PagedView>
</View>

Gotchas​

  • Only the current page's tags are mounted — an off-page tag is not on screen, so its hotkeys and UI are unavailable until you page to it.
  • Tag names must still be unique across all pages — the pages are one annotation.
  • The page hotkeys are registered as "Next Page" / "Previous Page" (repeater:next-page / repeater:previous-page) and can be rebound in keyboard settings if Alt+Arrow clashes with a browser shortcut on your platform.
  • <View> — the non-paged container.
  • <Collapse> / <Panel> — fold blocks instead of paging them.
  • <List> — when the repeated items are data to rank or pick, not separate labeling surfaces.