Ever since we released the Web Dashboard, we've been getting questions about integration into HTML Single-Page Apps. Such apps would allow end-users to design, store and view their Dashboards - all the functionality you expect from server-side ASP.NET and MVC apps. Although not officially supported, that was possible, but also required a tricky and undocumented implementation.
We are on track to publish built-in HTML apps support with v17.2, with the preview version ready for testing today. The Web Dashboard can now be rendered on the client-side, while having data fed to it by an ASP.NET MVC / Web API back-end. This means you can:
- Integrate a dashboard into any place that supports HTTP requests. For example, we've created a GitHub Page containing Web Dashboard.
- Publish Web Dashboard as part of applications based on Angular, Knockout, Vue and similar frameworks.
- Use the Dashboard side-by-side with DevExtreme client-side widgets.
Download Our Latest Update and Give It a Try
The new functionality is available in our recent v17.1.5 release, so first download the update. Once you've installed the new version, you can find detailed instructions on setting up both the server and client sides in the following KB article:
https://www.devexpress.com/kbid=T532254
The following code, part of that KB Article, shows how you'll render your Dashboard on the client:
<head><!-- ... --><link href="/Content/dx.dashboard-control.bundle.css" rel="stylesheet" /><script src="/Content/dx.dashboard-control.third-party.min.js"></script><script src="/Content/dx.dashboard-control.bundle.min.js"></script><script>
window.onload = function () {
// Adds required HTML resources to the DOM.
DevExpress.Dashboard.ResourceManager.embedBundledResources();
// Creates a new Web Dashboard control with specified settings.
var dashboardControl = new DevExpress.Dashboard.DashboardControl(document.getElementById("web-dashboard"), {
// Configures an URL where the Web Dashboard's server-side is hosted.
endpoint: "/api/dashboard"
});
// Renders the created dashboard.
dashboardControl.render();
};
</script></head><body><div id="web-dashboard" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0"></div></body>Let Us Know What You Think
Once again, this is a CTP version. Report any issues, missing functionality, or suggestions as regular Support Center tickets. We'll be happy to review your feedback and optimize the API based on what we hear. This also serves as a reminder that the API is subject to change until we officially release, which we plan to do with v17.2.
Speaking of feedback, we'd also appreciate if you answer a few questions below. And if you have any questions to us, don't hesitate to leave a comment below.