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
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