locked
Add a BI Dashboard to the HTML Client RRS feed

  • General discussion

  • Syncfusion ( http://www.syncfusion.com/products/dashboard )  has just released a BI Dashboard.

    To make it work inside the Lightswitch HTML Client do the following

    Download the Syncfusion Dashboard Platform SDK and Dashboard Designer from http://www.syncfusion.com/downloads/dashboard

    Follow the install instructions get an Evaluation Licence or get a Community License from

    http://www.syncfusion.com/products/communitylicense

    Install the Dashboard service

    Run the command prompt as administrator

    Type the following pressing enter after each line

    cd \

    cd C:\Program Files (x86)\Syncfusion\Dashboard Platform SDK\Utilities\Windows Service

    WindowsServiceInstaller.bat

    HTML Project Project

    Create a Lightswitch HTML Project (call it Dashboard)  

    Scripts and CSS

    Copy the folders from inside the Dashboad samples HTML folder %localappdata%\Syncfusion\Dashboard\Samples\Common\Html

    Paste it to the root of your HTML Client (right click on Dashboard.HTML Client select Open Folder in File Explorer then paste folders)

    Right click on each of new folders fonts and themes and select “Include In Project”

    In the scripts folder include the following scripts if not already included in the Project (as above)   

    jquery-1.10.2.min.js

    jquery.globalize.min.js

    jquery.easing.1.3.min.js

    ej.dashboardViewer.all.min.js

    Default.htm

    Open the default.htm and add the following lines

    Above the </head> add the following

        <link href="Content/ej/responsive-css/ejgrid.responsive.css" rel="stylesheet" />

        <link href="themes/bootstrap.css" rel="stylesheet" />

        <link href="Content/ej/web/default-theme/ej.widgets.all.min.css" rel="stylesheet" />

        <link href="themes/ej.DashboardViewer.css" rel="stylesheet" />

        <link href="themes/e-Card.css" rel="stylesheet" />

        <link href="themes/dashboard-themes/light/ej.DashboardViewer.css" rel="stylesheet" />

        <link href="themes/dashboard-themes/light/lightcontroltheme.css" rel="stylesheet" />

        <link href="themes/default-theme/ej.theme.min.css" rel="stylesheet" />

        <link href="themes/default-theme/ej.pivotgridcustomtheme.css" rel="stylesheet" />

    </head>

    Add the following lines above this line <script type="text/javascript" src="Scripts/Generated/generatedAssets.js"></script>

    <script src="scripts/jquery-1.10.2.min.js"></script>

    <script src="scripts/jquery.easing.1.3.min.js"></script>

    <script src="scripts/jquery.globalize.min.js"></script>

    <script src="scripts/ej.dashboardViewer.all.min.js"></script>  

    Dashboard

    Create a folder in the Html Client Project called Dashboard

    This is for the dashboard file (.sydx)(Use a sample file or create your own) Call it Dashboard.sydx

    Include the dashboard file (.sydx) in the project and set the Package Action to Content and Copy to Output   Copy always

    Web Api Controller Classes

    In the Dashboard.Server Project

    Add a New Folder and call it api

    DashboardPathController.cs

    Add to this folder a new Web API and call it DashboardPathController.cs

    Replace all the code with the following

    using System.Web.Http;

    namespace LightSwitchApplication.api

    {

        public class DashboardPathController : ApiController

        {

            // GET api/<controller>

            public  string Get()

            {

                return System.Web.Hosting.HostingEnvironment.MapPath("~/HTMLClient/DashBoard");

            }

          

        }

    }

    ServiceURLController.cs

    Add another Web API to the api folder and call it ServiceURLController.cs

    Replace all the code with the following

    using Microsoft.Win32;

    using System;

    using System.Web.Http;

    namespace LightSwitchApplication.api

    {

        public class ServiceURLController : ApiController

        {

            

            public string Get()

            {

                return GetWindowsServiceUrl();

            }

            private string GetWindowsServiceUrl()

            {

                string url = string.Empty;

                try

                {

                    RegistryKey key = Registry.LocalMachine.OpenSubKey(@"Software\SyncfusionDashboard\Syncfusion Dashboard Service");

                    if (key != null)

                    {

                        url = (string)key.GetValue("ServiceURL");

                        key.Close();

                    }

                }

                catch (Exception)

                { }

                return url;

            }

        }

    }

    Global.asax

    Add a Global.asax 

    Add the following references

    using System.Web.Routing;

    using System.Web.Http;

    under Application_Start

    add RouteTable.Routes.MapHttpRoute(

           name: "DefaultApi",

           routeTemplate: "api/{controller}/{id}",

           defaults: new { id = System.Web.Http.RouteParameter.Optional }

           );

    HTML Client Screen

    Add a Browse Screen with no Screen Data  

    Custom Control

    Add a Custom Control leave the data set to Screen

    Change Label Position to None

    Width: Stretch to Container

    Height: Fixed Size

    Pixtels: 800

    Custom Control Code

    Add the following code click on “Edit PostRender Code”

       $(element).append('<div id="dashboard" style="height:100%; width:100%;" ></div>');

        var ServiceURL = '';

        var DashboardPath = '';

        var DashboardName = 'DashboardName.sydx'

        msls.promiseOperation(GetServiceURL).then(function PromiseSuccess(PromiseResult) {

            ServiceURL = PromiseResult;

            msls.promiseOperation(GetDashboardPath).then(function PromiseSuccess(GetDashboardPathResult) {

                DashboardPath = GetDashboardPathResult + '\\' + DashboardName;

     

                $('#dashboard').ejDashboardViewer({

                    url: ServiceURL,

                    report: DashboardPath,

                    reportName: 'Dashboard',

                    reportDescription: 'Dashboard Report',

                    enableExport: true,

                    enablePrint: true

                });

                 

            });

        });

    Change the following line to be the name of your dashboard

    var DashboardName = 'DashboardName.sydx'

    Add the following code below

    function GetDashboardPath(operation) {

        $.ajax({

            type: 'get',

            data: {},

            url: '../api/DashboardPath',

            success: operation.code(function AjaxSuccess(AjaxResult) {

                operation.complete(AjaxResult);

            })

        });

    };

    function GetServiceURL(operation) {

        $.ajax({

            type: 'get',

            data: {},

            url: '../api/ServiceURL',

            success: operation.code(function AjaxSuccess(AjaxResult) {

                operation.complete(AjaxResult);

            })

        });

    };

    Press F5 and hopefully you will have a working Dashboard project

    Monday, November 9, 2015 8:03 AM

All replies

  • Great post!  +1
    Monday, November 9, 2015 9:59 PM
  • Yes, great post indeed, thanks for sharing!

    Regards, Xander. My Blog

    Monday, November 9, 2015 10:26 PM
  • Thanks. This looks great.

    A Fleet

    Tuesday, November 10, 2015 9:47 AM
  • Mountkiwi,

    Thanks for the example but having an issue the viewer does not render.

    In your instructions you say the screen code goes in the PostRender event of the customcontrol, Or That is how ir interpreted what you said.

    When I build a browse screen and the add a customcontrol to the group tab there is not post_render option there is for the tab is that what is needed.  Tried the code in the render option but that did not work what am I missing?

    Thanks,

    Bill


    W. T. Washburn

    Thursday, November 12, 2015 9:21 PM
  • Hi Bill
    Yes it is the render event on the custom control
    Set a breakpoint on the following code
      
              $('#dashboard').ejDashboardViewer({
                    url: ServiceURL,
                    report: DashboardPath,
                    reportName: 'Dashboard',
                    reportDescription: 'Dashboard Report',
                    enableExport: true,
                    enablePrint: true
                });

    Then check that ServiceURL is something like http://localhost:3000/DashboardService.svc
    and DashboardPath  something like C:\Dashboard\bin\Debug\HTMLClient\DashBoard\DashboardName.sydx
    If they are correct download Fiddler and check for errors
    Hopefully this will pinpoint the problem
    Friday, November 13, 2015 1:03 AM
  • MountKiwi,

    Thanks for the reply put code in render event and found  a step that I missed.  It Now work and looks great in debug using the CarSales Sample Dashboard next step is to publish LS app to a azure site

    Thanks

    Bill


    W. T. Washburn

    Friday, November 13, 2015 3:33 PM