Built-in provider SQLDashboardProvider uses Microsoft SQL Server to retrieve and persist metadata. In this tutorial we will use SQLDashboardProvider.

  1. Using project references window (Inside solution explorer window, right click on References and click Add Reference menu item) add reference to JDash.SqlProvider.dll. Assembly can be found inside installation directory (by default C:\Program Files\Kalitte\JDash\Bin directory).
  2. Rebuild your project. If this step fails you may not be able to create metadata at design time.
  3. Using SQL Server Management Studio create new database.
  4. Return to Visual Studio and add a connection string to web.config for the database you setup on previous step. Ensure connection string has the necessary authentication information for connecting to the database.
  5. Open DisplayDashboard.aspx in design view, select ResourceManager control and using smart tag of the control, click JDash Settings menu item.
  6. Select the connection string and click Create Metadata button. This will create the necessary tables on your database. Alternatively you can use Get Script button to get the SQL scripts and manually execute the scripts.

Below is a sample screen shot of set settings dialog.

  1. Open Microsoft Visual Studio.Net or your preferred IDE.
  2. Create a new Asp.Net Web Application project and add a new page i.e. DisplayDashboard.aspx.
  3. Using Toolbox (if not visible use Ctrl-Alt-X key combination to open it) drop ScriptManager (Inside Ajax Extensions tab), then ResourceManager control (Inside Jdash.Net tab) on the page. Settings dialog will be displayed automatically for the first time. Close settings dialog.
  4. Finally, drop DashboardView control on to page, after ResourceManager control. Please note control order should be 1 ScriptManager, 2 ResourceManager and then other controls like DashboardView.

Below is a sample screenshot of the page.

In this step you will be creating your first dashlet with a dashlet editor.

  1. Using solution explorer window, select the project and right click. Create a directory named JDash and create another directory Dashlets inside JDash directory. You may choose using other names for directories although this is the recommended setup.
  2. Select Dashlets directory. Right click, using Add New Item dialog, add two Asp.Net user controls named HtmlDashlet.ascx and HtmlDashletEditor.ascx inside Dashlets directory.
  3. Implement these controls as you like. In this tutorial we will be implementing an Html Dashlet.
  4. Open HtmlDashlet.ascx and drop an Asp.Net Literal control.

    <asp:Literal runat="server" ID="htmlLit"></asp:Literal>

  5. Implement your dashlet. Below code block shows a sample. Basically, it tries to get the html configuration value set by user and renders it.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using JDash.WebForms;

    namespace HelloWorld.JDash.Dashlets
    {
        public partial class HtmlDashlet : System.Web.UI.UserControl
        {
          private DashletContext context;

          [JEventHandler(JEvent.InitContext)]
          public void InitContext(object sender, JEventArgs args)
          {
             this.context = args.Event.Parameters.Get<DashletContext>("context");
          }

          public override void DataBind()
          {
              var htmlString = context.Model.config.Get<string>("html", "");
              htmlLit.Text = htmlString;
              context.RenderDashlet();
              base.DataBind();
          }
       }
    }

  6. Open HtmlDashletEditor.ascx. Drop a DashletTitleEditor and DashletStylesList control using Toolbox, JDash tab. Finally add a Textbox. Content of HtmlDashletEditor.ascx should be like this.
  7. <jdash:DashletTitleEditor ID="DashletTitleEditor1" runat="server" />
    <jdash:DashletStylesList ID="DashletStylesList1" runat="server" />
    <asp:TextBox ID="htmlInput" runat="server" Rows="5" TextMode="MultiLine"></asp:TextBox>

  8. Implement your dashlet editor.
  9. using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using JDash.WebForms;

    namespace HelloWorld.JDash.Dashlets
    {
        public partial class HtmlDashletEditor : System.Web.UI.UserControl
        {
           DashletContext context = null;

           public override void DataBind()
           {
              htmlInput.Text = context.Model.config.Get<string>("html", "");
              base.DataBind();
           }

           [JEventHandler(JEvent.InitContext)]
           public void InitContext(object sender, JEventArgs args)
           {
              this.context = args.Event.Parameters.Get<DashletContext>("context");
           }

           [JEventHandler(JEvent.ValidateDashletEditor)]
           public void ValidateDashletEditor(object sender, JEventArgs args)
           {
              context.Model.config["html"] = htmlInput.Text;
              context.SaveModel();
              context.DashletControl.DataBind();
           }
        }
    }

  10. Now it is time to register your first dashlet. Select ResourceManager control and use smart tag of the control to open Management Portal. This is the application where you will define your dashlets.
  11. Click Dashlet Modules and create a new one. Note we just set a title, user control path for dashlet and editor control path.

