News

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.

Published Aug 08 2017, 02:33 AM by
Bookmark and Share

Comments

Alexandre Henzen

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

August 13, 2017 7:19 PM

La Tona Marco

aa

August 21, 2017 4:39 AM

Roland Trost

Where could I find DevExpress.Dashboard.DashboardControl Documentation API

August 23, 2017 6:37 AM

Roland Trost

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

August 24, 2017 6:17 AM

La Tona Marco

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.

August 29, 2017 11:56 PM

Robert Busch

oRACLE CONNECTION DOES NOT WORK

September 15, 2017 4:13 PM

Sergi (DevExpress Support)

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?

September 25, 2017 1:28 AM
LIVE CHAT

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, ASP.NET, WinForms, HTML5 or Windows 10, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2017 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners