Page titles

• How-to guide
• 3-min read

Page titles appear in the browser tab and help users identify the active view when multiple tabs are open. Setting descriptive page titles improves usability and accessibility across your app and embedded widgets.

Note

Only call usePageTitle for views with a persistent URL. Updating the title for transient views—overlays, modals, or intermediate states that don't persist in browser history—causes confusion when users navigate back in history.

Note

Add-on modals are an exception; for more information, see Set modal titles for add-ons.

Set page titles for apps

The app shell composes the final browser tab title in the following format:

<page title> - <app name> - <tenant ID> - Dynatrace

To set the page title from any page in your app, add the usePageTitle hook to your project:

ui/hooks/usePageTitle.ts

import { useEffect } from 'react';

export function usePageTitle(title: string | undefined): void {
  useEffect(() => {
    if (title !== undefined) {
      document.title = title;
    }
  }, [title]);
}

Then call the hook in your page components:

ui/app/pages/Overview.tsx

import React from 'react';
import { usePageTitle } from '../hooks/usePageTitle';

export const Overview = () => {
  usePageTitle('Overview');

  return <div>...</div>;
};

The usePageTitle hook doesn't reset document.title on unmount. If a page doesn't call usePageTitle, the previous title remains in the browser tab.

Set page titles for widgets

Widgets use the same usePageTitle hook as apps. Call it in the widget's root component to set a descriptive title for the browser tab when the widget is displayed.

ui/widgets/MyWidget.tsx

import React from 'react';
import { usePageTitle } from '../hooks/usePageTitle';

export const MyWidget = () => {
  usePageTitle('My widget');

  return <div>...</div>;
};

Set modal titles for add-ons

Add-on titles appear in the modal header where the add-on is displayed. They don't affect the browser tab title. You can set an add-on title in two ways:

• Declaration: Set addonConfig.title in the intent declaration within your app configuration.

  app.config.json

  {
    "app": {
      "intents": {
        "my-intent": {
          "addonMode": "overlay",
          "addonConfig": {
            "title": "My overlay",
            "size": { "width": "large", "height": 500 }
          }
        }
      }
    }
  }

• Runtime: Call usePageTitle inside the app that renders as an add-on. The SDK runtime detects the document.title change and updates the modal title accordingly.

  ui/addons/MyAddon.tsx

  import React from 'react';
  import { usePageTitle } from '../hooks/usePageTitle';
  
  export const MyAddon = () => {
    usePageTitle('My addon title');
  
    return <div>...</div>;
  };