# Customizing the Dashboard The home page of a ng-admin application is called the Dashboard. Use it to show important pieces of information to the end user, such as latest entries, or charts. ## Default Dashboard By default, the dashboard page shows one panel per entity, ordered from left to right according to the order in which the entities were added to the application. Each panel contains a list of latest entries for the entity, based on the fields definition of the `listView` , and limited to 3 fields to avoid screen clutter. ## Dashboard Configuration If the default Dashboard doesn't suit your needs, create a custom dashboard configuration: ```js admin.dashboard(nga.dashboard() .addCollection(collection) .addCollection(collection) .addCollection(collection) ); ``` The dashboard configuration defines the dashboard datasources, using `Collection` definitions. To create a collection for an entity, simply call `nga.collection(entity)`. On each collection, you can define the same type of settings as in a `listView`: title, fields, number of rows (`perPage()`), sorting order (`sortField()` and `sortDir()`), and list actions. In addition, you can customize the position of the collection in the dashboard using the `order()` function: ```js admin.dashboard(nga.dashboard() .addCollection(nga.collection(post) .name('recent_posts') .title('Recent posts') .perPage(5) // limit the panel to the 5 latest posts .fields([ nga.field('published_at', 'date').label('Published').format('MMM d'), nga.field('title').isDetailLink(true).map(truncate), nga.field('views', 'number') ]) .sortField('published_at') .sortDir('DESC') .order(1) ) .addCollection(nga.collection(post) .name('popular_posts') .title('Popular posts') .perPage(5) // limit the panel to the 5 latest posts .fields([ nga.field('published_at', 'date').label('Published').format('MMM d'), nga.field('title').isDetailLink(true).map(truncate), nga.field('views', 'number') ]) .sortField('views') .sortDir('DESC') .order(3) ) .addCollection(nga.collection(comment) .title('Last comments') .perPage(10) .fields([ nga.field('created_at', 'date') .label('Posted'), nga.field('body', 'wysiwyg') .label('Comment') .stripTags(true) .map(truncate) .isDetailLink(true), nga.field('post_id', 'reference') .label('Post') .map(truncate) .targetEntity(post) .targetField(nga.field('title').map(truncate)) ]) .sortField('created_at') .sortDir('DESC') .order(2) ) .addCollection(nga.collection(tag) .title('Tags publication status') .perPage(10) .fields([ nga.field('name'), nga.field('published', 'boolean').label('Is published ?') ]) .listActions(['show']) .order(4) ) ); ``` You can add any number of collections you want, even several collections per entity (e.g. to show most commented posts and posts waiting for publication). As soon as you define a custom dashboard configuration, it will replace the default dashboard based on all entities and listViews. If you just need to remove one panel from the default dashboard layout, you have to write a custom dashboard configuration from the ground up. ## Dashboard Template The default dashboard template iterates over all the collections, and displays them from left to right and from top to bottom. If you want to change the size of a particular dashboard panel, or if you want to add panels other than a datagrid, you have to write the dashboard template and set it in the dashboard: ```js admin.dashboard(nga.dashboard() .template(templateString) ); ``` Here is a copy of the default dashboard template, which you can use as a starting point for a custom dashboard template: ```html