# Create a Gallery view
{% 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 %}
## Create a Gallery view
{% tabs %}
{% tab title="Ember" %}
{% code title="Component" %}
```javascript
import Component from '@glimmer/component';
import { action } from '@ember/object';
import {
triggerSmartAction,
deleteRecords,
getCollectionId,
loadExternalStyle,
loadExternalJavascript,
} 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);
}
}
```
{% endcode %}
{% endtab %}
{% tab title="React" %}
{% code title="Component" %}
```jsx
import React from 'react';
import WithEmberSupport from 'ember-react-components';
import { inject as service } from '@ember/service';
@WithEmberSupport
export default class extends React.Component {
@service router;
render() {
const {
records,
collection,
numberOfPages,
recordsCount,
currentPage,
searchValue,
isLoading,
fetchRecords,
} = this.props;
const goBack = () => {
if (currentPage > 1) {
return fetchRecords({ page: currentPage - 1 })
}
};
const goNext = () => {
if (currentPage < numberOfPages) {
return fetchRecords({ page: currentPage + 1 })
}
};
const redirectToRecord = (record) => this.transitionTo(
'project.rendering.data.collection.list.view-edit.details',
collection.id,
record.id,
);
return (