Create and manage Smart Views

What is a Smart View?

This feature requires a Business plan or higher. However, it's free to try in non-production environments.

Smart Views lets you code your view using JS, HTML, and CSS. They are taking data visualization to the next level. Ditch the table view and display your orders on a Map, your events in a Calendar, your movies, pictures and profiles in a Gallery. All of that with the easiness of Forest Admin.

Creating a Smart View

Forest Admin provides an online editor to inject your Smart View code. The editor is available on the collection’s settings, then in the “Smart views” tab.

The code of a Smart View is an Ember Component and simply consists of a Template and Javascript code.

You don’t need to know the Ember.js framework to create a Smart View. We will guide you here on all the basic requirements. For more advanced usage, you can still refer to the Ember Component and the Handlebars Template documentations.

Getting your records

The records of your collection are accessible from the records property. Here’s how to iterate over them in the template section:

{{#each records as |record|}}
{{/each}}

Accessing a specific record

For each record, you will access its attributes through the forest-attribute property. The forest- preceding the field name is required.

{{#each records as |record|}}
<p>status: {{record.forest-shipping_status}}</p>
{{/each}}

Accessing belongsTo relationships

Accessing a belongsTo relationship works in exactly the same way as accessing a simple field. Forest triggers automatically an API call to retrieve the data from your Admin API only if it’s necessary.

On the Shipping Smart View (in the collection named Order) defined on our Live Demo example, we’ve displayed the full name of the customer related to an order.

{{#each records as |record|}}
<h2>Order to {{record.forest-customer.forest-firstname}} {{record.forest-customer.forest-lastname}}</h2>
{{/each}}

Accessing hasMany relationships

Accessing a hasMany relationship works in exactly the same way as accessing a simple field.. Forest triggers automatically an API call to retrieve the data from your Admin API only if it’s necessary.

{{#each records as |record|}}
{{#each record.forest-comments as |comment|}}
<p>{{comment.forest-text}}</p>
{{/each}}
{{/each}}

Refreshing data

Trigger the fetchRecords action in order to refresh the records on the page.

<button {{action 'fetchRecords'}}>
Refresh data
</button>

Fetching data

Trigger an API call to your Admin API in order to fetch records from any collection and with any filters you want.

We will use the store service for that purpose. Check out the list of all [available services] from your Smart View.

In our Live Demo example, the collection appointments has a Calendar Smart View. When you click on the previous or next month, the Smart View fetches the new events in the selected month. The result here is set to the propertyappointments. You can access it directly from your template.

component.js
export default Ember.Component.extend({
store: Ember.inject.service('store'),
fetchData: function (start_date, end_date) {
let params = {
filter: {
'start_date': '>' + start_date + ',<' + end_date
},
filterType: 'and',
timezone: 'America/Los_Angeles',
'page[number]': 1,
'page[size]': 50
};
that.get('store')
.query('forest_appointment', params)
.then((appointments) => {
that.set('appointments', appointments);
});
}
},
// ...
});
template.hbs
{{#each appointments as |appointment|}}
<p>{{appointment.id}}</p>
<p>{{appointment.forest-name}}</p>
{{/each}}

Available parameters

Parameter

Type

Description

filter

Object

A list of filters you want to apply. Example filter: { date: '>2018-01-28,<2018-03-11', name: 'Manuela Nolan' }.

filterType

String

and or or.

timezone

String

The timezone string. Example: America/Los_Angeles.

page[number]

Number

The page number you want to fetch.

page[size]

Number

The number of records per page you want to fetch.

Deleting records

The deleteRecords action lets you delete one or multiple records. A pop-up will automatically ask for a confirmation when a user triggers the delete action.

template.hbs
{{#each records as |record|}}
<button {{action 'deleteRecords' record}}>
Delete record
</button>
{{/each}}

Triggering a Smart Action

Here’s how to trigger your Smart Actions directly from your Smart Views. You can pass an array or a single record. The first argument is the collection that has the Smart Action. The second argument is the Smart Action name, here Reschedule, and the third argument is an array of records or a single one.

template.hbs
<button {{action 'triggerSmartAction' collection 'Reschedule' record}}>
Reschedule appointment
</button>

Available properties

Forest Admin automatically injects into your Smart View some properties to help you display your data like you want.

Property

Type

Description

collection

Model

The current collection.

currentPage

Number

The current page.

isLoading

Boolean

Indicates if the UI is currently loading your records.

numberOfPages

Number

The total number of available pages

records

array

Your data entries.

searchValue

String

The current search.

Available actions

Forest Admin automatically injects into your Smart View some actions to trigger the logic you want.

Action

Description

deleteRecords(records)

Delete one or multiple records.

triggerSmartAction(collection, actionName, record)

Trigger a Smart Action defined on the specified collection on a record.

Examples

On our Live Demo, we have 4 Smart Views defined:

Example: Map view

component.js
import Ember from 'ember';
export default Ember.Component.extend({
tagName: '',
store: Ember.inject.service(),
map: null,
loaded: false,
loadPlugin: function() {
Ember.run.scheduleOnce('afterRender', this, () => {
if (this.get('viewList.recordPerPage') !== 50) {
this.set('viewList.recordPerPage', 50);
this.sendAction('updateRecordPerPage');
}
Ember.$.getScript('//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js', () => {
Ember.$.getScript('//cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js', () => {
this.set('loaded', true);
});
});
let cssLeafletLink = $('<link>');
$('head').append(cssLeafletLink);
cssLeafletLink.attr({ rel: 'stylesheet',
type: 'text/css',
href: '//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css'
});
let cssDrawLink = $('<link>');
$('head').append(cssDrawLink);
cssDrawLink.attr({
rel: 'stylesheet',
type: 'text/css',
href: '//cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css'
});
$('#map').css('height', $('.collectionList__content').height());
});
}.on('init'),
displayMap: function () {
if (!this.get('loaded')) { return; }
if (this.map) {
this.map.off();
this.map.remove();
this.map = null;
}
let markers = [];
$('#map_canvas').height($('.l-content').height());
this.get('records').forEach(function (record) {
markers.push([record.get('forest-lat'), record.get('forest-lng'), record.get('id')]);
});
this.map = new L.Map('map');
let osmUrl='https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png';
let osmAttrib='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>';
let osm = new L.TileLayer(osmUrl, { attribution: osmAttrib });
let drawnItems = new L.FeatureGroup();
this.map.addLayer(drawnItems);
let drawControl = new L.Control.Draw({
draw: {
polygon: false,
polyline: false,
rectangle: false,
circle: false,
circlemarker: false,
marker: true
},
edit: {
featureGroup: drawnItems
},
});
this.map.setView(new L.LatLng(48.8566, 2.3522), 2);
this.map.addLayer(osm);
this.map.addControl(drawControl);
this.map.on(L.Draw.Event.CREATED, (e) => {
let type = e.layerType,
layer = e.layer;
if (type === 'marker') {
let coordinates = e.layer.getLatLng();
let newRecord = this.get('store').createRecord('forest_delivery', {
'forest-is_delivered': false,
'forest-lng': coordinates.lng,
'forest-lat': coordinates.lat
});
newRecord.save().then((newRecord) => {
layer.on('click', () => {
this.get('router')
.transitionTo('rendering.data.collection.list.viewEdit.details',
this.get('collection.id'), newRecord.id);
});
});;
}
this.map.addLayer(layer);
});
this.addMarkers(markers);
}.observes('records.[]', 'loaded').on('didInsertElement'),
addMarker: function (marker) {
let lat = parseFloat(marker[0]);
let lng = parseFloat(marker[1]);
let recordId = marker[2];
let record = this.get('records').findBy('id', recordId);
marker = L.marker([lat, lng]).addTo(this.map);
marker.on('click', () => {
this.get('router')
.transitionTo('rendering.data.collection.list.viewEdit.details',
[this.get('collection.id'), recordId]);
});
},
addMarkers: function (markers) {
markers.forEach((marker) => this.addMarker(marker));
}
});
template.hbs
<style>
#map {
width: 100%;
height: 100%;
z-index: 4;
}
</style>
<div id="map"></div>

Example: Calendar view

'use strict';
import Ember from 'ember';
import SmartViewMixin from 'client/mixins/smart-view-mixin';
export default Ember.Component.extend(SmartViewMixin.default, {
store: Ember.inject.service(),
conditionAfter: null,
conditionBefore: null,
loaded: false,
calendarId: null,
loadPlugin: function() {
var that = this;
Ember.run.scheduleOnce('afterRender', this, function () {
if (this.get('viewList.recordPerPage') !== 50) {
this.set('viewList.recordPerPage', 50);
this.sendAction('updateRecordPerPage');
}
that.set('calendarId', `${this.get('element.id')}-calendar`);
Ember.$.getScript('//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js', function () {
that.set('loaded', true);
$(`#${that.get('calendarId')}`).fullCalendar({
allDaySlot: false,
minTime: '00:00:00',
defaultDate: new Date(2018, 2, 1),
eventClick: function (event, jsEvent, view) {
that.get('router')
.transitionTo('rendering.data.collection.list.viewEdit.details',
that.get('collection.id'), event.id);
},
viewRender: function(view, element) {
const field = that.get('collection.fields').findBy('field', 'start_date');
if (that.get('conditionAfter')) {
that.sendAction('removeCondition', that.get('conditionAfter'), true);
that.get('conditionAfter').destroyRecord();
}
if (that.get('conditionBefore')) {
that.sendAction('removeCondition', that.get('conditionBefore'), true);
that.get('conditionBefore').destroyRecord();
}
const conditionAfter = that.get('store').createRecord('condition');
conditionAfter.set('field', field);
conditionAfter.set('operator', 'is after');
conditionAfter.set('value', view.start);
conditionAfter.set('smartView', that.get('viewList'));
that.set('conditionAfter', conditionAfter);
const conditionBefore = that.get('store').createRecord('condition');
conditionBefore.set('field', field);
conditionBefore.set('operator', 'is before');
conditionBefore.set('value', view.end);
conditionBefore.set('smartView', that.get('viewList'));
that.set('conditionBefore', conditionBefore);
that.sendAction('addCondition', conditionAfter, true);
that.sendAction('addCondition', conditionBefore, true);
that.sendAction('fetchRecords', { page: 1 });
}
});
});
var cssLink = $('<link>');
$('head').append(cssLink);
cssLink.attr({
rel: 'stylesheet',
type: 'text/css',
href: '//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css'
});
});
}.on('init'),
setEvent: function () {
if (!this.get('records')) { return; }
var events = [];
var calendar = $(`#${this.get('calendarId')}`);
calendar.fullCalendar('removeEvents');
this.get('records').forEach(function (appointment) {
var event = {
id: appointment.get('id'),
title: appointment.get('forest-name'),
start: appointment.get('forest-start_date'),
end: appointment.get('forest-end_date')
};
calendar.fullCalendar('renderEvent', event, true);
});
}.observes('loaded', 'records.[]')
});
<style>
.calendar {
padding: 20px;
background: white;
height:100%;
overflow: scroll;
}
.calendar .fc-toolbar.fc-header-toolbar .fc-left {
font-size: 14px;
font-weight: bold;
}
.calendar .fc-day-header {
padding: 10px 0;
background-color: #f7f7f7;
}
.calendar .fc-event {
background-color: #f7f7f7;
border: 1px solid #ddd;
color: #555;
font-size: 14px;
}
.calendar .fc-day-grid-event {
background-color: #4285f4;
color: white;
font-size: 10px;
border: none;
padding: 2px;
}
</style>
<div id='{{calendarId}}' class="calendar"></div>

Example: Shipping view

component.js
'use strict';
import Ember from 'ember';
import SmartViewMixin from 'client/mixins/smart-view-mixin';
export default Ember.Component.extend(SmartViewMixin.default, {
setDefaultCurrentRecord: function () {
if (!this.get('currentRecord')) {
this.set('currentRecord', this.get('records.firstObject'));
}
}.on('didInsertElement').observes('records.[]'),
status: function () {
switch(this.get('currentRecord.forest-shipping_status')) {
case 'Being processed':
return 'one';
case 'Ready for shipping':
return 'two';
case 'In transit':
return 'three';
case 'Shipped':
return 'four';
}
}.property('currentRecord.forest-shipping_status'),
actions: {
selectRecord: function (record) {
this.set('currentRecord', record);
}
}
});
template.hbs
<style>
/* Wrapper styles */
.wrapper-view {
background: #F2F6FA;
width: 100%;
display: flex;
border: 1px solid #F2F6FA;
border-radius: 5px
}
.wrapper-list {
min-width: 330px;
height: 100vh;
background:#F2F6FA;
border-right: 1px solid #D9DDE1;
overflow: scroll
}
.wrapper-card {
width: 100%;
margin: 30px;
background: #FFF;
padding: 20px;
display: flex;
flex-direction: column;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.15);
}
/* List styles */
.list--header {
background: #FFF;
padding: 14px 30px;
height: 66px;
display: flex;
align-items: center;
border-bottom: 1px solid #D9DDE1;
}
form {
}
form.list-options {
align-self: center;
}
form.list-options select {
background: #F2F6FA;
border: 1px solid #ADB8C6;
width: 167px;
height: 38px;
font-size: 14px;
padding: 14px;
}
a {
text-decoration: none;
}
.list--item {
background: #FFF;
border-bottom: 1px solid #D9DDE1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
background: #FFF;
padding: 14px 30px;
position: relative;
}
/* use this 'selected' to show selected color */
.list--item.selected::before {
content: '';
width: 4px;
height: 100%;
margin: 0;
padding: 0;
background: #7A6ADC;
position: absolute;
top: 0;
left: 0;
}
.list--item__values-left {
color: #647A93;
}
.list--item__values-left h3 {
font-size: 14px;
font-weight: bold;
padding: 2px 0;
}
.list--item__values-left h3 span {
font-size: 10px;
text-transform: uppercase;
}
.list--item__values-left p {
font-size: 10px;
padding: 2px 0;
}
.list--item__values-left p span {
text-transform: uppercase;
}
.list--item__values-right {
display: flex;
align-items: center;
justify-content: center;
}
.list--item__values-right p {
color: #647A93;
font-size: 10px;
align-self: flex-start;
padding: 2px 0;
margin: 0;
}
/* Card styles */
.card--title {
padding: 0;
margin-bottom: 40px;
}
.card--title h2 {
margin: 0;
padding: 0;
color: #303B47;
}
.card--title small {
margin: 0;
padding: 0;
}
.card--gaugebar {
display: flex;
flex-flow: row wrap;
width: 100%;
}
.gaugebar {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 40px;
}
.gaugebar--points {
display: flex;
align-items: flex-start;
justify-content: space-between;
height: 50px;
}
.gaugebar--points img {
width: 42px;
margin: 0 10px;
}
.gaugebar--points__information {
font-size: 12px;
margin: 0;
height: 50px;
}
.gaugebar--points__informations p {
max-width: 370px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gaugebar--bar {
background: #f2f6fa;
height: 30px;
width: 100%;
margin: 0;
padding: 0;
position: relative;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
}
.gaugebar--bar__active {
background: #54bd7e;
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 30px;
transition: all 900ms ease;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
}
.gaugebar--bar__active.one {
width: 5%;
transition: all 900ms ease;
}
.gaugebar--bar__active.two {
width: 45%;
transition: all 900ms ease;
}
.gaugebar--bar__active.three {
width: 80%;
transition: all 900ms ease;
}
.gaugebar--bar__active.four {
width: 100%;
transition: all 900ms ease;
}
.gaugebar--bar__active.four::after {
content: 'DELIVERED';
position: absolute;
top: -50%;
right: 0;
font-size: 12px;
transition: all 900ms ease;
}
.gaugebar--bar__active::before{
content: '';
background: #459565;
width: 30px;
height: 30px;
position: absolute;
right: 0;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
.gaugebar--informations {
width: 100%;
display: flex;
flex-flow: row wrap;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-top: 10px;
}
.gaugebar--informations__start p, .gaugebar--informations__middle p, .gaugebar--informations__end p {
text-transform: uppercase;
font-size: 10px;
}
.gaugebar--informations__end p {
text-align: right;
}
.green {
color: #54BD7E;
}
.gaugebar--error {
background: #FFF;
border-radius: 4px;
padding: 20px;
display: flex;
flex-direction: column;
margin-top: 30px;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.15);
}
.gaugebar--error p {
font-size: 14px;
color: #899AAD;
margin-bottom: 10px;
}
.gaugebar--error p.error {
color: #FF9A76;
text-transform: uppercase;
}
.gaugebar--error a.btn {
color: #FFF;
padding: 8px 24px;
border-radius: 2px;
}
.gaugebar--error a.btn-info {
background: #3789E4;
}
.gaugebar--error a.btn-info:hover {
background: #287BD8;
transition: all 900ms ease;
}
</style>
<div class="wrapper-view">
<div class="wrapper-list">
{{#each records as |record|}}
<a href="#" {{action "selectRecord" record}}>
<div class="list--item {{if (eq currentRecord record) 'selected'}}">
<div class="list--item__values-left">
<h3><span>to :</span> {{record.forest-customer.forest-firstname}} {{record.forest-customer.forest-lastname}}</h3>
<p><span>order ID</span> : {{record.id}}</p>
<p><span>status</span> : {{record.forest-shipping_status}}</p>
</div>
<div class="list--item__values-right">
<p>{{moment-format record.forest-created_at 'LLL'}}</p>
</div>
</div>
</a>
{{/each}}
</div>
<div class="wrapper-card">
<div class="card--title">
<h2>Order to {{currentRecord.forest-customer.forest-firstname}} {{currentRecord.forest-customer.forest-lastname}}</h2>
<small>ID: {{currentRecord.id}}</small>
</div>
<div class="card--gaugebar">
<div class="gaugebar">
<div class="gaugebar--points">
<img src={{currentRecord.forest-product.forest-picture}} alt="">
<div class="gaugebar--points__informations">
<p>Product: {{currentRecord.forest-product.forest-label}}</p>
<p>Customer: {{currentRecord.forest-customer.forest-firstname}} {{currentRecord.forest-customer.forest-lastname}}</p>
</div>
</div>
</div>
<div class="gaugebar--bar">
<!-- use class 'full' to show full bar with order delivered -->
<div class="gaugebar--bar__active {{status}}"></div>
</div>
<div class="gaugebar--informations">
<div class="gaugebar--informations__one green">
<p>Being processed</p>
<p>{{moment-format currentRecord.forest-being_processed_at 'LLL'}}</p>
</div>
<div class="gaugebar--informations__two {{if currentRecord.forest-ready_for_shipping_at 'green'}}">
<p>Ready for shipping</p>
{{#if currentRecord.forest-ready_for_shipping_at}}
<p>{{moment-format currentRecord.forest-ready_for_shipping_at 'LLL'}}</p>
{{/if}}
</div>
<div class="gaugebar--informations__three {{if currentRecord.forest-in_transit_at 'green'}}">
<p>In transit</p>
{{#if currentRecord.forest-in_transit_at}}
<p>{{moment-format currentRecord.forest-in_transit_at 'LLL'}}</p>
{{/if}}
</div>
<div class="gaugebar--informations__four {{if currentRecord.forest-shipped_at 'green'}}">
<p>Shipped</p>
{{#if currentRecord.forest-shipped_at}}
<p>{{moment-format currentRecord.forest-shipped_at 'LLL'}}</p>
{{/if}}
</div>
</div>
</div>
</div>
</div>
component.js
'use strict';
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
updateRecordPerPage() {
this.get('customView')
.save()
.then(() => this.fetchRecords());
},
fetchRecords(olderOrNewer) {
this.fetchRecords(olderOrNewer);
}
}
});
template.hbs
<style>
.c-gallery.l-table--content {
text-align: center;
margin-top: 15px;
margin-bottom: 50px;
overflow-y: auto;
}
.c-gallery__image img {
height: 182px;
width: 182px;
margin: 3px;
border: 1px solid #bbb;
border-radius: 3px;
transition: all .3s ease-out;
}
.c-gallery__image:hover {
transform: scale(1.05);
}
</style>
<section class="l-view__element l-view__element--table u-f-g c-gallery l-table l-table--content">
<div>
{{#each records as |record|}}
{{#link-to 'rendering.data.collection.list.viewEdit.details' collection.id record.id class="c-gallery__image"}}
<img class="c-gallery__image" src={{record.forest-picture}}>
{{/link-to}}
{{/each}}
</div>
</section>
{{table/table-footer
records=records
currentPage=currentPage
collection=collection
numberOfPages=numberOfPages
fetchRecords=(action "fetchRecords")}}

Applying a Smart View

To apply a Smart view you created, turn on the Layout Editor mode (1), click on the table button (2) and drag & drop your Smart View's name in first position inside the dropdown (3):

Your view will refresh automatically. You can now turn off the Layout Editor mode (4).

Once your Smart view is applied, it will also be displayed in your record's related data.

In the summary view

As of today, it's not possible to set different views for your table/summary/related data views.