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.

1. Navigate to the Settings > Data management > Objects and fields page.
2. Select the Arcade Games object.
3. Click Edit default columns.

Edit column templates

To edit a column template:

1. Click the Edit column button beside an item on the Edit default columns page to display the Edit column modal.
2. Enter Skedulo’s Breeze UI components in the Column template field to customize how the data is displayed in that column.

3. Click Done to close the Edit column modal and view your changes in the Table preview window.
4. 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.

1. On the Edit default column page, click Add custom column.

2. In the Column header field, enter Edit.

3. 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>
   

4. Click Done.

Feedback

Was this page helpful?

Yes No

Glad to hear it! Please tell us how we can improve.

Sorry to hear that. Please tell us how we can improve.