Episode #7 - Filtering related data to only show what’s important
Welcome back, Low Coders! Last time on Mastering low code app development, we built out our pages with new tabs to show related data, giving our users access to all the information they need in a single screen. In this episode we look at how to filter the information displayed on the page to make sure our users are only getting the information they need when they need it!
Users don’t want to be scrolling through records that offer limited value — they want the information they need without any fuss or muss. Our fictitious company services aircraft throughout the galaxy, and while it’s important for them to know which customers have which aircraft in their fleet, they probably don’t need to see inactive aircraft clogging up their Fleet Assignment records.
This data is not invaluable (after all, all data is good data). Some of your team may want to know which aircraft used to make up the fleet but have since been retired — this may help them to identify if there are spare parts available on-site that may be hard to source elsewhere. By adding static filters to your list views, you can give your users a list of the current fleet assignments, and separate out the Retired Fleet into a new tab on the page. This keeps the data available for your users, but gives them more targeted and focussed information, making their days more beautiful, all thanks to you!
There are a few things to keep in mind when looking at adding filters to your list views. Including a filter on the standard Related List View component that we added to the page in Episode 6 is not currently supported, as the data in a related list view is designed to show all data related to the parent record (in this example, all fleet data related to the aircraft). So when we want to add in a static filter, we will need to change the *related *list view to a standard list view and then add the filter criteria into the page making life easy for your users! Let’s do it.
Our existing code block for the Fleet Assignment details on our Aircraft View page looks like the below:
<platform-component
package-name="recordpage"
name="RecordTemplate"
template=" {{ '{% if UID %}
<platform-eventbus-scope closed>
<platform-component
package-name="listview"
name="RelatedListView"
resource-name="fleet"
foreign-key="AircraftId"
foreign-key-value="{{UID}}">
</platform-component>
</platform-eventbus-scope>
{% endif %}' }}" >
</platform-component>
<platform-component
package-name="recordpage"
name="RecordTemplate"
template=" {{ '{% if UID %}
<platform-eventbus-scope closed>
<platform-component
package-name="listview"
name="RelatedListView"
resource-name="fleet"
foreign-key="AircraftId"
foreign-key-value="{{UID}}">
</platform-component>
</platform-eventbus-scope>
{% endif %}' }}" >
</platform-component>When we look at the Fleet Assignment tab of our aircraft, we can see all the assignments, both active and inactive:
This is great, but it would be more helpful for our fabulous team to be able to quickly identify which aircraft are actively in service at our customers, without needing to scroll or filter each time they reach the page. To do this, I want to put a static filter on the Fleet Assignment tab to only display Active assignments.
We want to change the RelatedListView to a ListView in the name row of our code. From here we can add a query to restrict the data being displayed, and remove the foreign key lines. Because we are removing the foreign key lines of the code, we need to ensure that the query includes a way to only display the relevant records for the record we are viewing. To do this, I want to add a query that will only show Active fleet records for the Aircraft we are viewing.
To do this, we update the code to the below snippet.
<platform-component
package-name="recordpage"
name="RecordTemplate"
template=" {{ '{% if UID %}
<platform-eventbus-scope closed>
<platform-component package-name="listview"
name="ListView"
query="IsActive:true AND AircraftID:{{ UID }}"
resource-name="fleet">
</platform-component>
</platform-eventbus-scope>
{% endif %}' }}" >
</platform-component>
When viewing our Fleet Assignments tab now, we can see only the Active assignments:
Because all data is good data, I want to add another tab to the page that displays the retired fleet assignments as well. Following along from the last episode of adding tabs, I can add in an additional tab, with a query to display inactive fleet assignments for the vehicle, which gives our users the full information they may require.
<platform-component
package-name="recordpage"
name="RecordTemplate"
template=" {{ '{% if UID %}
<platform-eventbus-scope closed>
<platform-component package-name="listview"
name="ListView"
query="IsActive:false AND AircraftID:{{ UID }}"
resource-name="fleet">
</platform-component>
</platform-eventbus-scope>
{% endif %}' }}" >
</platform-component>
Now, I can see both the active and retired vehicles for our X-Wing:
The full code for the page now looks like this:
{% extends "base-recordview" %}
{% set resource_name="aircraft" %}
{% block header %}
<sp-split-row>
<div slot="left">
<sp-header style="margin-bottom: 0">
<sp-column>
<sp-heading size="2xl" level="1">
{% block title %}
<platform-component package-name="recordpage" name="RecordDefiner"></platform-component>
{% endblock title %}
</sp-heading>
<sp-row style=" - sp-row-spacing: var( - sp-spacing-3);">
<sp-icon icon="details"></sp-icon>
<span>Aircraft </span>
</sp-row>
</sp-column>
</sp-header>
</div>
<div slot="right" style="text-align: right;">
<sp-header style="margin-bottom: 0">
<sp-heading>
<platform-component package-name="recordpage" name="RecordTemplate" template="{{ '<a href="/platform/page/aircraft-edit?uid={{UID}}">
<sp-button>Edit</sp-button>
' }}"></platform-component>
</sp-heading>
</sp-header>
</div>
</sp-split-row>
{% endblock header %}
{% block body %}
<sp-tabs selected="{{_.queryParams.selectedtab}}">
<platform-component package-name="nav" name="ReflectiveTabs" search-param="selectedtab"
tabs="{{ [
{"name":"details","label":"Details"},
{"name":"aircraft-parts","label":"Aircraft Parts"},
{"name":"fleet-assignments","label":"Fleet Assignments"},
{"name":"retired-fleet","label":"Retired Fleet"}
] |dump}}">
</platform-component>
<sp-tab-panel name="details" shown>
<sp-responsive-columns>
<div>
<sp-heading size="base" style="margin-bottom: var( - sp-spacing-4)">Description</sp-heading>
<sp-record-row>
<span slot="label">Hyperspace</span>
<platform-component package-name="recordpage" name="RecordFieldView" field-name="Hyperspace"></platform-component>
</sp-record-row>
<sp-record-row>
<span slot="label"># of Seats</span>
<platform-component package-name="recordpage" name="RecordFieldView" field-name="Seats"></platform-component>
</sp-record-row>
<sp-record-row>
<span slot="label">Release Date</span>
<platform-component package-name="recordpage" name="RecordFieldView" field-name="ReleaseDate"></platform-component>
</sp-record-row>
<sp-record-row>
<span slot="label">Last Service Date</span>
<platform-component package-name="recordpage" name="RecordFieldView" field-name="LastService"></platform-component>
</sp-record-row>
</div>
<div>
<sp-record-row>
<span slot="label">Branding</span>
<platform-component package-name="recordpage" name="RecordTemplate"
template="{{ '{% if Branding == "Rebellion" %}
<img src="https://starwarsblog.starwars.com/wp-content/uploads/2015/11/rebel-symbol-536x536.jpg" alt="Rebellion" width="100" height="100">
{% else %}
<img src="https://starwarsblog.starwars.com/wp-content/uploads/2016/02/imperialseal-536x536.jpg" alt="Empire" width="100" height="100">
{% endif %}' }}"></platform-component>
</sp-record-row>
<sp-record-row>
<span slot="label">Image</span>
<platform-component package-name="recordpage" name="RecordTemplate" template="{{ '<img src="{{Image}}" alt="{{name}}" width="200" height="200">' }}"></platform-component>
</sp-record-row>
</div>
</sp-responsive-columns>
</sp-tab-panel>
<sp-tab-panel name="aircraft-parts">
<sp-split-row>
<div slot = "right" style="text-align: right;">
<sp-header style="margin-bottom: 0">
<platform-component package-name="recordpage" name="RecordTemplate" template="{{ '<a href="/platform/page/aircraft-parts-create">
<sp-button button-type="secondary">Add Part</sp-button>
' }}"></platform-component>
</sp-header>
</div>
</sp-split-row>
<div style="padding-top: var( - sp-spacing-4)">
<platform-component
package-name="recordpage"
name="RecordTemplate"
template= " {{ '{% if UID %}
<platform-eventbus-scope closed>
<platform-component package-name="listview"
name="RelatedListView"
resource-name="aircraft Parts"
foreign-key="AircraftId"
foreign-key-value="{{UID}}">
</platform-component>
</platform-eventbus-scope>
{% endif %}' }} " >
</platform-component>
</div>
</sp-tab-panel>
<sp-tab-panel name="fleet-assignments">
<sp-split-row>
<div slot = "right" style="text-align: right;">
<sp-header style="margin-bottom: 0">
<platform-component package-name="recordpage" name="RecordTemplate" template="{{ '<a href="/platform/page/fleet-create?Aircraft={{UID}}">
<sp-button button-type="secondary">Add Fleet Assignment</sp-button>
' }}"></platform-component>
</sp-header>
</div>
</sp-split-row>
<div style="padding-top: var( - sp-spacing-4)">
<platform-component
package-name="recordpage"
name="RecordTemplate"
template=" {{ '{% if UID %}
<platform-eventbus-scope closed>
<platform-component package-name="listview"
name="ListView"
query="IsActive:true AND AircraftId:{{ UID }}"
resource-name="fleet">
</platform-component>
</platform-eventbus-scope>
{% endif %}' }}" >
</platform-component>
</div>
</sp-tab-panel>
<sp-tab-panel name="retired-fleet">
<sp-split-row>
<div slot = "right" style="text-align: right;">
<sp-header style="margin-bottom: 0">
<platform-component package-name="recordpage" name="RecordTemplate" template="{{ '<a href="/platform/page/fleet-create?Aircraft={{UID}}">
<sp-button button-type="secondary">Add Fleet Assignment</sp-button>
' }}"></platform-component>
</sp-header>
</div>
</sp-split-row>
<div style="padding-top: var( - sp-spacing-4)">
<platform-component
package-name="recordpage"
name="RecordTemplate"
template=" {{ '{% if UID %}
<platform-eventbus-scope closed>
<platform-component package-name="listview"
name="ListView"
query="IsActive:false AND AircraftId:{{ UID }}"
resource-name="fleet">
</platform-component>
</platform-eventbus-scope>
{% endif %}' }}" >
</platform-component>
</div>
</sp-tab-panel>
</sp-tabs>
{% endblock body %}
Join us here at Low Code Corner next time when we uncover how to pre-populate data for your users making them love you even more! And as always, if you have questions, reach out to us via the comments below or on Twitter @SkeduloDevs.