Overriding the default Create Record template
In this article we will cover some of the ways in which you can override the arcade-games-create
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-create
template that was generated for the Arcade Games object contains the following:
{% extends "base-recordcreate" %}
{% set resource_name="Arcade Games" %}
{% set validation_schema="ArcadeGamesCreate" %}
As covered in the system-generated pages article, this means that the arcade-games-create
template extends the base-recordcreate
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 elements to your template and then add the components you want to change between them.
Before overriding any of the default template’s content, the following page is rendered in Skedulo Platform:
This article will take you through the process of configuring the default arcade-games-create
page so that it renders in a more user-friendly way, for example:
Locating the default template
To locate the default template:
- Click Settings > Developer tools > Platform Settings to display the Platform Pages page.
- Locate the
arcade-games-create
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 Create record page is defined in the header
block in the base-recordcreate
template, which looks as follows:
{% block header %}
<sp-header style="margin-bottom: 0">
<sp-column>
<sp-heading size="2xl" level="1">
{% block title %}
Create New {{ resource_name }}
{% 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 beneath the validationschema
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 Create record page is generated from the {% block title %}
element of the base template and pulls in the resource name. The sp-header
component provides the page header, and the sp-heading
element defines the size of the title.
To change the title from Create New Arcade Games to Arcade Game Machines, add the following to the arcade-games-create
template:
{% block header %}
<sp-header style="margin-bottom: 0">
<sp-heading size="2xl" level="1">
{% block title %}
Arcade Game Machines
{% endblock title %}
</sp-heading>
</sp-header>
{% endblock header %}
The header now renders as follows:
Subtitle
To add a subtitle to your header, you need to add the span
element to your template below the sp-heading
element. Enter your subtitle between the tags. For example:
{% block header %}
<sp-header style="margin-bottom: 0">
<sp-heading size="2xl" level="1">
{% block title %}
Arcade Game Machines
{% endblock title %}
</sp-heading>
<span>Add new record</span>
</sp-header>
{% endblock header %}
The header now renders as follows:
Adding an icon
To include an icon in the subtitle, you need to add the sp-icon
element to your template. A list of the currently available icons can be found our Design System documentation.
For example, to add a pencil icon to your subtitle, add the following line, <sp-icon icon="edit"></sp-icon>
, beneath the sp-heading
element.
{% block header %}
<sp-header style="margin-bottom: 0">
<sp-heading size="2xl" level="1">
{% block title %}
Arcade Game Machines
{% endblock title %}
</sp-heading>
<sp-icon icon="edit"></sp-icon>
<span>Add new record</span>
</sp-header>
{% endblock header %}
The header now renders as follows:
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 %}
Arcade Game Machines
{% endblock title %}
</sp-heading>
<sp-row style="--sp-row-spacing: var(--sp-spacing-3)">
<sp-icon icon="edit"></sp-icon>
<span>Add new 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 thesp-icon
andspan
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:
For more information about spacing and alignment, refer to the Flex layout section in our Design System documentation.
Changing the color
On the default Create Record page, the color of the subtitle is gray. To change the color of the subtitle on your modified page, 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-create
template now looks as follows:
{% block header %}
<sp-header style="margin-bottom: 0">
<sp-heading size="2xl" level="1">
{% block title %}
Arcade Game Machines
{% 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>Add new record</span>
</sp-row>
</sp-header>
{% endblock header %}
The Create record page header now renders as:
For a list of the all the available colors, refer to the Colors section in our Design System documentation.
Overriding the body
The main body of the Create record page is defined by the body
block in the base-recordcreate
template, which looks as follows:
{% block body %}
<sp-responsive-columns style="border-top: var(--sp-border-divider);">
<div>
<platform-component package-name="recordpage" name="ValidationBanner"></platform-component>
<platform-component package-name="recordpage" name="AutoForm"></platform-component>
</div>
</sp-responsive-columns>
{% endblock body %}
The custom fields that you added to your object are rendered on the Create record page by the AutoForm
component. The AutoForm
component waits for a validation schema to be parsed and then auto-renders any relevant FormField
elements. The ValidationBanner
ensures a message banner is displayed if the form doesn’t validate correctly.
To override the appearance of the content in the body of the Create record page, add the {% block body %}
and {% endblock body %}
tags to your template beneath the header
block and then add 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.Reordering the fields
Autoform
renders the fields in the sequence in which they appear on the validation schema. To reorder the fields, we can override this by adding the individual AutFormField
components for each field between the {% block body %}
and {% endblock body %}
tags.
For example, to reorder how the fields are displayed on the Create record page, enter the following between the {% block body %}
and {% endblock body %}
tags in the arcade-games-create template, where the ptr
value is the field’s name:
{% block body %}
<platform-component package-name="recordpage" name="AutoFormField" ptr="/name" label-position="top" placeholder="Enter a name"></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"></platform-component>
<platform-component package-name="recordpage" name="AutoFormField" ptr="/linkurl" label-position="top" placeholder="Enter a url"></platform-component>
<platform-component package-name="recordpage" name="AutoFormField" ptr="/imageurl" label-position="top" placeholder="Enter an image url"></platform-component>
<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>
{% endblock body %}
Important
You must ensure that theptr=
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 Create record page now renders as follows:
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, wrapping the AutoFormField
components you’ve added. Next, use <div>
elements to split the fields into two blocks. For example:
{% block body %}
<sp-responsive-columns>
<div>
{# Left Column #}
<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"></platform-component>
<platform-component package-name="recordpage" name="AutoFormField" ptr="/linkurl" label-position="top" placeholder="Enter a url"></platform-component>
</div>
<div>
{# Right Column #}
<platform-component package-name="recordpage" name="AutoFormField" ptr="/imageurl" label-position="top" placeholder="Enter an image url"></platform-component>
<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 %}
The Create record page now renders as follows:
Adding headings to the body
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 three headings: Summary, Machine image, and Maintenance details.
{% block body %}
<sp-responsive-columns>
<div>
{# Left Column #}
<sp-heading size="base" style="margin-bottom: var(--sp-spacing-4)">Summary</sp-heading>
<platform-component package-name="recordpage" name="AutoFormField" ptr="/name" label-position="top" placeholder="Enter a name"></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"></platform-component>
<platform-component package-name="recordpage" name="AutoFormField" ptr="/linkurl" label-position="top" placeholder="Enter a url"></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="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 details</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 %}
The Create record page now renders as follows:
Adding a border
To add a border between the header and body sections of your page, add the "border-top: var(--sp-border-divider)"
variable to the sp-responsive columns
element. For example:
{% block body %}
<sp-responsive-columns style="border-top: var(--sp-border-divider)">
<div>
{# Left Column #}
<sp-heading size="base" style="margin-bottom: var(--sp-spacing-4)">Summary</sp-heading>
<platform-component package-name="recordpage" name="AutoFormField" ptr="/name" label-position="top" placeholder="Enter a name"></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"></platform-component>
<platform-component package-name="recordpage" name="AutoFormField" ptr="/linkurl" label-position="top" placeholder="Enter a url"></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="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 details</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 %}
The Create record page now renders as follows:
Overriding the footer
The footer of the Create record page is defined by the footer
block in the base template, which looks as follows:
{% block footer %}
<sp-button-group slot="right">
<a href="{{ back_url }}"><sp-button button-type="transparent">Back</sp-button></a>
<platform-component package-name="recordpage" name="SaveButton" body="Create record"></platform-component>
</sp-button-group>
{% endblock footer %}
Add the {% block footer %}
and {% endblock footer %}
tags to the bottom of your template in order to override the default content. For example, you could change the position of the button to the left or center of the footer, or you could change the text on the button.
Overriding the text on the footer button
To override the text on the button in the Create record page footer, enter the following information between the {% block footer %}
and {% endblock footer %}
tags, where body=
is the text that appears on the button:
{% block footer %}
<sp-button-group slot="right">
<a href="{{ back_url }}"><sp-button button-type="transparent">Back</sp-button></a>
<platform-component package-name="recordpage" name="SaveButton" body="Create machine record"></platform-component>
</sp-button-group>
{% endblock footer %}
Completed code
If you’ve gone through all the steps in this article, your completed template should now look like this:
{% extends "base-recordcreate" %}
{% set resource_name="Arcade Games" %}
{% set validation_schema="ArcadeGamesCreate" %}
{% block header %}
<sp-header style="margin-bottom: 0">
<sp-column>
<sp-heading size="2xl" level="1">
{% block title %}
Arcade Game Machines
{% 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>Add new record</span>
</sp-row>
</sp-column>
</sp-header>
{% endblock header %}
{% block body %}
<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" placeholder="Enter a name"></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"></platform-component>
<platform-component package-name="recordpage" name="AutoFormField" ptr="/linkurl" label-position="top" placeholder="Enter a url"></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="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 %}
{% block footer %}
<sp-button-group slot="right">
<a href="{{ back_url }}"><sp-button button-type="transparent">Back</sp-button></a>
<platform-component package-name="recordpage" name="SaveButton" body="Create machine record"></platform-component>
</sp-button-group>
{% endblock footer %}
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.