Overriding the default View Record template

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

In this article we will cover some of the ways in which you can override the arcade-games-view 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-view template that was generated for the Arcade Games object contains the following:

{% extends "base-recordview" %}
{% set resource_name="Arcade Games" %}

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

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:

View Record page before customization

This article will take you through the process of configuring the default arcade-games-view template so that it renders in a more user-friendly way, for example:

View Record page after customization

Overriding the header

The content of the header is defined by the header block in the base-recordview 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):

View 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

As with the Edit Record page, the title of the View Record page is generated from the RecordDefiner component.

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-view 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 and Edit Record pages, we want to add a subtitle and an icon. Add the span and sp-icon elements beneath the sp-heading element in your arcade-games-view 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="details"></sp-icon>
            <span>Machine record</span>
    </sp-header>
{% endblock header %}

The header now renders as follows:

View Record page header subtitle

Header layout

Add sp-row element to your header in order to adjust the layout of the header content. 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.

{% 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-row style="--sp-row-spacing: var(--sp-spacing-3);">
            <sp-icon icon="details"></sp-icon>
            <span>Machine record</span>
        </sp-row>
    </sp-header>
{% endblock header %}

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.

{% 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-row style="--sp-row-spacing: var(--sp-spacing-3); color: var(--sp-color-neutral-600);">
            <sp-icon icon="details"></sp-icon>
            <span>Machine record</span>
        </sp-row>
    </sp-header>
{% endblock header %}

With these changes, the header now renders as:

View Record page subtitle color changed

Adding an edit button

You can add a button to your View Record page and choose the text displayed and what action it performs upon being clicked.

For this example, we’re going to add a primary button type which will open the current record’s Edit page.

<platform-component package-name="recordpage" name="RecordTemplate" template="{{ '<a href="/platform/page/arcade-games-edit?uid={{UID}}"> <sp-button button-type="primary">Edit record</sp-button>' }}"></platform-component>

For examples of all available button components, refer to the documentation in Storybook.

If we add this component below the subtitle, the arcade-games-view header renders as follows:

View Record page with header button

To right-align the button on the header, add the sp-split-row element to your template. For example:

{% block header %}
  <sp-split-row>
    <div slot="left">
      <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-row style="--sp-row-spacing: var(--sp-spacing-3); color: var(--sp-color-neutral-600);">
          <span>Machine record</span>
        </sp-row>
      </sp-header>
    </div>
    <div slot="right" style="text-align: right;">
      <sp-header style="margin-bottom: 0">
        <sp-heading>
          <platform-component package-name="recordpage" name="RecordTemplate" template="{{ '<a href="/platform/page/arcade-games-edit?uid={{UID}}"> <sp-button button-type="primary">Edit record</sp-button>' }}"></platform-component>
        </sp-heading>
      </sp-header>
    </div>
  </sp-split-row>
{% endblock header %}

The header now renders as follows:

View Record page header button aligned

Overriding the body

The main body of the View Record page is defined by the body block in the base-viewrecord 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="RecordFields" include-fields="{{ include_fields }}" exclude-fields="{{ exclude_fields }}" exclude-system-fields></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 View Record page, add the {% block body %} and {% endblock body %} tags to your arcade-games-view template and then add the components between them.

Configuring the layout

To maintain consistancy with the Edit and Create pages, we need to reorder the fields on the View record page.

Add rows to the template using the sp-record-row element, for example:

<sp-record-row>
    <span slot="label">Machine name</span>
    <platform-component package-name="recordpage" name="RecordFieldView" field-name="name"></platform-component> 
</sp-record-row>
  • Enter a label for the row using the slot variable
  • Reference the field name in the recordpage component. This value must match the field name used when you created your custom object and added fields.

Adding tabs

The default View record page is divided into two tabs in order to separate the editable content and the un-editable system information. We don’t want to view the system information in this case, but we still want the tabbed view so we can separate the machine details and the maintenance record, and then add a third tab which will link to a second object.

To create 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.

In the template, this will look as follows:

{% block body %}

  <sp-tabs>
    <sp-tab slot="tabs" name="details">Details</sp-tab> 
    <sp-tab slot="tabs" name="maintenance-record">Maintenance record</sp-tab>
    <sp-tab slot="tabs" name="rental-agreement">Rental agreements</sp-tab>

    <sp-tab-panel name="details" shown>
      <sp-responsive-columns>
      <div>
        <sp-heading size="base" style="margin-bottom: var(--sp-spacing-4)">Description</sp-heading>
          
          <sp-record-row>
            <span slot="label">Item name</span>
            <platform-component package-name="recordpage" name="RecordFieldView" field-name="name"></platform-component>
          </sp-record-row>

          <sp-record-row>
            <span slot="label">ID</span>
            <platform-component package-name="recordpage" name="RecordFieldView" field-name="Id"></platform-component>
          </sp-record-row>

          <sp-record-row>
            <span slot="label">Style</span>
            <platform-component package-name="recordpage" name="RecordFieldView" field-name="style"></platform-component>
          </sp-record-row>

           <sp-record-row>
            <span slot="label">Category</span>
            <platform-component package-name="recordpage" name="RecordFieldView" field-name="category"></platform-component>
          </sp-record-row>
          
          <sp-record-row>
            <span slot="label">Make</span>
            <platform-component package-name="recordpage" name="RecordFieldView" field-name="make"></platform-component>
          </sp-record-row>

          <sp-record-row>
            <span slot="label">Theme</span> 
            <platform-component package-name="recordpage" name="RecordFieldView" field-name="theme"></platform-component>
          </sp-record-row>

           <sp-record-row>
             <span slot="label">Cost per day</span>
             <platform-component package-name="recordpage" name="RecordTemplate" template="{{ '${{costperday |number (decimals=2)}}' }}"></platform-component>
           </sp-record-row>
        
           <sp-record-row>
             <span slot="label">Website</span>
             <platform-component package-name="recordpage" name="RecordTemplate" template="{{ '<sp-link href="{{ linkurl }}"> {{ name }} </sp-link>' }}"></platform-component>
           </sp-record-row>
        </div>

        <div>
          <sp-heading size="base" style="margin-bottom: var(--sp-spacing-4)">Product image</sp-heading>
            <sp-record-row>
              <platform-component package-name="recordpage" name="RecordTemplate" template="{{ '<img src="{{imageurl}}" alt="{{name}}" width="200" height="200">' }}"></platform-component>
            </sp-record-row>
        </div>
      
      </sp-responsive-columns>
    </sp-tab-panel>
    
    <sp-tab-panel name="maintenance-record" shown>
      <sp-responsive-columns>

        <div>
          <sp-record-row>
            <span slot="label">Maintenance due</span>
            <platform-component package-name="recordpage" name="RecordFieldView" field-name="maintenancedue"></platform-component>
          </sp-record-row>
          
          <sp-record-row>
            <span slot="label">Repair history</span>
            <platform-component package-name="recordpage" name="RecordFieldView" field-name="repairhistory"></platform-component>
          </sp-record-row>
          
          <sp-record-row>
            <span slot="label">Last seen by:</span>
            <platform-component package-name="recordpage" name="RecordFieldView" field-name="lastseenby"></platform-component>
          </sp-record-row>
          
          <sp-record-row>
            <span slot="label">Status</span>
            <platform-component package-name="recordpage" name="RecordFieldView" field-name="status"></platform-component>
          </sp-record-row>
        </div>
      </sp-responsive-columns>
    </sp-tab-panel>
  
    <sp-tab-panel name="rental-agreement">
    </sp-tab-panel> 

  </sp-tabs>

{% endblock body %}

Please note that the Rental agreements tab is currently empty. Content will be added in linking to a second object.

This renders as:

View record page tabbed layout added

Splitting a tab into columns

Use the <sp-responsive-columns> element to split the Details tab into columns so that the product image sits beside the product details rather than beneath them.

<sp-tab-panel name="details" shown>
  <sp-responsive-columns>
  <div>
    <sp-heading size="base" style="margin-bottom: var(--sp-spacing-4)">Description</sp-heading>
          
      <sp-record-row>
        <span slot="label">Item name</span>
        <platform-component package-name="recordpage" name="RecordFieldView" field-name="name"></platform-component>
      </sp-record-row>

      <sp-record-row>
            <span slot="label">ID</span>
            <platform-component package-name="recordpage" name="RecordFieldView" field-name="Id"></platform-component>
      </sp-record-row>

      <sp-record-row>
        <span slot="label">Style</span>
        <platform-component package-name="recordpage" name="RecordFieldView" field-name="style"></platform-component>
      </sp-record-row>

       <sp-record-row>
        <span slot="label">Category</span>
        <platform-component package-name="recordpage" name="RecordFieldView" field-name="category"></platform-component>
      </sp-record-row>
          
      <sp-record-row>
        <span slot="label">Make</span>
        <platform-component package-name="recordpage" name="RecordFieldView" field-name="make"></platform-component>
      </sp-record-row>

      <sp-record-row>
        <span slot="label">Theme</span> 
        <platform-component package-name="recordpage" name="RecordFieldView" field-name="theme"></platform-component>
      </sp-record-row>

      <sp-record-row>
        <span slot="label">Cost per day</span>
        <platform-component package-name="recordpage" name="RecordTemplate" template="{{ '${{costperday |number (decimals=2)}}' }}"></platform-component>
      </sp-record-row>
        
      <sp-record-row>
        <span slot="label">Website</span>
        <platform-component package-name="recordpage" name="RecordTemplate" template="{{ '<sp-link href="{{ linkurl }}"> {{ name }} </sp-link>' }}"></platform-component>
      </sp-record-row>
        
      </div>
      <div>
      <sp-heading size="base" style="margin-bottom: var(--sp-spacing-4)">Product image</sp-heading>
        <sp-record-row>
        <platform-component package-name="recordpage" name="RecordTemplate" template="{{ '<img src="{{imageurl}}" alt="{{name}}" width="200" height="200">' }}"></platform-component></sp-record-row>
      </div>
  </sp-responsive-columns>
</sp-tab-panel>

view record page with tabs and columns

Linking to a second object

The third tab will display data from another object.

In this case, we’ve created a ‘Rental agreements’ custom object and populated it with the following fields:

  • Reference – Enter a unique reference number.
  • Account – Select a customer account to link the machine to.
  • Arcade Machine – Select the machine covered by the agreement.

To link to this object in the arcade-games-view template, add the following recordpage component to the <sp-tab-panel name="rental-agreement"> element in the template. This pulls in the data from the Rental agreement object, automatically filters it so that only the agreements relevant to the current machine are displayed, and presents the information in a list view on your Rental agreement tab.

<div style="padding-top: var(--sp-spacing-4)">
    <platform-component package-name="recordpage" name="RecordTemplate" template="{{ '{% if UID %}<platform-eventbus-scope closed><platform-component package-name="listview" name="ListView" query="ArcademachineId:{{ UID }}" resource-name="Rentalagreement"></platform-component> </platform-eventbus-scope> {% endif %}' }}" ></platform-component>
</div>

view record page with rental agreements tab populated

For more information about the recordpage horizon component package, refer to the Platform Record Page section in Storybook.


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