Overriding the default Edit Record template

This article covers how to override the default settings of the arcade-games-edit template.

In this article we will cover some of the ways in which you can override the arcade-games-edit template that was auto-generated when we created the Arcade Games object. All of the components you can use to customize your pages can be found on Storybook.

The default template
- Locating the default template
Overriding the header
Overriding the body
- Configuring the layout
- Adding tabs
Completed code

The default template

The default arcade-games-edit template that was generated for the Arcade Games object contains the following:

{% extends "base-recordedit" %}

{% set resource_name="Arcade Games" %}
{% set validation_schema="ArcadeGamesEdit" %}

As covered in the system-generated pages article, this means that the arcade-games-edit template extends the base-recordedit template, and tells us the name of the resource and the validation schema.

On the base template, the content is split into header, body, and footer blocks. To change the content within any of these blocks, you need to add the relevant tags to your template and then add components you want to change between them.

Before overriding any of the default template’s content, the following page is rendered in Platform:

Edit Record page before customization

This article will take you through the process of configuring the default arcade-games-edit template so that it renders in a more user-friendly way and matches the layout of the Arcade Games Create page, for example:

Edit record page after customization

Locating the default template

To locate the default template:

Click Settings > Developer tools > Platform Settings to display the Platform Pages page.
Find the arcade-games-edit template in the list using the filter and sort options if necessary.
Click the template’s name to open its edit page.

Overriding the header

The content of the header in the Edit record page is defined by the header block in the base-recordedit template.

{% block header %}
  <sp-header style="margin-bottom: 0">
    <sp-column>
      <sp-heading size="2xl" level="1">
            {% block title %}
                <platform-component package-name="recordpage" name="RecordDefiner"></platform-component>
            {% endblock title %}
      </sp-heading>
      <sp-row style="--sp-row-spacing: var(--sp-spacing-3); color: var(--sp-color-neutral-750)">
        <sp-icon icon="details"></sp-icon>
        <span>{{ resource_name }}</span>
      </sp-row>
    </sp-column>
  </sp-header>
{% endblock header %}

This header block renders as follows (where Arcade Games is the resource_name):

Edit Record page header unmodified

You can override any of the details in this block by adding the {% block header %}{% endblock header %} tags to your template beneath the validation_schema element. Enter the components you want to include in your header between these header tags.

Important

You will need to enter all the elements of the header block you want to include even if you only want to override one part. For example, looking at the above code block, even if you only want to change the title, you will still need to add the elements that render the subtitle, icon, and style or they won’t be included on the page.

Title

The title of the Edit record page is generated from the RecordDefiner component (<platform-component package-name="recordpage" name="RecordDefiner"></platform-component>). If there is a name or Name field associated with your object, then the RecordDefiner component pulls the title from there. If there are neither of these fields on your object, the RecordDefiner will pull in the UID.

We don’t want to change the title because the Arcade Games object has a Name field for the RecordDefiner component to reference, but as we are making other changes to the header, we’ll still need to add the compenent to the arcade-games-edit template.

{% block header %}
  <sp-header style="margin-bottom: 0">
    <sp-heading size="2xl" level="1">
      {% block title %}
        <platform-component package-name="recordpage" name="RecordDefiner"></platform-component>
      {% endblock title %}
    </sp-heading>
  </sp-header>
{% endblock header %}

Subtitle

As with the Create and View record pages, we want to add a subtitle and an icon. To do this, add the span and sp-icon elements beneath the sp-heading element in your arcade-games-edit template. For example:

{% block header %}
  <sp-header style="margin-bottom: 0">
    <sp-heading size="2xl" level="1">
      {% block title %}
        <platform-component package-name="recordpage" name="RecordDefiner"></platform-component>
      {% endblock title %}
    </sp-heading>
      <sp-icon icon="edit"></sp-icon>  
      <span>Edit the machine's details</span>
  </sp-header>
{% endblock header %}

The header now renders as follows:

Edit record page header subtitle

Add the sp-column and sp-row elements to your header in order to adjust the layout of the header content.

{% block header %}
  <sp-header style="margin-bottom: 0">
    <sp-column>
      <sp-heading size="2xl" level="1">
          {% block title %}
              <platform-component package-name="recordpage" name="RecordDefiner"></platform-component>
          {% endblock title %}
      </sp-heading>
          <sp-row style="--sp-row-spacing: var(--sp-spacing-3)">
            <sp-icon icon="edit"></sp-icon>  
            <span>Edit the machine's details</span>
          </sp-row>
      </sp-column>
  </sp-header>
{% endblock header %}

In the example above:

the sp-row element ensures the icon and subtitle are laid out in a row with equal spacing between the sp-icon and span elements. The spacing is defined by overriding the --sp-row-spacing CSS variable.
the sp-column element ensures the title and subtitle rows are laid out in a column with spacing between them.

