Modifying the Edit Template

Finally, we modify the web portal to let us enter some goals. A custom code hook lets us add new tabs to the character edit screen 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/char-edit-custom-tabs.hbs and add:

    <li><a data-bs-toggle="tab" class="nav-link" href="#goals">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/char-edit-custom.hbs and add:

        <div id="goals" class="tab-pane fade in">
          {{markdown-editor text=this.char.custom.goals}}

The markdown-editor control lets players easily edit and preview markdown text.

Send the Data

The controls above let us enter the data. To actually send the data to the game, there’s one more place we need to wire up: the edit controller. That lives here: ares-webportal/app/components/char-edit-custom.js

The controller has as an onUpdate method that gets activated when the player clicks the ‘save’ button. In there it sets up a hash with all the profile data the player entered. We’ll add our goals to it.

return { goals: this.get('char.custom.goals') }

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