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:

  

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

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!