Customizing your API Portal header

Customize the header on your API Portal to display user information and a Log out button.

About this task

You can customize the API Portal's HTML files to add custom elements if needed. The best practice is to copy folders and files from the themes/talend to the root of the repository. This way you can override the default files without editing them.

Warning: If you download an updated version of the theme after overriding theme files, you will have to manually update your custom files.

Procedure

At the root of your API Portal repository, create a layouts folder, and inside it create a partials folder.
Copy the file /themes/talend/layouts/partials/header.html in the /layouts/partials folder your created.
You now have two header.html files in the repository. You should only edit the one in /layouts/partials.
In your new header.html file, before the closing </ul> tag, add a new <li> element that contains a link to the logout page and the user information.
Example
```
  <li style="margin-left: auto; margin-right: 1em">
    <a href="/logout">Log out</a>
    <span id="user"></span>
  </li>
```

After the closing </ul> tag, add a <script> element to fetch user information from the /me route.

Example

<script>
  fetch('/me')
  .then(response => response.json())
  .then(me => document.getElementById('user').innerHTML = me.clientPrincipal.userDetails)
  .catch(e => document.getElementById('user').innerHTML = 'Anonymous');
</script>

Commit your changes.

Did this page help you?

If you find any issues with this page or its content – a typo, a missing step, or a technical error – please let us know!

Leave your feedback here