Smart Views
This is the official documentation of the @forestadmin/agent
Node.js agent.
What is a Smart View?
Smart Views let you code your List Views 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.
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.
Available properties
Forest Admin automatically injects into your Smart View some properties to help you display your data like you want.
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:
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.
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.
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.
Refreshing data
Trigger the fetchRecords
action in order to refresh the records on the page.
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.
Available parameters
Available actions
Forest Admin automatically injects into your Smart View some actions to trigger the logic you want.
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.
Triggering an Action
Please note that the Action triggering in the context of the Smart View editor can be broken as you might not have access to all the required information. We advise you to test the Action execution from the Smart View applied to the Collection view.
triggerSmartAction
function imported from 'client/utils/smart-view-utils'
has the following signature:
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).
Impact on related data
Once your Smart view is applied, it will also be displayed in your record's related data.
In the related data section
In the summary view
As of today, it's not possible to set different views for your Table/Summary/Related Data Views.
Last updated