Horizon Framework
↵ to openesc to close

Navigation

To enable support of a wide variety of routers/routing styles, all navigation responsibility is deferred up to the host application. To enable this, the horizon framework will automatically add a click handler to all a, or brz-link elements used within horizon templates which will dispatch a routing:navigate:v1 event. The host needs to listen for this event and then trigger a page change via its chosen routing mechanism. It is also possible to trigger navigation by manually dispatching a routing:navigate:v1 event from a horizon component.

In most instances a host application will implement all horizon platform pages under a given route, with a segment specifying the page slug. For example, the skedulo application routes all platform pages under /platform/page/:slug. A configurable callback is provided buildPlatformUrl, which can be used to build these url's easily and consistently. This is available for use in horizon pages, and horizon components.

import { buildPlatformUrl } from '@skedulo/horizon-core'

buildPlatformUrl('my-page-slug')

From a template the callback is exposed under the _.host global as _.host.buildPlatformUrl.

  <a href="{{ _.host.buildPlatformUrl("my-page-slug") }}>I am a link!</a>

The callback can be overridden at the host by overriding the window.SkeduloPlatform.callbacks.buildPlatformUrl function after the framework has been loaded.

Not Found

We support a handleNotFound callback, which the host needs to provide on the window.SkeduloPlatform.callback object. This callback normally takes the user to a /404 page.

import { handleNotFound } from '@skedulo/horizon-core'

handleNotFound()

To navigate programmatically, emit a navigation event using the topic routing:navigate:v1:

import { eventBus } from '@skedulo/horizon-core'

eventBus.emit({ topic: 'routing:navigate:v1', payload: { url } })

Internal navigation to links within the same domain will be handled by the host router and will not trigger a page reload.