How to Consolidate Save Buttons in the My Account Profile Tab

Since a June 2024 update, the Piano ID profile in My Account template divides the Profile tab into independent blocks, each with its own Save and Cancel button. This results in up to three or more separate Save buttons in the personal information section (for example, General, Email, Password, and Profile Information; Phone number and Aliases blocks appear when they are enabled for your application).

If you want to retain a single unified Save changes button for the entire Profile tab, you can manually restructure the Piano ID profile in My Account template as described in detail below.

Steps

1. Open the template

Navigate to Manage → Templates → Piano ID → Piano ID profile in My Account.

2. Remove the per-block action sections

In profile.html, locate every tp-data-block element. Each currently contains a <div class="tp-data-block-actions"> section similar to the following:

HTML

<div class="tp-data-block-actions">
  <button actionUpdateProfileName class="btn btn-small btn-primary">
    <t>Save</t>
  </button>
  <button actionRestoreProfileName class="btn btn-small">
    <t>Cancel</t>
  </button>
</div>

The other blocks follow the same pattern, with the block name in the action attributes:

Block	Save action	Cancel action
General	`actionUpdateProfileName`	`actionRestoreProfileName`
Aliases	`actionUpdateProfileAliases`	`actionRestoreProfileAliases`
Email	`actionUpdateProfileEmail`	`actionRestoreProfileEmail`
Phone number	`actionUpdateProfilePhone`	`actionRestoreProfilePhone`
Password	`actionUpdateProfilePassword`	`actionRestoreProfilePassword`
Profile information	`actionUpdateProfileCustomFields`	`actionRestoreProfileCustomFields`

Remove the entire <div class="tp-data-block-actions">...</div> block from each of these blocks, and from any custom blocks you have added.

3. Add a single Save button

After removing all per-block action sections, add the unified Save button before the closing </div> of the content-padding-tb wrapper:

HTML

<div>
  <div class="actions">
    <button actionUpdateProfile class="btn btn-small btn-primary">
      <t>Save</t>
    </button>
  </div>
</div>

This button uses the actionUpdateProfile action, which submits all profile fields simultaneously.

4. Replace per-block error and success notifications

Remove only the per-block error lists and the per-block "has been changed" success messages, and replace them with the global equivalents.

Remove these per-block error lists:

HTML

<profile-name-errors-list></profile-name-errors-list>
<profile-aliases-errors-list></profile-aliases-errors-list>
<profile-email-errors-list></profile-email-errors-list>
<profile-phone-errors-list></profile-phone-errors-list>
<profile-password-errors-list></profile-password-errors-list>
<profile-custom-fields-errors-list></profile-custom-fields-errors-list>

Remove these per-block "has been changed" messages, together with their wrapper div: flashProfileNameUpdated, flashProfileAliasesUpdated, flashProfileEmailUpdated, flashProfilePhoneUpdated, flashProfilePasswordUpdated, and flashProfileCustomFieldsUpdated. Each looks like this:

HTML

<div flashProfileNameUpdated>
  <div class="complete-msg" data-e2e="name-updated-msg">
    <i class="complete-msg-icon"></i>
    <t>General has been changed.</t>
  </div>
</div>

Add the global equivalents in their place, in a logical location near the new Save button:

HTML

<errors-list></errors-list>
<div class="complete-msg" flashProfileUpdated>
  <t>Profile updated</t>
</div>

Keep the other elements in place. They are still used when the profile is saved with a single Save button, and without them users get no confirmation after changing their email address or phone number.

5. Adjust styles if needed

Switching from a multi-button to a single-button layout may affect the visual appearance of the profile form. After saving the template, review the page and update your CSS if necessary. Common areas to check:

Block spacing: the tp-data-block elements may have bottom padding or margin originally intended to visually separate each block's action buttons. These may leave excessive whitespace once the per-block buttons are removed.
Button placement: the unified Save button uses the actions class wrapper, whereas the removed buttons used tp-data-block-actions. Ensure actions aligns correctly with your site's existing styles for form actions (alignment, margin, width).
Error and success messages: the global <errors-list> and flashProfileUpdated elements may render differently from the per-block equivalents. Note that the global success message in the snippet above has no complete-msg-icon element, unlike the per-block messages it replaces. Add one if you want the icon to match.

Any custom CSS targeting the old block-specific action elements (for example, .tp-data-block-actions) will no longer apply and can be cleaned up.

With a single Save button, the whole profile, custom fields included, is saved in one request. For applications with Extend expired access enabled, once the user's login is older than the token lifetime, this Save asks the user to log in first.

Verify the changes

Save the updated template.
Allow a few minutes for the changes to propagate.
Clear your browser cache and cookies.
Open the My Account profile page and confirm that a single Save button appears after the Profile information block.
Change a value in each block and confirm that one Save submits them all.

Last updated: September 08, 2026