The Edit record page header now renders as:

Edit record page layout adjusted

For more information about spacing and alignment, refer to the Flex layout section in our Design System documentation.

Changing the color

To change the color of the subtitle and icon, add the --sp-color variable to the sp-row element. For example, to change the color of the subtitle to gray, add color: var(--sp-color-neutral-600) to the sp-row element.

The header block in the arcade-games-edit template now looks as follows:

{% block header %}
  <sp-header style="margin-bottom: 0">
    <sp-column>
      <sp-heading size="2xl" level="1">
          {% block title %}
              <platform-component package-name="recordpage" name="RecordDefiner"></platform-component>
          {% endblock title %}
      </sp-heading>
          <sp-row style="--sp-row-spacing: var(--sp-spacing-3); color: var(--sp-color-neutral-600);">
            <sp-icon icon="edit"></sp-icon>  
            <span>Edit the machine's details</span>
          </sp-row>
      </sp-column>
  </sp-header>
{% endblock header %}

The Edit record page header now renders as:

arcade games edit page color changed

A list of the available colors can be found in our Design System documentation.

Overriding the body

The main body of the Edit record page is defined by the body block in the base-recordedit template.

{% block body %}
  <sp-tabs>
    <sp-tab slot="tabs" name="details">Details</sp-tab>
    <sp-tab slot="tabs" name="system-info">System Info</sp-tab>

    <sp-tab-panel name="details">
      <sp-responsive-columns>
        <div>
          <platform-component package-name="recordpage" name="ValidationBanner"></platform-component>
          <platform-component package-name="recordpage" name="AutoForm"></platform-component>
        </div>
      </sp-responsive-columns>
    </sp-tab-panel>
    
    <sp-tab-panel name="system-info">
      <sp-responsive-columns>
        <div>
          <platform-component package-name="recordpage" name="RecordFields" only-system-fields></platform-component>
        </div>
      </sp-responsive-columns>
    </sp-tab-panel>
  </sp-tabs>
{% endblock body %}

To override the appearance of the content in the body of the Edit Record page, add the {% block body %} and {% endblock body %} tags to your arcade-games-edit template and then add the components between them.

Important

You will need to add all the elements of the body block you want to include even if you only want to override one element. For example, you must add all fields to the template even if you only want to edit one.

Configuring the layout

To ensure consistancy between the Create record and Edit record pages, the first thing we will do is recreate the changes we made to the arcade-games-create template: reorder the fields, add the headings, and divide the page into two columns.

In order to do this, add the following to the arcade-games-edit template:

