User Guide document contains more detailed information about using Dynamic Dashboards. You may also use user guide as a startup.

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" /> 
    </form>
    
  • A sample view of Vs.Net should be like this:

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 create.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 create.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
    
  • Siwtch 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!