Edit the column templates
Once you’ve selected which columns will be displayed in the default list view and the order in which they will appear, you can edit the individual column templates to customize how the data is presented. In order to do this, you first need to open the Edit default columns page.
- Navigate to the Settings > Data management > Objects and fields page.
- Select the Arcade Games object.
- Click Edit default columns.
Edit column templates
To edit a column template:
- Click the Edit column button beside an item on the Edit default columns page to display the Edit column modal.
- Enter Skedulo’s Breeze UI components in the Column template field to customize how the data is displayed in that column.
- Click Done to close the Edit column modal and view your changes in the Table preview window.
- Click Save to save your changes.
The default Item column
When you create an object, the default list view page displays one column, called Item
. The content of this column is generated using the RecordDefiner
component and links to an item’s View record page.
If there is a name
or Name
field associated with your object, then the RecordDefiner
component pulls the item name from there. If there are neither of these fields on your object, the RecordDefiner
will pull in the UID
.
In the Column template field, this template looks as follows:
<sp-link href="{{_.host.buildPlatformUrl( _.resource.name + '-view?uid=' + _.record.primaryKeyValue )}}">{{_.record.renderDefiner()}}</sp-link>
For the Arcade Games object, we are going leave this template alone because the object has a Name
custom field, but we will rename the column from Item
to Name
.
An alternate way to link to another page, such as to link the ID column to the View page, is to add the following to the Column template field:
<sp-link href="{{_.host.buildPlatformUrl( _.resource.name + '-view?uid=' + _.record.primaryKeyValue )}}"><b>{{Id}}</b></sp-link>
Multi-select picklist column
By default, items in multi-select picklist columns are displayed in one line, for example:
Enter the following to ensure each value sits on a new line:
<ul>{% for item in category %}
<li>{{item}}</li>
{% endfor %}</ul>
The Category
column now renders as follows:
We can further configure this column by wrapping each value in a lozenge. For example, enter the following into the Column template field:
<ul>{% for item in category %}
<li><sp-lozenge style="margin: var(--sp-spacing-1)" theme="subtle" color="neutral">
{{item}}</sp-lozenge></li>
{% endfor %}</ul>
The Category
column now renders as follows:
Format the number column
By default, the costperday
column only displays the number entered in the costperday
field.
To display this number in the costperday
as currency, enter the following in the Column template field:
${{ costperday |number(decimals=2) }}
The costperday
column now renders as:
Format the imageurl column
To ensure the url value entered in the imageurl
field renders as an image, enter the following in the Column template field:
<img src="{{imageurl}}" width="50" height="50">
In addition, we will also rename the field. In the Column header field, enter Image
.
The imageurl
column now renders as:
Format the linkurl column
To ensure the url value entered in the linkurl
field renders as a hyperlink, enter the following in the Column template field:
<sp-link href="{{ linkurl }}"> {{ name }} </sp-link>
In addition, we will also rename the field. In the Column header field, enter Web page
.
The linkurl
column now renders as:
Format the Status column
To display status
values in different colored lozenges, enter the following in the Column template field:
{% if status == "Available" %}
<sp-lozenge theme="subtle" color="green"> Available </sp-lozenge>
{% elseif status == "NeedsRepairWithCustomer" %}
<sp-lozenge theme ="subtle" color="sapphire"> Needs Maintenance </sp-lozenge>
{% elseif status == "NeedsRepairInStores" %}
<sp-lozenge theme ="subtle" color="sapphire"> Needs Maintenance </sp-lozenge>
{% elseif status == "NeedsSoftwareUpdateWithCustomer" %}
<sp-lozenge theme="subtle" color="purple"> Needs Update </sp-lozenge>
{% elseif status == "NeedsSoftwareUpdateInStores" %}
<sp-lozenge theme="subtle" color="purple"> Needs Update </sp-lozenge>
{% elseif status == "DeadWithCustomer" %}
<sp-lozenge theme="subtle" color="red"> Dead </sp-lozenge>
{% elseif status == "DeadInStores" %}
<sp-lozenge theme="subtle" color="red"> Dead </sp-lozenge>
{% elseif status == "Rented" %}
<sp-lozenge theme="subtle" color="orange"> Rented </sp-lozenge>
{% else %} {{ JobStatus }}
{% endif %}
The status
column now renders as:
Add a custom column
Finally, we will add a custom column that isn’t related to a custom field. This column will contain an Edit button which links directly to a machine’s edit page.
-
On the Edit default column page, click Add custom column.
-
In the Column header field, enter Edit.
-
In the Column template field, enter:
<sp-link href="{{_.host.buildPlatformUrl('arcade-games-edit?uid=' + UID)}}"> <sp-button leading-icon="edit" button-type="primary" compact="">Edit</sp-button> </sp-link>
-
Click Done.
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.