Other Resources

Prepare your workspace

  • Open Visual Studio.
  • Add a new web application project using File | New Project | Asp.Net Web Application menu.
  • Open default.aspx in designer add an Asp.Net Script Manager, Kalitte Script Manager and DashboardSurface control. Source code of default.aspx should be like this. You can just copy.
    <form id="form1" runat="server"> <asp:ScriptManager
                ID="ScriptManager2" runat="server"> </asp:ScriptManager>
                <kalitte:ScriptManager ID="ScriptManager1" runat="server">
                </kalitte:ScriptManager> <kalitte:DashboardSurface ID="DashboardSurface1"
                runat="server" ShowDashboardListPanel="true" /> 
    
    </form>
    
  • A sample view of Vs.Net should be like this:

  • Web.Config file will be populated automatically after dashboard surface added.
  • 		<configuration>
    		  <configSections>
    		    <section name="KalitteDashboardFramework" type="Kalitte.Dashboard.Framework.Configuration.DashboardFrameworkSection, Kalitte.Dashboard.Framework, Version=3.6.0.0, Culture=neutral, PublicKeyToken=006de035aafd395a" />
    		  </configSections>
    		  <system.webServer>
    		    <handlers />
    		    <modules>
    		      <remove name="DirectRequestModule" />
    		      <add name="DirectRequestModule" preCondition="managedHandler"
    		          type="Kalitte.Dashboard.Framework.Modules.RequestModule, Kalitte.Dashboard.Framework, Version=3.6.0.0, Culture=neutral, PublicKeyToken=006de035aafd395a" />
    		    </modules>
    		  </system.webServer>
    		  <KalitteDashboardFramework>
    		    <providers>
    		      <add authorizationEnabled="false" name="SQLDashboardProvider"
    		          type="Kalitte.Dashboard.Framework.Providers.SQLDashboardProvider,Kalitte.Dashboard.Framework" />
    		      <add authorizationEnabled="false" name="SessionDashboardProvider"
    		          type="Kalitte.Dashboard.Framework.Providers.SessionDashboardProvider,Kalitte.Dashboard.Framework" />
    		      <add authorizationEnabled="false" name="AccessDashboardProvider"
    		          type="Kalitte.Dashboard.Framework.Providers.AccessDashboardProvider,Kalitte.Dashboard.Framework" />
    		    </providers>
    		  </KalitteDashboardFramework>
    		  <system.web>
    		    <!--If you are using IIS7 and IIS7+,remove httpModules and httpHandlers sections-->
    		    <!--sections start-->
    		    <httpModules>
    		      <add name="DirectRequestModule" type="Kalitte.Dashboard.Framework.Modules.RequestModule, Kalitte.Dashboard.Framework" />
    		    </httpModules>
    		    <httpHandlers>
    		      <add path="dashboard.axd" verb="GET,HEAD" type="Kalitte.Dashboard.Framework.Handlers.DashboardHandler"
    		          validate="false" />
    		    </httpHandlers>
    		    <!--sections end-->
    		    <compilation debug="true" targetFramework="4.0" />
    		  </system.web>
    		</configuration>
    
  • If you are using IIS7 and IIS7+, remove httpModules and httpHandlers sections.
  • Configure Dashboard Provider

    • To add a database connection to your project, open project properties window and select settings tab. Create a setting, set its type to (Connection String) and name it as mysqlserver. Click elipsis (...) button on end of Value column and specify a valid SQL Server database. Don't forget to test your connection.
    • Open default.aspx in designer and select DashboardSurface control. Click Provider Settings menu item.

    • Set Application Name property to DashboardApp, select your connection string and click Save Selected Provider Settings.
    • Click Create Meta Data button. This will create SQL Server tables and your provider is ready!
    • Click OK to close the design time editor.

    Create your first widget!

    • Using Project | Add New Item menu item, add a new user control to your project and name it as mywidget.ascx.
    • Add an Asp.Net Update Panel control to your user control and set its UpdateMode to Conditional.
    • Add a Label control inside the update panel.
    • Open mywidget.ascx.cs (Vb.Net: Select mywidget.ascx and right click. Click View Code) and add IWidgetControl interface to mywidget class. This will provide you to capture widget commands. Paste the below code.

      C#

      #region IWidgetControl Members
      public void Bind(WidgetInstance instance) {
        Label1.Text = string.Format("Bound at {0}", DateTime.Now);
      }
      public UpdatePanel[] Command(WidgetInstance instance, Kalitte.Dashboard.Framework.WidgetCommandInfo commandData, ref UpdateMode updateMode) {
                  switch (commandData.CommandType)
                  {
                      case Kalitte.Dashboard.Framework.WidgetCommandType.Refresh:
                          {
                              Label1.Text = string.Format("Refreshed at {0}", DateTime.Now);
                              return new UpdatePanel [] { UpdatePanel1 };
                          }
                      default: return null;
                  }
              }
      public void InitControl(Kalitte.Dashboard.Framework.WidgetInitParameters parameters) {}
      #endregion
      

      VB.NET

      Imports Kalitte.Dashboard.Framework.Types
      Imports Kalitte.Dashboard.Framework
      
      Partial Public Class mywidget
          Inherits System.Web.UI.UserControl
          Implements IWidgetControl
          Public Sub Bind(ByVal instance As WidgetInstance) Implements IWidgetControl.Bind
              Label1.Text = String.Format("Bound at {0}", DateTime.Now)
          End Sub
          Public Sub InitControl(ByVal parameters As WidgetInitParameters) Implements IWidgetControl.InitControl
          End Sub
          Public Function Command(ByVal instance As WidgetInstance, ByVal commandData As WidgetCommandInfo, ByRef updateMode As UpdateMode) As UpdatePanel() Implements IWidgetControl.Command
              Select Case commandData.CommandType
                  Case WidgetCommandType.Refresh
                      Label1.Text = String.Format("Refreshed at {0}", DateTime.Now)
                      Return New UpdatePanel() {UpdatePanel1}
                  Case Else
                      Return Nothing
              End Select
          End Function
      End Class
      
      

    Create your first dashboard!

    • Add a new web page named CreateDashboard.aspx to your web application project using Add | New Item | Web Form menu.
    • Add an Asp.Net button and label into CreateDashboard.aspx.
    • Inside click handler of button, create a sample dashboard and display its key. Just copy and paste the below code.

      C#

      Kalitte.Dashboard.Framework.Types.DashboardInstance instance = new Kalitte.Dashboard.Framework.Types.DashboardInstance() {
          InstanceKey = Guid.NewGuid(),
          Title = "My First Dashboard",
          Username = Thread.CurrentPrincipal.Identity.Name,
          Height = 500
      };
      instance.CreateDefaultRows();
      Kalitte.Dashboard.Framework.DashboardFramework.CreateDashboard(instance);
      Label1.Text = string.Format("Your newly created dashboard's key is: {0}",  instance.InstanceKey);
      
      VB.NET
          Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
              Dim instance As DashboardInstance = New DashboardInstance()
              instance.InstanceKey = Guid.NewGuid()
              instance.Title = "My First Dashboard"
              instance.Username = Thread.CurrentPrincipal.Identity.Name
              instance.Height = 500
              instance.CreateDefaultRows()
              Kalitte.Dashboard.Framework.DashboardFramework.CreateDashboard(instance)
              Label1.Text = String.Format("Your newly create dashboard's key is: {0}", instance.InstanceKey)
          End Sub
      

    • Select CreateDashboard.aspx file in solution explorer window, right click and click Set as Start Page.
    • Run your project, click button to create a dashboard and copy the key displayed as a label.

    Add your widget to the repository

    • Open default.aspx in designer.
    • Select Dashboard Surface control and set its DashboardKey property to the value of your newly created dashboards key. What this means is saying Dashboard surface control "Your dashboard is this one".
    • Paste the below code to the load handler (Page_Load) of default.aspx

      C#

      protected void Page_Load(object sender, EventArgs e){
        if (!Page.IsPostBack)
            DashboardSurface1.DataBind();
      }
      

      VB.NET

      Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
         If Not Page.IsPostBack Then
            DashboardSurface1.DataBind()
         End If
      End Sub
      
    • Switch to Design View, select DashboardSurface1 control and click Widget Types menu item to add your newly created widget to repository.

    • Select default.aspx file in solution explorer window, right click and click Set as Start Page.

    All done! Start playing with your widget!