> For the complete documentation index, see [llms.txt](https://docs.valtimo.nl/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.valtimo.nl/v12/features/dashboard/dashboard-1/creating-a-custom-dashboard.md).

# Custom dashboards

Valtimo provides the possibility to introduce your own dashboard and add functionality to your project.\
The following example will provide details on how you can introduce your own custom dashboard.

#### Creating an angular component

To use a custom dashboard you must first create a component to hold both the functionality and user interface.\
First create a package under 'src/app/' and then create an angular component such as the example below

```typescript
import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-dashboard',
    templateUrl: './dashboard.component.html',
    styleUrls: []
})
export class DashboardComponent implements OnInit {

    constructor() { }

    ngOnInit(): void {
    }

}
```

Create the html file that will serve your user interface. Note that the name of the file must be the same as in the templateUrl property in the example above.

More information on angular components can be found [here](https://angular.io/guide/component-overview#creating-a-component)

```html
<div style="display: grid;grid-template-columns: auto auto auto;"> 
  <div style="text-align: center"><h1>Hello world!</h1></div> 
  <div style="text-align: center"><h1>Hallo Wereld!</h1></div> 
  <div style="text-align: center"><h1>Olá mundo!</h1></div>  
</div>
```

#### Routing

Valtimo already provides an off the shelf dashboard which must first be overridden in order for your custom dashboard to be used.\
To achieve that you can import and declare the route as in the example below.

For more details on routing follow this [link](https://angular.io/guide/router-reference#configuration)

```typescript
import {DashboardComponent} from './custom-components/dashboard/dashboard.component';

const routes: Routes = [{
  path: '',
  component: DashboardComponent,
  data: {title: 'My Custom Dashboard', roles: ['ROLE_USER']},
  canActivate: [AuthGuardService]
}];
```

The path variable in the example above is the key for overriding components. As it stands the default Valtimo dashboard exists under the root path so the value must be an empty string.\
The title property can be defined, and it will be shown in the header of the page, and the roles defines which role can access the page (more on roles [here](/v12/features/dashboard/dashboard-1/creating-a-custom-dashboard.md))

#### Declaring the component

In order for your component to be used by the application you must import and declare it in 'app.module.ts'

```typescript
@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent
  ]
})
```

![Custom Dashboard](/files/CyDdvgYkzonO5sYk7dDd)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.valtimo.nl/v12/features/dashboard/dashboard-1/creating-a-custom-dashboard.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.