{% block body %}
  <sp-responsive-columns>
      <div>
      {# Left Column #}
          <sp-heading size="base" style="margin-bottom: var(--sp-spacing-4)">Machine details</sp-heading>
            <platform-component package-name="recordpage" name="AutoFormField" ptr="/name" label-position="top" ></platform-component>
            <platform-component package-name="recordpage" name="AutoFormField" ptr="/Id" label-position="top" placeholder="Enter a product ID"></platform-component>
            <platform-component package-name="recordpage" name="AutoFormField" ptr="/style" label-position="top" placeholder="Select a style"></platform-component>
            <platform-component package-name="recordpage" name="AutoFormField" ptr="/category" label-position="top" placeholder="Select a category"></platform-component>
            <platform-component package-name="recordpage" name="AutoFormField" ptr="/make" label-position="top" placeholder="Enter a make"></platform-component>
            <platform-component package-name="recordpage" name="AutoFormField" ptr="/theme" label-position="top" placeholder="Enter a theme"></platform-component>
            <platform-component package-name="recordpage" name="AutoFormField" ptr="/costperday" label-position="top" placeholder="Enter a cost per day"></platform-component>
            <platform-component package-name="recordpage" name="AutoFormField" ptr="/linkurl" label-position="top" placeholder="Enter a cost per day"></platform-component>
      </div>
      <div>
      {# Right Column #}
          <sp-heading size="base" style="margin-bottom: var(--sp-spacing-4)">Machine image</sp-heading>
            <platform-component package-name="recordpage" name="RecordTemplate" template="{{ '<img src="{{imageurl}}" alt="{{Name}}" width="200" height="200">' }}"></platform-component>
            <platform-component package-name="recordpage" name="AutoFormField" ptr="/imageurl" label-position="top" placeholder="Enter an image url"></platform-component>  
          
          <sp-heading size="base" style="margin-bottom: var(--sp-spacing-4)">Maintenance record</sp-heading>         
            <platform-component package-name="recordpage" name="AutoFormField" ptr="/maintenancedue" label-position="top" placeholder="Date annual maintenance is due"></platform-component>
            <platform-component package-name="recordpage" name="AutoFormField" ptr="/repairhistory" label-position="top" placeholder="Enter pertinant repair history and engineer notes"></platform-component>
            <platform-component package-name="recordpage" name="AutoFormField" ptr="/lastseenby" label-position="top" placeholder="Who was the last engineer to see the machine?"></platform-component>
            <platform-component package-name="recordpage" name="AutoFormField" ptr="/status" label-position="top" placeholder="Maintenance status"></platform-component>
      </div>
  </sp-responsive-columns>
{% endblock body %}

In the example above:

the <sp-responsive-columns> element enables you to divide the page into two or more columns.
the <sp-heading> element enables you to add headings and divide the content of each column.

Important

You must ensure that the ptr= value matches the case you used for the Field name value on the Create Custom Field modal or the field will not render on your page.

The Edit record page now renders as follows:

Edit page body block layout configured

Adding tabs

The default Edit record page is divided into two tabs in order to separate the editable content and the un-editable system information. When we overrode the body block in order to configure the layout of the fields, the tabbed layout of the default template was lost. To recreate the tabbed layout, add:

the sp-tabs element to add tabs to the page.
the sp-tab element to identify the tabs.
the sp-tab-panel element to group the content of a tab.

The system information is rendered from the recordpage component, <platform-component package-name="recordpage" name="RecordFields" only-system-fields></platform-component> which we will add to the second tab.

In the template, this will look as follows:

{% block body %}
  <sp-tabs>
      <sp-tab slot="tabs" name="details">Machine Details</sp-tab>
      <sp-tab slot="tabs" name="system-info">System Information</sp-tab>
    
  <sp-tab-panel name="details" shown> 
      <sp-responsive-columns style="border-top: var(--sp-border-divider)">
        <div>
        {# Left Column #}
          <sp-heading size="base" style="margin-bottom: var(--sp-spacing-4)">Machine details</sp-heading>
              <platform-component package-name="recordpage" name="AutoFormField" ptr="/name" label-position="top" ></platform-component>
              <platform-component package-name="recordpage" name="AutoFormField" ptr="/Id" label-position="top" placeholder="Enter a product ID"></platform-component>
              <platform-component package-name="recordpage" name="AutoFormField" ptr="/style" label-position="top" placeholder="Select a style"></platform-component>
              <platform-component package-name="recordpage" name="AutoFormField" ptr="/category" label-position="top" placeholder="Select a category"></platform-component>
              <platform-component package-name="recordpage" name="AutoFormField" ptr="/make" label-position="top" placeholder="Enter a make"></platform-component>
              <platform-component package-name="recordpage" name="AutoFormField" ptr="/theme" label-position="top" placeholder="Enter a theme"></platform-component>
              <platform-component package-name="recordpage" name="AutoFormField" ptr="/costperday" label-position="top" placeholder="Enter a cost per day"></platform-component>
              <platform-component package-name="recordpage" name="AutoFormField" ptr="/linkurl" label-position="top" placeholder="Enter a cost per day"></platform-component>
        </div>
        <div>
        {# Right Column #}
          <sp-heading size="base" style="margin-bottom: var(--sp-spacing-4)">Machine image</sp-heading>
              <platform-component package-name="recordpage" name="RecordTemplate" template="{{ '<img src="{{imageurl}}" alt="{{Name}}" width="200" height="200">' }}"></platform-component>
              <platform-component package-name="recordpage" name="AutoFormField" ptr="/imageurl" label-position="top" placeholder="Enter an image url"></platform-component>  
          
          <sp-heading size="base" style="margin-bottom: var(--sp-spacing-4)">Maintenance record</sp-heading>         
              <platform-component package-name="recordpage" name="AutoFormField" ptr="/maintenancedue" label-position="top" placeholder="Date annual maintenance is due"></platform-component>
              <platform-component package-name="recordpage" name="AutoFormField" ptr="/repairhistory" label-position="top" placeholder="Enter pertinant repair history and engineer notes"></platform-component>
              <platform-component package-name="recordpage" name="AutoFormField" ptr="/lastseenby" label-position="top" placeholder="Who was the last engineer to see the machine?"></platform-component>
              <platform-component package-name="recordpage" name="AutoFormField" ptr="/status" label-position="top" placeholder="Maintenance status"></platform-component>
        </div>
      </sp-responsive-columns>
  </sp-tab-panel>
      
  <sp-tab-panel name="system-info">
      <sp-responsive-columns>
        <div style="margin-top: var(--sp-spacing-4);padding: 0 var(--sp-spacing-6);">
            <platform-component package-name="recordpage" name="RecordFields" only-system-fields></platform-component>
        </div>
      </sp-responsive-columns>
  </sp-tab-panel> 
    
  </sp-tabs>
{% endblock body %}

The Edit record page now renders as:

Edit page tabbed layout added

Completed code

If you’ve gone through all the steps in this article, your completed template should look as follows.

{% extends "base-recordedit" %}

{% set resource_name="Arcade Games" %}
{% set validation_schema="ArcadeGamesEdit" %}


{% block header %}
    <sp-header style="margin-bottom: 0">
      <sp-column>
        <sp-heading size="2xl" level="1">
            {% block title %}
                <platform-component package-name="recordpage" name="RecordDefiner"></platform-component>
            {% endblock title %}
        </sp-heading>
            <sp-row style="--sp-row-spacing: var(--sp-spacing-3); color: var(--sp-color-neutral-600);">
              <sp-icon icon="edit"></sp-icon>  
              <span>Edit the machine's details</span>
            </sp-row>
        </sp-column>
    </sp-header>
{% endblock header %}

{% block body %}
    <sp-tabs>
        <sp-tab slot="tabs" name="details">Machine Details</sp-tab>
        <sp-tab slot="tabs" name="system-info">System Information</sp-tab>
    
    <sp-tab-panel name="details" shown> 
        <sp-responsive-columns>
            <div>
            {# Left Column #}
                <sp-heading size="base" style="margin-bottom: var(--sp-spacing-4)">Machine details</sp-heading>
                    <platform-component package-name="recordpage" name="AutoFormField" ptr="/name" label-position="top" ></platform-component>
                    <platform-component package-name="recordpage" name="AutoFormField" ptr="/Id" label-position="top" placeholder="Enter a product ID"></platform-component>
                    <platform-component package-name="recordpage" name="AutoFormField" ptr="/style" label-position="top" placeholder="Select a style"></platform-component>
                    <platform-component package-name="recordpage" name="AutoFormField" ptr="/category" label-position="top" placeholder="Select a category"></platform-component>
                    <platform-component package-name="recordpage" name="AutoFormField" ptr="/make" label-position="top" placeholder="Enter a make"></platform-component>
                    <platform-component package-name="recordpage" name="AutoFormField" ptr="/theme" label-position="top" placeholder="Enter a theme"></platform-component>
                    <platform-component package-name="recordpage" name="AutoFormField" ptr="/costperday" label-position="top" placeholder="Enter a cost per day"></platform-component>
                    <platform-component package-name="recordpage" name="AutoFormField" ptr="/linkurl" label-position="top" placeholder="Enter a cost per day"></platform-component>
            </div>
            <div>
            {# Right Column #}
                <sp-heading size="base" style="margin-bottom: var(--sp-spacing-4)">Machine image</sp-heading>
                    <platform-component package-name="recordpage" name="RecordTemplate" template="{{ '<img src="{{imageurl}}" alt="{{Name}}" width="200" height="200">' }}"></platform-component>
                    <platform-component package-name="recordpage" name="AutoFormField" ptr="/imageurl" label-position="top" placeholder="Enter an image url"></platform-component>  
          
                <sp-heading size="base" style="margin-bottom: var(--sp-spacing-4)">Maintenance record</sp-heading>         
                    <platform-component package-name="recordpage" name="AutoFormField" ptr="/maintenancedue" label-position="top" placeholder="Date annual maintenance is due"></platform-component>
                    <platform-component package-name="recordpage" name="AutoFormField" ptr="/repairhistory" label-position="top" placeholder="Enter pertinent repair history and engineer notes"></platform-component>
                    <platform-component package-name="recordpage" name="AutoFormField" ptr="/lastseenby" label-position="top" placeholder="Who was the last engineer to see the machine?"></platform-component>
                    <platform-component package-name="recordpage" name="AutoFormField" ptr="/status" label-position="top" placeholder="Maintenance status"></platform-component>
            </div>
        </sp-responsive-columns>
    </sp-tab-panel> 
    <sp-tab-panel name="system-info">
        <sp-responsive-columns>
            <div style="margin-top: var(--sp-spacing-4);padding: 0 var(--sp-spacing-6);">
                <platform-component package-name="recordpage" name="RecordFields" only-system-fields></platform-component>
            </div>
        </sp-responsive-columns>
    </sp-tab-panel> 
    </sp-tabs>
{% endblock body %}

Feedback

Was this page helpful?

Glad to hear it! Please tell us how we can improve.

Sorry to hear that. Please tell us how we can improve.

On this page

Overriding the default Edit Record template

The default template

Locating the default template

Overriding the header

Important

Title

Subtitle

Header layout

Changing the color

Overriding the body

Important

Configuring the layout

Important

Adding tabs

Completed code

Feedback