Universal Windows Platform (UWP)

Overview

The Syncfusion Dashboard Platform SDK includes a Dashboard Viewer HTML 5 control that can be embedded within your Universal Windows Platform (UWP) application.

System Requirements:

To work with UWP, the following IDE can be used for development that are compatible with Microsoft Windows, both 32bit and 64bit Operating System in Windows 10

Microsoft Visual Studio 2015 or higher.

Getting Started

Configure Syncfusion Dashboard Viewer Component in UWP Application:

The following steps helps to create a UWP application by embed the Dashboard Viewer component.

Open Visual Studio 2015, Create a new project and select Universal Template in Windows group under Visual C# category, type your application name and Click OK.

DashboardSDK UWP Project Selection

Select the Target version of your Windows SDK as in below example image and Click OK. Refer here for more detail.

DashboardSDK UWP Select TargetVersion

Once project created, copy HTML folder (To place the font, script and theme files) from the below location and paste into your application and change the property ‘Build action’ as ‘Content’ and ‘Copy to Output Directory’ as ‘Copy if newer’ for the entire content of HTML folder.

%localappdata%\Syncfusion\Dashboard Platform SDK\Getting Started Samples\Common\Html

DashboardSDK UWP AddingHelperFiles

Go to MainPage.xaml and add a WebView and provide suitable name.

ASPX-CS

<Page
    
    x:Class="DashboardViewerDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DashboardViewerDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <WebView x:Name="dashboardViewerWebView" />
    </Grid>
    </Page>

Go to MainPage.xaml.cs and generate the HTML string to render Dashboard Viewer and save it as an HTML file in the installed location. Do the following steps:

Step 1: Include the following namespaces:

using System;
    using System.Collections.Generic;
    using System.Text;
    using System.Threading.Tasks;
    using Windows.Storage;
    using Windows.Storage.Streams;
    using Windows.UI.Popups;
    using Windows.UI.Xaml.Controls;

Step 2: Declare the constants inside MainPage class:

private const string BeforeHeadHtml = "<!DOCTYPE html>\n"
                                          + "<html xmlns=\"http://www.w3.org/1999/xhtml\" style=\"width:100%; height:100%;\">\n"
                                          + "<head>\n"
                                          + "<meta charset=\"utf-8\" content=\"width=device-width, initial-scale=1.0\">"
                                          + "<script>window.destroyAll = function(){try{ej.widget.destroyAll($('.e-js').off());}catch(e){} $(document.body).html('-'); CollectGarbage(); }; </script>";
    private const string serviceUrlString = "https://dashboardsdk.syncfusion.com/DashboardService/DashboardService.svc";
    private const string dashboardFilePath = "https://dashboardsdk.syncfusion.com/Dashboards/WorldWideCarSalesDashboard.sydx";

NOTE

The above two lines has demo links for both Dashboard Service and Dashboard file. Provide your valid URL of Dashboard Service and Dashboard (SYDX) file path in the highlighted lines.

To know how to host the Dashboard Service Refer Binding Dashboard Service

Step 3: Generate the HTML string to embed the Dashboard Viewer MainPage class:

private string GetHtmlString()
        {
            var jsFiles = new List<string>
            {
                "jquery-1.10.2.min.js",
                "jquery.easing.1.3.min.js",
                "ej.dashboardViewer.all.min.js"
            };

            var cssFiles = new List<string>
            {
				"default-theme/ej.dashboardViewer.all.min.css"
            };


            var headSb = new StringBuilder();
            foreach (var item in jsFiles)
            {
                //headSb.Append("<script src=\"ms-appx-web:///Html/scripts/" + item + "\" type=\"text/javascript\"></script>");
                headSb.Append("<script src=\"Html/scripts/" + item + "\" type=\"text/javascript\"></script>");
            }
            foreach (var item in cssFiles)
            {
                //headSb.Append("<link href=\"ms-appx-web:///Html/themes/" + item + "\" rel=\"stylesheet\"></link>");
                headSb.Append("<link href=\"Html/themes/" + item + "\" rel=\"stylesheet\"></link>");
            }
            var htmlSb = new StringBuilder();
            htmlSb.Append(BeforeHeadHtml);
            htmlSb.Append(headSb);
            htmlSb.Append("</head>\n");
            htmlSb.Append(GetViewerString());
            htmlSb.Append("</html>");
            return htmlSb.ToString();
        }

        private string GetViewerString()
        {
            var viewerString = "$('#dashboard').ejDashboardViewer({serviceUrl: '" + serviceUrlString +
                            "', dashboardPath: '" +
                            dashboardFilePath.Replace(@"\", @"\\") +
                            "',filterParameters:location.search.substr(1)});";
            var stringBuilder = new StringBuilder();
            stringBuilder.Append("<body style=\"width:100%; height:100%;overflow:hidden;\">");
            stringBuilder.Append("<div id=\"dashboard\" style=\"width:100%; height:100%;\" />");
            stringBuilder.Append("<script type=\"text/javascript\" language=\"javascript\">");
            stringBuilder.Append(viewerString);
            stringBuilder.Append("</script>");
            stringBuilder.Append("</body>");
            return stringBuilder.ToString();
        }

Step 4: Write the generated string as an HTML file and Navigate the URI value of HTML file location inside the MainPage class:

StorageFolder installedLocation;
        Uri htmlUri;        
        public MainPage()
        {
            this.InitializeComponent();
            Windows.ApplicationModel.Package package = Windows.ApplicationModel.Package.Current;
            installedLocation = package.InstalledLocation;
            FillHtmlUriFromInstalledLocation();
            this.dashboardViewerWebView.Navigate(htmlUri);
        }

        #region Get URL of HTML file
        private async void FillHtmlUriFromInstalledLocation()
        {
            string htmlFileName = string.Empty;
            var task = Task.Run(async () => { htmlFileName = await GetUrlOfHtmlFromInstalledLocation(); });
            task.Wait();

            htmlUri = new Uri("ms-appx-web:///" + htmlFileName);
        }
        private async Task<string> GetUrlOfHtmlFromInstalledLocation()
        {
            try
            {
                byte[] htmlAsBytes = System.Text.Encoding.UTF8.GetBytes(GetHtmlString());

                StorageFile file = await installedLocation.CreateFileAsync("Dashboard.html", CreationCollisionOption.GenerateUniqueName);
                using (IRandomAccessStream fileStream = await file.OpenAsync(FileAccessMode.ReadWrite))
                {
                    using (IOutputStream outputStream = fileStream.GetOutputStreamAt(0))
                    {
                        using (DataWriter dataWriter = new DataWriter(outputStream))
                        {
                            dataWriter.WriteBytes(htmlAsBytes);
                            await dataWriter.StoreAsync();
                            dataWriter.DetachStream();
                        }

                        await outputStream.FlushAsync();
                    }
                }
                return file.Name;
            }
            catch (Exception ex)
            {
                await new MessageDialog(ex.Message, "Error").ShowAsync();
            }
            return null;
        }
        #endregion

Binding Dashboard Service

To initiate the dashboard service instance you can follow anyone of the below methods

IMPORTANT

Hosting dashboard service at IIS is recommended for the production environment for object management and other memory management features.

Finally compile your project, after successful compilation then press F5 key to deploy and Run your project.

Dashboard SDK UWP Output