Overriding the default View Record template

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

Once you have added some records using your Create record page, you might want to update the View record page, so that your data is presented in a more useful way.

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 that 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-view 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 Skedulo 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

Locating the default template

To locate the default template:

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

Overriding the header

The content of the header in the View record page is defined by the header block in the base-recordview template, which 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-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 beneath the resource_name element. Enter the components you want to include in your header between these header tags.

Title

The title of the View 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-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 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-view 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="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 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="details"></sp-icon>
            <span>Machine record</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 View record page header now renders as:

View Record page header 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, 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-view 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="details"></sp-icon>
          <span>Machine record</span>
      </sp-row>
    </sp-column>
  </sp-header>
{% endblock header %}

The View record page header now renders as:

View Record page subtitle color changed

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

Adding an edit button to the header

Add an Edit button to your View record page to make it easier to edit your records.

For this example, we are going to add a primary button type which will open the currently selected record’s Edit record page. To add this button, add the RecordTemplate component to your header block, and then within this component, add the page you want to open and the sp-button element. For example:

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

If we add this component to our header block, it 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="details"></sp-icon>
          <span>Machine record</span>
      </sp-row>
    </sp-column>
    <platform-component package-name="recordpage" name="RecordTemplate" template="{{ '<a href="/platform/page/arcade-games-edit?uid={{UID}}"> <sp-button>Edit record</sp-button>' }}"></platform-component>
  </sp-header>
{% endblock header %}

The View record page header now renders as follows:

View Record page with header button

Aligning a button in the header

To right-align the button on the header, add the sp-split-row element to your template and use <div slot ="left"> and <div slot="right" style="text-align: right;"> to split the content. For example:

{% block header %}
  <sp-split-row>
    <div slot="left">
      <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="details"></sp-icon>
              <span>Machine record</span>
            </sp-row>
          </sp-column>
        </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 View record page header now renders as follows:

View Record page header button aligned

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

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 Create record page, we will reorder the fields on the View record page.

Add the fields you want visible on the page 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. This is what will appear on the record page.
  • Reference the field name in the recordpage component. This value must match the Field name value you entered on the Create Custom Field modal when you created your custom fields.

With all the fields added, the template looks as follows:

{% block body %}
  <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="RecordFieldView" field-name="costperday"></platform-component>
  </sp-record-row>
        
  <sp-record-row>
    <span slot="label">Website</span>
    <platform-component package-name="recordpage" name="RecordFieldView" field-name="linkurl"></platform-component>
  </sp-record-row>   
    
  <sp-record-row>
    <span slot="label">Image</span>
    <platform-component package-name="recordpage" name="RecordFieldView" field-name="imageurl"></platform-component>
  </sp-record-row>
{% endblock body %}

The View record page now renders as follows:

View record page fields added

Note: The Maintenance due, Repair history, Last seen by, and Status fields will be added later. They are going to be displayed on a different tab when we create the tabbed display.

Splitting the page into columns

We’ve added the fields in the order we want them to appear, but they are currently displayed in one column, which is aligned to the edge of the page. To split the page into two columns, add the <sp-responsive-columns> element to the body block. Next, use <div> elements to split the fields into two blocks. For example:

{% block body %}
    <sp-responsive-columns>
      <div>
        <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="RecordFieldView" field-name="costperday"></platform-component>
        </sp-record-row>
           
        <sp-record-row>
          <span slot="label">Website</span>
          <platform-component package-name="recordpage" name="RecordFieldView" field-name="linkurl"></platform-component>
        </sp-record-row>   
      </div>
      <div>
        <sp-record-row>
          <span slot="label">Image</span>
          <platform-component package-name="recordpage" name="RecordFieldView" field-name="imageurl"></platform-component>
        </sp-record-row>
      </div>
    </sp-responsive-columns>
{% endblock body %}

The View record page now renders as follows:

view record page with columns added

Adding an image

As you can see from the previous screenshot, the image URL doesn’t yet resolve into an image. To do this, you need to replace the RecordFieldView platform component with the RecordTemplate component. For the img src element, enter the field name where the image URL is entered, which in this case is the imageurl custom field we created at the start. This value must match the Field name value you entered on the Create Custom Field modal when you created your custom fields. For example:

<platform-component package-name="recordpage" name="RecordTemplate" template="{{ '<img src="{{imageurl}}" alt="{{name}}" width="200" height="200">' }}"></platform-component>

In the body block, this looks as follows:

{% block body %}
<sp-responsive-columns>
  <div>
    <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="RecordFieldView" field-name="costperday"></platform-component>
    </sp-record-row>
           
    <sp-record-row>
      <span slot="label">Website</span>
      <platform-component package-name="recordpage" name="RecordFieldView" field-name="linkurl"></platform-component>
    </sp-record-row>   
  </div>
      
  <div>
    <sp-record-row>
      <span slot="label">Image</span>
      <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>
{% endblock body %}

The View record page now renders as follows:

view record page with image added