In this step you will create a sample dashboard management page.

  1. Using project references window add reference to JDash.dll which can be found inside installation directory (by default C:\Program Files\Kalitte\JDash\Bin directory).
  2. Add a new Asp.Net page to your project (i.e. ManageDashboards.aspx). Using this page you will be creating and viewing dashboards.
  3. Drop an Asp.Net Textbox, Button and Repeater control on the page. Below list shows a sample markup. This page basically lists current dashboards and allows user to click to a dashboard to view it. Note we use query string to pass id of clicked dashboard.

    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="dashTitle" runat="server"></asp:TextBox>
        <asp:Button ID="createBtn" runat="server" Text="Create Dashboard" OnClick="createBtn_Click" /><br />
        <asp:Label Text="Dashboards" runat="server" /><br />
        <asp:Repeater runat="server" id="listRepeater">
           <ItemTemplate>
              <asp:HyperLink runat="server" Target="_blank" Text='<%# Eval("title") %>' NavigateUrl='<%# string.Format("/DisplayDashboard.aspx?id={0}", Eval("Id")) %>'></asp:HyperLink> <br />
           </ItemTemplate>
        </asp:Repeater>
    </div>
    </form>

  4. Inside page load handler bind current dashboards to repeater.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using JDash;
    using JDash.Models;

    ...

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
           listRepeater.DataSource = JDashManager.Provider.SearchDashboards().data;
           listRepeater.DataBind();
        }
    }

  5. Inside click handler of button, create a new dashboard.

    protected void createBtn_Click(object sender, EventArgs e)
    {
        var newDashboard = new DashboardModel()
        {
           title = dashTitle.Text
        };
        JDashManager.Provider.CreateDashboard(newDashboard);
        listRepeater.DataSource = JDashManager.Provider.SearchDashboards().data;
        listRepeater.DataBind();
    }

Final step is to add basic design functionality to DisplayDashboard.aspx.

  1. Open DisplayDashboard.aspx file, add an update panel and repeater. Repeater will be used to list dashlet modules and user will click a dashlet module to add it to dashboard. Please note we have changed UserDesignMode property of DashboardView control.

    <form id="form1" runat="server">
        <div>
           <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
           <jdash:ResourceManager ID="ResourceManager1" runat="server" />
           <asp:UpdatePanel runat="server">
              <ContentTemplate>
                 <asp:Repeater runat="server" id="modulesList" OnItemCommand="modulesList_ItemCommand">
                    <ItemTemplate>
                       <asp:LinkButton runat="server" Text='<%# Eval("title") %>' CommandArgument='<%# Eval("id") %>'></asp:LinkButton>
                    </ItemTemplate>
                 </asp:Repeater>
              </ContentTemplate>
           </asp:UpdatePanel>
           <jdash:DashboardView ID="myDashboard" UserDesignMode="full" runat="server" />
        </div>
    </form>

  2. On page load handler, use query string parameter to get id of dashboard which should be loaded by DashboardView control. We also bind dashlet modules to repeater.

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack && !string.IsNullOrEmpty(Request.QueryString["id"]))
        {
            myDashboard.DashboardId = Request.QueryString["id"];
            myDashboard.DataBind();
            modulesList.DataSource = JDashManager.Provider.SearchDashletModules().data;
            modulesList.DataBind();
        }
    }

  3. Final step is to create a dashlet.

    protected void modulesList_ItemCommand(object source, RepeaterCommandEventArgs e)
    {
        var moduleId = e.CommandArgument.ToString();
        var module = JDashManager.Provider.GetDashletModule(moduleId);
        var newDashlet = new DashletModel(module);
        myDashboard.CreateDashlet(newDashlet);
    }

All done and everything is automatically managed by JDash.Net framework. You may create as many as dashlets you want.