Overriding the default View Record 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:
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:
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
):
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.
Important
You will need to rebuild all the elements of the header block you want to include even if you only want to override one part.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:
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:
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:
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:
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.
Important
You will need to rebuild all the elements of the body block you want to include even if you only want to override one part.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:
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>
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>
For more information about the recordpage
horizon component package, refer to the Platform Record Page section in Storybook.
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.