Override the default List View template
Now that you have configured your columns and gathered some data, you might want to update the default list view page in order to enable you to select multiple records and make it easier to create or update records.
In this article, we will cover some of the ways in which you can override the default arcade-games-list
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-list
template that was generated for the Arcade Games object contains the following:
{% extends "base-listview" %}
{% block title %}Arcade Games{% endblock title %}
{% set view_uid="arcade-games-list" %}
{% set resource_name="Arcade Games" %}
As covered in the system-generated pages article, this means that the arcade-games-list
template extends the base-listview
template, and tells us the name of the resource. It also provides the page heading.
The base-listview
template contains the Platform listview
component. For more information about this component, refer to the Platform ListView documentation in Storybook.
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 overriding the default arcade-games-list
template to configure the header, add an Add new record button, and add delete options.
Locate the default template
To locate the default template:
- Click Settings > Developer tools > Platform settings to display the Platform Pages page.
- Find the
arcade-games-list
template in the list using the filter and sort options if necessary. - Click the template name to open its edit page.
Override the header
The content of the header in the List view page is defined by the header
block in the base-listview
template, which looks as follows:
<sp-header>
{% block header %}
<sp-heading size="lg">{% block title %}{% endblock title %}</sp-heading>
{% endblock header %}
</sp-header>
The page title is included in the default template ({% block title %}Arcade Games{% endblock title %}
) and uses the object label. Before changes, the header block renders as follows:
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.
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 List view page is generated from the {% block title %}
element of the default template. On the base template, the sp-heading
element defines the size of the title.
To change the title from Arcade Games to Arcade Game Machines, add the following to the arcade-games-list
template:
{% block header %}
<sp-heading size="2xl" level="1">
{% block title %}
Arcade Game Machines
{% endblock title %}
</sp-heading>
{% endblock header %}
Important
If you add theblock title
element to the header block, remember to delete the block title
element that was generated by default otherwise the page will not render.
The header now renders as:
Subtitle
As with the other pages, we want to add a subtitle with an icon to our header. To add a subtitle, add the span
element to your template below the sp-heading
element. Enter your subtitle between the tags.
To add an icon, add the sp-icon
element to your header block. For example:
{% block header %}
<sp-heading size="2xl" level="1">
{% block title %}
Arcade Game Machines
{% endblock title %}
</sp-heading>
<sp-icon icon="details"></sp-icon>
<span>List of machines</span>
{% 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-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="details"></sp-icon>
<span>List of machines</span>
</sp-row>
</sp-column>
{% 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 List view page header now renders as:
For more information about spacing and alignment, refer to the Flex layout section in the Design System documentation.
Change the color
To change the color of the subtitle and icon, 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-list
template now looks as follows:
{% block header %}
<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="details"></sp-icon>
<span>List of machines</span>
</sp-row>
</sp-column>
{% endblock header %}
The List view page header now renders as:
A list of the available colors can be found in the Design System documentation.
Add a button to the header
Add an Add new record button to your List view page to give you quick access to the Create record page.
For this example, we are going to add a primary
button type which will open Create record page. To add a button, use the <sp-button>
element, wrapped in a link to the page you want to open, which in this case is /platform/page/arcade-games-create
. For example:
<a href="/platform/page/arcade-games-create">
<sp-button>Add new record</sp-button>
</a>
Added to the header
block, it looks as follows:
{% block header %}
<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="details"></sp-icon>
<span>List of machines</span>
</sp-row>
</sp-column>
<a href="/platform/page/arcade-games-create">
<sp-button>Add new record</sp-button>
</a>
{% endblock header %}
The List view page header now renders as follows:
Align 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-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="details"></sp-icon>
<span>List of machines</span>
</sp-row>
</sp-column>
</div>
<div slot="right" style="text-align: right;">
<sp-heading>
<a href="/platform/page/arcade-games-create">
<sp-button>Add new record</sp-button>
</a>
</sp-heading>
</div>
</sp-split-row>
{% endblock header %}
The List view page header now renders as follows:
A list of the available button elements can be found in the Design System documentation.
Add bulk actions
Add the ability to select and perform actions on multiple records from your list view page with the bulk_actions
component.
If you are adding the component to a Jobs list, there are the following actions available:
notify
delete
lock
unlock
cancel
deallocate
unschedule
For this example, we want to add only the delete
action.
Enter the following below the header
block to enable you to delete multiple records at once and set a confirmation message.
{% set bulk_actions="[{ \"action\": \"delete\", \"label\": \"Delete\", \"confirmationMessage\": \"Are you sure?\" }]" %}
The list view page now renders as:
Add row actions
Add a menu to list rows to enable you to configure row-level actions. For example, to add a Delete option, enter the following:
{% set row_actions="[{\"action\": \"delete\", \"label\": \"<sp-row vertical-align=\\\"middle\\\"><div><sp-icon icon=\\\"trash\\\"></sp-icon></div><div> Delete</div></sp-row>\", \"confirmationMessage\": \"Are you sure?\" }]" %}
The List view page now renders as:
Completed code
If you’ve gone through all the steps in this article, your completed template should look as follows:
{% extends "base-listview" %}
{% set view_uid="arcade-games-list" %}
{% set resource_name="Arcade Games" %}
{% block header %}
<sp-split-row>
<div slot="left">
<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="details"></sp-icon>
<span>List of machines</span>
</sp-row>
</sp-column>
</div>
<div slot="right" style="text-align: right;">
<sp-heading>
<a href="/platform/page/arcade-games-create">
<sp-button>Add new record</sp-button>
</a>
</sp-heading>
</div>
</sp-split-row>
{% endblock header %}
{% set bulk_actions="[{ \"action\": \"delete\", \"label\": \"Delete\", \"confirmationMessage\": \"Are you sure?\" }]" %}
{% set row_actions="[{\"action\": \"delete\", \"label\": \"<sp-row vertical-align=\\\"middle\\\"><div><sp-icon icon=\\\"trash\\\"></sp-icon></div><div> Delete</div></sp-row>\", \"confirmationMessage\": \"Are you sure?\" }]" %}
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.