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

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 relevent 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

Overriding the header

The content of the header 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 and entering the components you want to include between them.

Title

The title of the Edit Record page is generated from the title block of the base template. Its value is generated from the RecordDefiner component, which is defined in the resource. The resource is a configuration which describes how to define the record. You can set this to whatever you want via the API, but by default it will be:

{% if name %}{{ name }}{% elif Name %}{{ Name }}{% else %}{{ ${primaryKey} }}{% endif %}

In this case, we don’t want to change the component between the {% block title %}{% endblock title %} tags, 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 Record page, 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.

{% 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

Header layout

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 header now renders as:

Edit record page layout adjusted

For more information, see the Flex layout section in Storybook.

Changing the color

To change the color of the subtitle, add the --sp-color variable to the row element. A list of the available colors can be found on Storybook.

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)">
              <sp-icon icon="edit"></sp-icon>  
              <span>Edit the machine's details</span>
            </sp-row>
        </sp-column>
    </sp-header>
{% endblock header %}

This renders as:

arcade games edit page color changed


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.

Configuring the layout

We want to ensure consistancy between the Create Record and Edit Record pages, so 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.

This renders as:

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 %}

This renders as:

Edit page tabbed layout added


Last modified May 6, 2022: fixed errors (6c08989)