How To

How do I change the title shown on the browser tab in AM 5.x and OpenAM 13.x?

Last updated Dec 17, 2018

The purpose of this article is to provide assistance on changing the title shown on the browser tab in AM/OpenAM. This article includes instructions on changing this at the global level and realm level.


Changing the browser tab title (global level)

You can modify this title at the global level by editing the title field in the index.html file (located in the /path/to/tomcat/webapps/openam/XUI directory). For example, you could change this to Admin Console as follows:

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Admin Console</title>
    </head>

This change affects all realms and takes effect immediately. The resulting tab title would look like this:

Changing the browser tab title (realm level)

You can either modify this title at the realm level so it is dynamic and uses the realm name or you can set it for individual realms.

Dynamic

You can make the realm title dynamic by using the {{realm}} variable as shown below:

  1. Edit the LoginHeaderTemplate.html file (located in the /path/to/tomcat/webapps/openam/XUI/templates/common directory). You need to add the following code snippet to the end of this file, where document.title is set to the desired tab title and includes the {{realm}} variable, for example:
    <script language="javascript" type="text/javascript">
       document.title = "Realm: {{realm}}";
    </script>
    
  2. Clear your browser cache.

The resulting tab title would look like this for the /employees realm:

Individual realms

You can set the tab title for a specific realm as follows, where this example is customizing the title for the /employees realm:

  1. Create a directory in the /path/to/tomcat/webapps/openam/XUI directory that is named the same as your realm. In this example, your resulting path would look like this:
    /path/to/tomcat/webapps/openam/XUI/employees
  2. Copy the templates and partials directories (located in the /path/to/tomcat/webapps/openam/XUI directory) to the new realm directory you created in step 1.
  3. Edit the LoginHeaderTemplate.html file in your new realm directory (located in the /path/to/tomcat/webapps/openam/XUI/employees/templates/common directory in this example). You need to add the following code snippet to the end of this file, where document.title is set to the desired tab title (Employees in this example):
    <script language="javascript" type="text/javascript">
       document.title = "Employees";
    </script>
    
  4. Add the realm to the ThemeConfiguration.[hash].js file in AM 6 and later (where [hash] is an alphanumeric value generated each time the XUI is rebuilt) or the ThemeConfiguration.js file in AM 5.x and OpenAM 13.x. These files are located in the /path/to/tomcat/webapps/openam/XUI/config/ directory. You must create a theme that corresponds to the realm customization and also add a realm mapping per UI Customization Guide › Customizing the User Interface › Theming the XUI:
    • Add a new theme after the default theme (this example is a copy of the fr-dark-theme with the addition of the path parameter to identify the directory you created in step 1 and the icon parameter to prevent a missing image in the tab title:
              "employees-theme": {
                  // An ordered list of URLs to stylesheets that will be applied to every page.
                  stylesheets: ["themes/dark/css/bootstrap.min.css", "css/structure.css", "themes/dark/css/theme-dark.css"],
                  path: "employees/",
                  icon: "../favicon.ico",
                  settings: {
                      loginLogo: {
                          src: "themes/dark/images/login-logo-white.png",
                          title: "ForgeRock",
                          alt: "ForgeRock",
                          height: "228px",
                          width: "220px"
                      }
                  }
              },
      
    • Add a realm mapping at the end within the mappings [ ] section that maps the new theme you created to your realm:
      { theme: "employees-theme", realms: ["/employees"] }
      
  5. Clear your browser cache.

The resulting tab title would look like this (note this example also has the dark theme applied): 

See Also

How do I add a new custom XUI page in AM (All versions) and OpenAM 13.x?

How do I modify the text on the XUI Login page for one or more realms in AM/OpenAM (All versions)?

FAQ: Customizing, branding and localizing XUI end user pages in AM/OpenAM

UI Customization Guide › Customizing the User Interface

Related Training

ForgeRock Access Management Core Concepts (AM-400)

ForgeRock Access Management Customization and APIs (AM-421)

Related Issue Tracker IDs

OPENAM-11141 (HTML page title is not localised)



Copyright and TrademarksCopyright © 2018 ForgeRock, all rights reserved.
Loading...