Skip to main content

Page tokens

App routes that can be accessed from other apps should be registered via page tokens and considered as a public API of the app. They should stay consistent across app versions and be independent of the internal app routing schema to avoid breaking existing links in other apps.

This is where page tokens come into place. They allow you to provide static, consistent, and externally accessible links to specific routes within your app.

By using page tokens, you can keep your app interfaces consistent independently of your internal route changes. This can be particularly useful when linking to static content, for example a guide, an article or some documentation.

Page tokens allow you to define static path segments for routes in your Dynatrace App. You can ensure that external links to specific routes won't break if your internal route structure changes by providing page tokens. This guide will teach you how to specify page tokens for your app routes.

Register page token for a route​

Within your app configuration file, you can specify page tokens for your routes. The app property includes an optional property called pageTokens. In the following example you can see an example of how such a configuration might look:

{
  "environmentUrl": "<Your-Environment-URL>",
  "app": {
    "id": "<Your-App-ID>",
    "name": "<Your-App-Name>",
    "version": "0.0.0",
    "description": "<Your-App-Description>",
    "scopes": [],
    "pageTokens": {
      "documentation": "/about",
      "appchangelog": "/changelog"
    }
  }
}

This allows you to use the documentation page token to link to the /about route from outside of your app. If you need to change the route name in the future, you only need to change the documentation pageToken parameter. The static link that uses the documentation page token will still be consistent.

Link to page token​

There are two primary options for creating a link to a page token. You can either use the AppLink component or one of two functions from the @dynatrace-sdk/navigation package.

The @dynatrace/strato-components-preview package provides the AppLink component to create page token links. You only have to provide the appId and the corresponding pageToken as properties to have a link rendered in your UI:

src/app/Component.tsx
import React from 'react';
import { AppLink } from '@dynatrace/strato-components-preview';

export const Component = () => {
  return (
    <AppLink appId="app.id" pageToken="documentation">
      Documentation
    </AppLink>
  );
};

@dynatrace-sdk/navigation functions​

Another option is to use the @dynatrace-sdk/navigation package directly. It provides two convenient functions that make use of page token links:

  • openApp()
  • getAppLink()

Both of these functions accept an app id (required) and a page token (optional) as parameters.

The openApp() function opens a specific page token. You can, for example, use this as an onClickHandler function:

<Button onClick={() => openApp('app.id', 'documentation')}>Open Documentation</Button>

The getAppLink() function returns a static link, which you can copy, share, bookmark or open in a new tab:

getAppLink('app.id', 'documentation');

For the provided example, the function would return the following link:

https://abc12345.apps.dynatrace.com/ui/openApp/app.id?pageToken=documentation
Still have questions?
Find answers in the Dynatrace Community