--- title: "Build application dashboards with graphical components" description: "The Platform allows you to create custom analytics applications using a set of graphical components made available" url: https://docs.ovhcloud.com/de/guides/public-cloud/data-platform/app-services-apps-dashboards lang: de lastUpdated: 2026-09-14 --- > For AI agents: the complete documentation index is available at https://docs.ovhcloud.com/de/llms.txt, the full documentation bundle is available at https://docs.ovhcloud.com/de/llms-full.txt. # Build application dashboards with graphical components ## Objective The Platform allows you to create custom analytics applications using a set of graphical components made available. The **management and organization of the restitution** is centralized in the _Dashboard_ tab of an application. This tab lets you list, add, and edit dashboards that can contain various types of content: - Graphical representations from different extensions installed in the application - Dynamic parameter that can be linked to graphics to make the data displayed interactive - Static texts - Blocks with tabs, to go from one graphic representation to another for the same data for example - Blocks that can also contain different types of content with or without display condition - Pop-ins activated at the click of the user - Code integration specific to the current Project :::warning The Dashboard tab will only be available once the application is deployed. ::: ## Create your first dashboard (in point & click) Before you begin, you must first have an application already deployed. To do this, you can start from the ReactJS - Dashlab application, for example, and use automatic build and deployment. In this example, the screenshots were made from the same application theme. ### Main screen and dashboard creation To get started, go to the Overview screen of your application. ![Overview app](/images/public-cloud/data-platform/product/app-manager/dashboard/picts/app_overview.png) From this screen, select "Dashboard" ![Dashboards](/images/public-cloud/data-platform/product/app-manager/dashboard/picts/app_dashboards.PNG) From this screen, you will be able to create new dashboards, delete them, edit them, etc. For the moment we will focus on creating a new dashboard. 1. Select "New Dashboard" on your screen. 2. Give it a name, for example: "My first dashboard". The url of this dashboard (visible in the url once the application in production), will be filled automatically. You can edit it, just kept in mind that it must be unique, two dashboards cannot have the same url. The description field is optional and will allow you to better document your applications. We will not (intentionally) go through the "advanced" mode, it is an option to modify the default behavior of the dashboard. This default mode is perfect for a first time, so we don't have to change it. ## Edit your new dashboard ### Add a link to your dashboard Once the dashboard is created, you can enter the editor mode by hovering over the new block and clicking on "Edit". ![Add a link to your dashboard — Edit dashboard](/images/public-cloud/data-platform/product/app-manager/dashboard/picts/edit_dashboard.PNG) You have a "Full Screen" mode available at the top right of the page, all screenshots will be made from this mode for the next steps of this tutorial. ![Add a link to your dashboard — App dashboard empty](/images/public-cloud/data-platform/product/app-manager/dashboard/picts/app_dashboard_empty.png) Your dashboard is empty! and more importantly, if you were not already on the page, there is no link to get to that dashboard. So first, we need to create a link in the menu to go to the dashboard. To do this, use the "+" button, in the left column. Select "Basic UI" and then "Link". You will then arrive on a link editor. ![Add a link to your dashboard — App dashboard editor link](/images/public-cloud/data-platform/product/app-manager/dashboard/picts/app_dashboard_editor_link.png) You can enter a text (which will be displayed on the screen), in our example: "My first dashboard". In the url field, if you did not change it in the previous step, select: "my-first-dashboard". Also select "Navigation" to switch to active, this allows the link to change color, when it is the active page. The rest of the fields are optional but let you customize further your link. In this example we will just add "fa fa-dashboard" in "Icon", this corresponds to an icon of the library [Font Awesome 4](https://fontawesome.com/v4.7.0/icons/). Once validated, your link will appear in the menu on the left! ![Add a link to your dashboard — App dashboard link](/images/public-cloud/data-platform/product/app-manager/dashboard/picts/app_dashboard_link.png) ### Add a chart to your dashboard Your page is still empty: your first thought could be to add a graphic, and you would be right... but in order to make everything "prettier" we will start by adding a "panel". This will allow us to have our charts on a white background, instead of the "gray" background of the application. To do this, click on the "+" at the top of the screen. ![Add a chart to your dashboard — App dashboard add panel](/images/public-cloud/data-platform/product/app-manager/dashboard/picts/app_dashboard_add_panel.png) Select "Container" and then "Panel". Then expand your "panel" via the arrows available when hovering your mouse over it. ![Add a chart to your dashboard — App dashboard panel resize](/images/public-cloud/data-platform/product/app-manager/dashboard/picts/app_dashboard_panel_resize.png) Select the "+" of this panel, then "Chart" to add your first graph inside this "panel". ## Configuring a chart :::details Chart editor tabs ### Type You will then come to a chart editor. You first need to select a chart type. For our example, we will select "Morris - Donut" :::info Morris is an open source library, the donut it provides is pretty good, but the customization of it is low. ::: ![Type — App chart editor](/images/public-cloud/data-platform/product/app-manager/dashboard/picts/app_chart_editor.png) ### Options A new tab has just appeared! This is the "Options" tab. This tab is not always present, some libraries do not always offer (yet) click customization. In this tab, we can customize our donut's colors. The default template being colorful enough, modify the colors if you wish, but it is not necessary. ### Queries In this tab, we will be able to link our graph to a query made in the [Analytics Manager](https://docs.ovhcloud.com/de/guides/public-cloud/data-platform/landing-page-analytics-manager.md). If you've ever tried to do this, click on "Select a Query". If not, choose "Custom Query" and create a query directly via the interface. To display a "nice donut", the ideal would be a single "Data", and a single "Scale". In my example, I want to reduce a turnover. ### Infos In this section, we will be able to give a name and description to our chart (optional). Enter for example: "My first chart", in the field name. You will also find "Linked Dynamic Parameter". This configuration will allow you soon to connect your graph to a datepicker or a selectbox, so as to dynamically filter the data displayed by the graph. ### Advanced mode This advanced mode allows you to directly edit the configuration JSON file of your chart. All previously used screens are related to this JSON, and we do not yet have an interface to perform all possible configurations via this JSON. Validate, and your graph will be displayed! ::: [Next article: Style](https://docs.ovhcloud.com/de/guides/public-cloud/data-platform/app-services-apps-style.md) ## Go further If you need training or technical assistance to implement our solutions, contact your sales representative or click on [this link](https://www.ovhcloud.com/de/professional-services/) to get a quote and ask our Professional Services experts for a custom analysis of your project. Ask questions, give your feedback and interact directly with the team building the Data Platform on the dedicated [Discord channel](https://discord.gg/ovhcloud). If you need support with your OVHcloud services, create a request in our [Help Centre](https://help.ovhcloud.com/csm?id=csm_get_help). Join our [community of users](https://community.ovhcloud.com/).