--- title: "Customize your first application further" description: "In this tutorial you'll discover advanced features of the visual app builder to customize the visual aspects of a simple application" url: https://docs.ovhcloud.com/en/guides/public-cloud/data-platform/tutorials-customize-first-app lang: en lastUpdated: 2026-09-14 --- > For AI agents: the complete documentation index is available at https://docs.ovhcloud.com/en/llms.txt, the full documentation bundle is available at https://docs.ovhcloud.com/en/llms-full.txt. # Customize your first application further ## Objective In this tutorial you'll discover advanced features of the visual app builder to **customize the visual aspects** of a simple application. :::info This tutorial contains extended content for the _Getting Started_ section called [Build and deploy a front-end application](https://docs.ovhcloud.com/en/guides/public-cloud/data-platform/getting-started-visualize-data.md). ::: ## Requirements This tutorial assumes that you have been through **all five sections** of the [Getting Started tutorial](https://docs.ovhcloud.com/en/guides/public-cloud/data-platform/landing-page-getting-started.md). Your Data Processing Engine, your Lakehouse Manager, your Analytics Manager have been configured as described in their respective pages, and you have deployed an API as well as an APP which you are going to customize. ## Create a more advanced chart First, let's discover one more chart type: a horizontal bar chart to show the top 7 stations in terms of total traffic. Instead of choosing a query that has already been prepared in the Analytics Manager, you can also **create new queries on the fly** when creating a chart. To do this, shrink down the first panel and **create** a second one next to it. ![Application Services](/images/public-cloud/data-platform/getting-further/app-manager/picts/create-other-panel.png) Inside the second panel, click on the ➕icon and select **HTML**. Name it _Top 7 Stations_ with style **H1**. ![Application Services](/images/public-cloud/data-platform/getting-further/app-manager/picts/create-other-html.png) Inside the second panel, click on the ➕icon and select Chart. Pick the _Recharts - Bar Horizontal_ type. ![Application Services](/images/public-cloud/data-platform/getting-further/app-manager/picts/create-other-chart.png) In the Request tab, choose the _Request_ mode and enter _rides_ as data (Sum and Descending) and _station\_name_ as scale. ![Application Services](/images/public-cloud/data-platform/getting-further/app-manager/picts/create-other-chart2.png) ![Application Services](/images/public-cloud/data-platform/getting-further/app-manager/picts/create-other-chart3.png) One last step! Queries can be fully customized using the advanced JSON editor. More specifically, you need to add a custom parameter to **limit the number** of stations to 7. To do that, head to the advanced mode of your query as shown below and simply add `"limit":7,` below line 2 in the "data" JSON object: ![Application Services](/images/public-cloud/data-platform/getting-further/app-manager/picts/query-advanced.png) So far, your dashboard should look something like this. Don't forget to **save**. ![Application Services](/images/public-cloud/data-platform/getting-further/app-manager/picts/chart-intermediate-new.png) ## Customizing further There is a lot that you can do in the app builder to design your app exactly the way you want it. ### Units Click on the **play** button at the top of the dashboard to switch to read-only mode. Hover over the bars of the _Top 7 stations_ chart. ![Application Services](/images/public-cloud/data-platform/getting-further/app-manager/picts/show-units.png) These units could be formatted in millions for better clarity. To do that, go to the **Formatter** tab. A measure called _RIDES_ was already added by choosing the Getting Started template. :::info More generally, if you need to add a new measure, it must have the **same name as the attribute** that you are trying to format. ::: ![Application Services](/images/public-cloud/data-platform/getting-further/app-manager/picts/new-formatter.png) As for the formatting parameters, enter _Mpax_ for unit, _0_ for round (to display integers), and _0.000001_ for multiplicator (to display millions). :::info The Formatter runs in autosave mode: your changes are saved as you type, and there is no Save button to click. ::: ![Application Services](/images/public-cloud/data-platform/getting-further/app-manager/picts/formatter-round.png) Here's the result: ![Application Services](/images/public-cloud/data-platform/getting-further/app-manager/picts/formatter-round2.png) ## Rebuild and deploy the new version of your app One last step: publish the recent dashboard changes to production. To do this, don't forget to save and then go back to the **Overview** tab of the Application Manager. You should first **Stop** the currently deployed application. As soon as it has shut down, click on **Build**, and then **Deploy**. :::info The **build** process usually takes a couple of minutes. If you're curious of what is going on or if the build fails: open the log console by expanding the version panel and inspect the logs. Feel free to send logs to our support team if you're not sure how to troubleshoot it yourself! ::: Your app is **live** and can now be accessed online!\ The link can be obtained in the Overview tab by clicking on **Open**. ![Application Services](/images/public-cloud/data-platform/getting-further/app-manager/picts/open-app.png) ![Application Services](/images/public-cloud/data-platform/getting-further/app-manager/picts/dashboard-final-new.png) Your figures are now available in the application. **You've completed the Advanced application builder tutorial!** You are now ready to build complex data applications on the Platform. Obviously, you can come back to this tutorial at any time! We encourage you to check out the rest of the documentation to dive deeper into a specific component of the product when needed. Also, don't hesitate to **get in touch** if you need anything, our support & product team is dedicated to helping you deliver faster any AI applications your have in mind. ## Looking for more flexibility? The visual app builder is great for getting started quickly, but if you are a developer looking for **full control over your application code**, we provide additional templates built with modern front-end frameworks. These templates connect to the same Front API and let you build fully custom applications using your own development workflow. [Build a custom app with React, Vite & Shadcn](https://docs.ovhcloud.com/en/guides/public-cloud/data-platform/tutorials-app-development-react-shadcn.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/en-gb/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/).