CTP: Client-Side Web Dashboard - Ready for Angular, Knockout, Vue, and more

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.

DevExpress Dashboard HTML Client-Side Rendering

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.

7 comment(s)

We are looking forward for Dashboard Designer/Viewer Angular 4 (typescript ) and also Report Designer/Viewer as well.

13 August, 2017

aa

21 August, 2017

Where could I find DevExpress.Dashboard.DashboardControl Documentation API

23 August, 2017

In firefox the edit mode is not showing the icons for dragging and icons for components to be placed

24 August, 2017

Sorry for my latest comment here. That was a mistake.

We are very happy about the client-side Dashboard and looking Forward for dashboard designer in Angular 4 with custom items.

29 August, 2017

oRACLE CONNECTION DOES NOT WORK

15 September, 2017

Hello,

Please pardon our delayed response.

@Roland Trost

At the current CTP stage, we do not provide official documentation for the Web Dashboard created using the client-side approach. We will consider publishing it in the future. For now, I suggest that you refer to the www.devexpress.com/scid=T543243 KB article to see general configuration of the client-side dashboardControl. As for your second question, I see that you already posted a corresponding ticket to our Support Center.

@Robert Busch

We need to research this issue to provide you with a precise answer. Would you please submit a ticket to our Support Center and describe the issue in greater detail?

25 September, 2017

Please login or register to post comments.