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 resorts:read.

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

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

Emit and listen for cross-element ullr-trail-select events, so two Ullr embeds on the same page stay in sync when a trail is selected.

Default: false

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. Ignored unless your key holds the matching history scope.

ullrKeystringOptional

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

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 highlights it on the map, and vice versa.