Override the default List View template

This article covers how to override the default settings of the arcade-games-list 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
- Locating the default template
Overriding the header
Adding bulk actions
Adding row actions
Completed code

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:

list view page before

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.

list page after

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:

list view template 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.

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 the block 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:

List view page header title only

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:

List view page header with subtitle

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 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 List view page header now renders as:

list view page header layout adjusted

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:

arcade games list view page color changed

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:

List view page header button aligned

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:

List view page bulk action buttons

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>&nbsp; Delete</div></sp-row>\", \"confirmationMessage\": \"Are you sure?\" }]" %}

The List view page now renders as:

List view page bulk action buttons

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>&nbsp; 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.

On this page

Override the default List View template

The default template

Locate the default template

Override the header

Important

Title

Important

Subtitle

Header layout

Change the color

Add a button to the header

Align a button in the header

Add bulk actions

Add row actions

Completed code

Feedback