Modifying the Profile Template

Now that we have our data being sent from the game to the website, we can actually show it on the web profile. A custom code hook lets us add new tabs to the “System” section of the character profile without touching the core code.

Define the Tab Navigation

First we’re going to define the tab navigation control. Edit ares-webportal/app/templates/components/profile-custom-tabs.hbs and add:

    <li class="nav-item"><a data-bs-toggle="tab" class="nav-link" href="#systemgoals">Goals</a></li> 

Define the Tab Contents

Next we’ll define the contents of the tab. This lives in a different file, so edit ares-webportal/app/templates/components/profile-custom.hbs and add:

    <div id="systemgoals" class="tab-pane fade">
        {{{ansi-format text=this.char.custom.goals}}}
     </div>

Here we’re using the ansi-format helper because the goals can contain fancy formatting. For a raw text field we could have just used char.goals by itself.

If you ever want more tabs, add them the same way as the first. Just make sure they all have unique IDs.

Test the Display

You should have enough in place now to test the display component. But first we need to tell the game to reload your new code.

load profile - Loads the web request updates on the game side. website/deploy - Updates the templates on the web side.

This article is part of the Modifying the Web Portal tutorial.