Trail list

<ullr-trail-list> is a status table: every trail with its current status, surface conditions, length and permitted activities. Visitors can sort it by any column you allow.

It is the most-used embed, because it is the one that answers “what is open?” without a map. It also has an auto-scroll mode built for TVs at the base area — see TVs & kiosks.

The Ullr trail list embed — The trail list showing status, name, surface conditions and length.

Install


<script type="module" src="https://widget.ullr.ski/web-components/ullr-trail-list.js"></script>
 
<ullr-trail-list
  apiKey="1a2b3c4d5e6f.yourPublishableKey"
  areaId="your-area-id"
  sport="SNOW"
  visibleColumns="status,name,surface,length"
  units="imperial"
></ullr-trail-list>

The list sizes itself to its content, so unlike the map-based embeds it does not need an explicit height.

Required scopes

trails:read, and nothing else — the list reads the trails endpoint and never asks for the area itself.

Columns

Key	Shows
`status`	Open / closed / grooming indicator
`name`	Trail name
`surface`	Surface conditions
`length`	Trail length, in the chosen units
`allowedActivities`	Which activities the trail permits

visibleColumns controls both which columns appear and their order: visibleColumns="name,status" puts the name first. The dashboard turns on status,name,surface,length and leaves allowedActivities off.

Attributes

Common attributes

Shared by all four embeds.

apiKeystringRequired

Your publishable API key, in the form {id}.{secret}. Sent as the api-key header on every request the element makes. Without it the element logs an error and renders nothing.

areaIdstringRequired

The area (resort) to display. Without it the element logs an error and renders nothing.

sportSNOW | BIKEOptional

Which sport’s data to show. Also selects the default colour palette — blue for snow, green for bike.

Default: SNOW

themestringOptional

Primary colour as a hex value, e.g. #6B8CF9. Three- or six-digit hex only; anything else is ignored and the sport default is used. The secondary colour is derived automatically.

Default: #6B8CF9 (snow) / #50A162 (bike)

timestampnumberOptional

Show the hill as it was at this moment, in milliseconds since the Unix epoch, instead of live. Setting it switches this element onto the history endpoints, so the key needs trails:readHistory. The live scope is not enough on its own: without the history scope the request is refused and the embed renders empty, with no error shown to your visitors.

ullrKeystringOptional

Legacy alias for apiKey, kept so older snippets keep working. Only read when apiKey is absent. Use apiKey in new code.

Trail list options

visibleColumnsstringOptional

Comma-separated list of columns to show, in the order given. Valid values: status, name, surface, length, allowedActivities.

Default: all columns, in the order above

sortableColumnsstringOptional

Comma-separated subset of the same column keys that a visitor may click to re-sort. Use it to lock the ordering on an unattended display.

Default: every visible column

sortColumnsstringOptional

Initial sort, as comma-separated column:direction pairs, e.g. status:asc,name:asc. Anything other than desc is treated as ascending.

Default: status:asc,name:asc

unitsimperial | metricOptional

Trail length in miles or kilometres.

Default: imperial

autoScrollbooleanOptional

Loop-scroll the trail list continuously. Built for TVs and kiosks where nobody is there to scroll.

Default: false

autoScrollSpeednumberOptional

Scroll speed in pixels per second. Values of zero or less fall back to the default. Only used when autoScroll is on.

Default: 30

autoScrollPageDurationnumberOptional

How long to pause on each screenful, in milliseconds, before scrolling on. Values of zero or less fall back to the default. Only used when autoScroll is on.

Default: 10000

scalenumberOptional

Visual zoom multiplier for the whole list. Use 2 or 3 on a large display so the text is readable from across the room.

Default: 1

enableEventsTrailSelectionbooleanOptional

Take part in cross-element selection — emit and listen for ullr-trail-selected, so embeds on the same page stay in sync when a trail is selected. Switches on both directions at once.

Default: false

Events

Set enableEventsTrailSelection="true" and the list joins the page-wide selection channel — it announces what a visitor tapped, and highlights whatever another embed selects. The one attribute switches on both directions. See syncing embeds with events for the protocol and worked examples.

Emitted

ullr-trail-selecteddetail: { trailId: string, senderId: string }

A visitor tapped a row. Requires enableEventsTrailSelection.

Listened for

ullr-trail-selecteddetail: { trailId: string, senderId: string }

Highlights that trail’s row and scrolls it to the middle of the list, unless it is already in view. Skipped while an autoScroll animation is running, so a kiosk loop is never interrupted.

Notes

Lock the sort on unattended displays. A visitor — or a stray touch on a kiosk — can re-sort the table and leave it that way. Set sortableColumns="" to make it read-only, or list only the columns you are happy to have clicked.
sortColumns accepts several pairs, applied in order: status:asc,name:asc groups by status and alphabetises within each group.
There is also a hosted full-screen version of this embed for TVs that takes the same options as URL query parameters — see TVs & kiosks.

Pair this with the interactive map and set enableEventsTrailSelection="true" on both: selecting a trail in the list flies the map to it, and tapping it on the map scrolls the list to that row. Full example.