# Smart Views
{% hint style="warning" %}
Please be sure of your agent type and version and pick the right documentation accordingly.
{% endhint %}
{% tabs %}
{% tab title="Node.js" %}
{% hint style="danger" %}
This is the documentation of the `forest-express-sequelize` and `forest-express-mongoose` Node.js agents that will soon reach end-of-support.
`forest-express-sequelize` v9 and `forest-express-mongoose` v9 are replaced by [`@forestadmin/agent`](https://docs.forestadmin.com/developer-guide-agents-nodejs/) v1.
Please check your agent type and version and read on or switch to the right documentation.
{% endhint %}
{% endtab %}
{% tab title="Ruby on Rails" %}
{% hint style="success" %}
This is still the latest Ruby on Rails documentation of the `forest_liana` agent, you’re at the right place, please read on.
{% endhint %}
{% endtab %}
{% tab title="Python" %}
{% hint style="danger" %}
This is the documentation of the `django-forestadmin` Django agent that will soon reach end-of-support.
If you’re using a Django agent, notice that `django-forestadmin` v1 is replaced by [`forestadmin-agent-django`](https://docs.forestadmin.com/developer-guide-agents-python) v1.
If you’re using a Flask agent, go to the [`forestadmin-agent-flask`](https://docs.forestadmin.com/developer-guide-agents-python) v1 documentation.
Please check your agent type and version and read on or switch to the right documentation.
{% endhint %}
{% endtab %}
{% tab title="PHP" %}
{% hint style="danger" %}
This is the documentation of the `forestadmin/laravel-forestadmin` Laravel agent that will soon reach end-of-support.
If you’re using a Laravel agent, notice that `forestadmin/laravel-forestadmin` v1 is replaced by [`forestadmin/laravel-forestadmin`](https://docs.forestadmin.com/developer-guide-agents-php) v3.
If you’re using a Symfony agent, go to the [`forestadmin/symfony-forestadmin`](https://docs.forestadmin.com/developer-guide-agents-php) v1 documentation.
Please check your agent type and version and read on or switch to the right documentation.
{% endhint %}
{% endtab %}
{% endtabs %}
## Smart Views
### What is a Smart View?
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 a [Glimmer Component](https://guides.emberjs.com/release/upgrading/current-edition/glimmer-components/) and simply consists of a Template and Javascript code.
{% hint style="info" %}
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 [Glimmer Component](https://guides.emberjs.com/release/upgrading/current-edition/glimmer-components/) documentations.
{% endhint %}
{% hint style="warning" %}
Your code must be compatible with Ember 4.12.
{% endhint %}
#### 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:
```markup
{{#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**.
```markup
{{#each @records as |record|}}
status: {{record.forest-shipping_status}}
{{/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.
```markup
{{#each @records as |record|}}
Order to {{record.forest-customer.forest-firstname}} {{record.forest-customer.forest-lastname}}
{{/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.
```markup
{{#each @records as |record|}}
{{#each @record.forest-comments as |comment|}}
{{comment.forest-text}}
{{/each}}
{{/each}}
```
#### Refreshing data
Trigger the `fetchRecords` action in order to refresh the records on the page.
```markup
```
#### 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 property`appointments`. You can access it directly from your template.
{% code title="component.js" %}
```javascript
import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { tracked } from '@glimmer/tracking';
export default class extends Component {
@service store;
@tracked appointments;
async fetchData(startDate, endDate) {
const params = {
filters: JSON.stringify({
aggregator: 'and',
conditions: [{
field: 'start_date',
operator: 'greater_than'
value: startDate,
}, {
field: 'start_date',
operator: 'less_than'
value: endDate,
}],
}),
timezone: 'America/Los_Angeles',
'page[number]': 1,
'page[size]': 50
};
this.appointments = await this.store.query('forest_appointment', params);
}
// ...
};
```
{% endcode %}
{% code title="template.hbs" %}
```markup
{{#each this.appointments as |appointment|}}
An aggregation is built using the following template
{
aggregator: \
conditions: \
}
List of available operators is: less\_than, greater\_than, equal, after, before, contains, starts\_with, ends\_with, not\_contains, present, not\_equal, blank
|
| 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.
{% code title="template.hbs" %}
```markup
{{#each @records as |record|}}
{{/each}}
```
{% endcode %}
#### Triggering a Smart Action
{% hint style="warning" %}
Please note that the smart 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 smart action execution from the smart view applied to the collection view.
{% endhint %}
Here’s how to trigger your [Smart Actions](https://docs.forestadmin.com/documentation/actions/create-and-manage-smart-actions#what-is-a-smart-action) directly from your Smart Views.
{% tabs %}
{% tab title="template.hbs" %}
```markup
```
{% endtab %}
{% tab title="component.js" %}
```javascript
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { triggerSmartAction } from 'client/utils/smart-view-utils';
export default class extends Component {
@action
triggerSmartAction(...args) {
return triggerSmartAction(this, ...args);
}
@action
deleteRecords(...args) {
return deleteRecords(this, ...args);
}
}
```
{% endtab %}
{% endtabs %}
`triggerSmartAction` function imported from `'client/utils/smart-view-utils'`has the following signature:
```javascript
function triggerSmartAction(
context, collection, actionName, records, callback = () => {}, values = null,
)
```
| Argument name | Description |
| ------------- | ----------------------------------------------------------------------------------------------------------------------- |
| context | Context is the reference to the component, in the smart view it is accessible through the keyword `this` |
| collection | The `collection` that has the Smart Action |
| actionName | The Smart Action name |
| records | An array of records or a single one |
| callback | A function executed after the smart action that takes as the single parameter the result of the smart action execution. |
| values | An object containing the values to be passed for the smart action fields |
Here is an example of how to trigger the smart action with the values passed from the code, you only need to do it if you **don't** want to use the built-in [smart action form](https://docs.forestadmin.com/documentation/reference-guide/actions/create-and-manage-smart-actions/use-a-smart-action-form)
{% tabs %}
{% tab title="template.hbs" %}
```markup
```
{% endtab %}
{% tab title="component.js" %}
```javascript
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { triggerSmartAction } from 'client/utils/smart-view-utils';
import { tracked } from '@glimmer/tracking';
export default class extends Component {
@tracked newTime = '11:00';
@action
triggerSmartAction(actionName, records, values) {
return triggerSmartAction(
this,
this.args.collection,
actionName,
records,
() => {},
values
);
}
@action
rescheduleToNewTime(record) {
this.triggerSmartAction('Reschedule', record, { newTime });
}
@action
deleteRecords(...args) {
return deleteRecords(this, ...args);
}
}
```
{% endtab %}
{% endtabs %}
#### 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. |
### 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**
{% hint style="info" %}
As of today, it's **not** possible to set different views for your table/summary/related data views.
{% endhint %}