As you can see from the previous screenshot, the link to the website isn’t clickable. In order to correct this, you need to replace the RecordFieldView platform component with the RecordTemplate component. For the sp-link href element, enter the name of the field where you enter the link, which in this case is the linkurl custom field we created at the start. This value must match the Field name value you entered on the Create Custom Field modal when you created your custom fields. The text used for the hyperlink pulls in the name field.

<platform-component package-name="recordpage" name="RecordTemplate" template="{{ '<sp-link href="{{ linkurl }}"> {{ name }} </sp-link>' }}"></platform-component>

In the body block, this looks as follows:

{% block body %}
    <sp-responsive-columns>
      <div>
        <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="RecordFieldView" field-name="costperday"></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-record-row>
          <span slot="label">Image</span>
          <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>
{% endblock body %}

The View record page now renders as follows:

view record page with a hyperlink added

Adding number formatting

To modify the costperday field so that the value is displayed as a decimal and with a currency symbol, replace the RecordFieldView platform component with the RecordTemplate component and specify the denomination and number of decimal places in the template value. For example:

<platform-component package-name="recordpage" name="RecordTemplate" template="{{ '${{costperday |number (decimals=2)}}' }}"></platform-component>

In the body block, this looks as follows:

{% block body %}
    <sp-responsive-columns>
      <div>
        <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-record-row>
          <span slot="label">Image</span>
          <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>
{% endblock body %}

The View record page now renders as follows:

view record page with a currency added

Adding headings

Headings can be added to group the fields into sections. To add headings to the body block, use the sp-heading element. In this example, we are going to add two headings, one at the top of each column.

{% block body %}
    <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>
{% endblock body %}

View record page with headings added

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. We are also going to add a third tab which will link to another object.

The tabs will contain the following information:

  • Tab one, Details, will include the name, Id, style, category, make, theme, costperday, linkurl, and imageurl fields.
  • Tab two, Maintenance record, will include the maintenancedue, repairhistory, lastseenby, and status fields. These rows will need adding to the template.
  • Tab three, Rental agreements, will link to a second object. For now, this tab is empty. Content will be added in linking to data from a related 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 %}

This renders as:

View record page tabbed layout added

Adding reflective tabs

To link users directly to a specific tab, you can use the ReflectiveTabs component.

This component enables you to not only add tabs to your page, like the sp-tabs componenet, but also build a URL that will take a user to a specific tab. This means you can link users directly to relevant data.

For example, with the sp-tabs component that we used above to add tabs, the URL for a tabbed record page would be:

.../platform/page/arcade-games-view?uid=05a2e2f1-096a-432d-a66e-b86c9aac8b87

But, if you create tabs using the ReflectiveTabs component, the URL can look as follows, with the tab name at the end:

.../platform/page/arcade-games-view?uid=05a2e2f1-096a-432d-a66e-b86c9aac8b87&selectedtab=details

In order to use this component, add the following to the body block, replacing the first four lines of the block that we added in the Adding tabs section above:

<sp-tabs selected="{{_.queryParams.selectedtab}}">
  <platform-component package-name="nav" name="ReflectiveTabs" search-param="selectedtab"
  tabs="{{  [
              {"name":"details","label":"Details"},
              {"name":"maintenance-record","label":"Maintenance record"},
              {"name":"rental-agreement","label":"Rental agreements"}
            ]   |dump}}">
   </platform-component>

The first line, <sp-tabs selected=" {{_.queryParams.selectedtab}}"> , establishes the query, so you need to ensure the value entered matches the search-param value used in the next line.

The search-param value can be anything you want. For this example, we’ve used selectedtab.

Within the ReflectiveTabs component, add the names and labels of the individual tabs.

  • The Name is used internally, and must match the value of the sp-tab-panel component.
  • The Label is what will be visible on the tab. It should match the label you use for the tab in the sp-tab-panel component.

The third tab in out View record page will display data from another object.

Create a new custom object called Rental agreements and populate 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>
  <platform-component 
  package-name="recordpage"
  name="RecordTemplate"
  template=" {{ '{% if UID %}
    <platform-eventbus-scope closed>
      <platform-component package-name="listview" 
       name="RelatedListView" 
       resource-name="Rentalagreement"
       foreign-key="ArcademachineId"
       foreign-key-value="{{UID}}">
      </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.

Completed code

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

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

{% block header %}
  <sp-split-row>
    <div slot="left">
      <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="details"></sp-icon>
              <span>Machine record</span>
            </sp-row>
          </sp-column>
        </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 %}

{% 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">
      <div>
      <platform-component 
        package-name="recordpage"
        name="RecordTemplate"
        template=" {{ '{% if UID %}
              <platform-eventbus-scope closed>
                <platform-component package-name="listview" 
                 name="RelatedListView" 
                 resource-name="Rentalagreement"
                 foreign-key="ArcademachineId"
                 foreign-key-value="{{UID}}">
                </platform-component> 
              </platform-eventbus-scope>
              {% endif %}' }}" >
      </platform-component>
      </div>
    </sp-tab-panel> 
</sp-tabs>
{% endblock body %}