TK.Dashboard

{
    _: TK.Dashboard,
    style: {
        width: "625px",
        minHeight: "415px",
        backgroundColor: "#ccc"
    },
    DashboardItems: [
        {
            _: "window.TK.DashboardTemplates.Text",
            State: {
                Text: "This is a text dashboard item"
            }
        },
        {
            _: "window.TK.DashboardTemplates.Text",
            State: {
                Text: "This is a text dashboard item 2"
            }
        },
        {
            _: "window.TK.DashboardTemplates.Text",
            State: {
                Text: "This is a text dashboard item 3"
            }
        }
    ]
}

Save and load state

The state can be saved and restored. The dashboard items have to be stateful.

{
    Elements: {
        Dashboard: {
            _: TK.Dashboard,
            style: {
                width: "625px",
                minHeight: "415px",
                backgroundColor: "#ccc"
            }
        },
        AddTextButton: {
            onclick: function() {
                this.Near("Dashboard").AddDashboardItem({
                    _: window.TK.DashboardTemplates.Text,
                    Text: "Random number: " + Math.random()
                }, null, null, null, 2, 1); 
                // AddDashboardItem(template, name, left, top, width, height)
            }
        },
        SaveTextButton: {
            onclick: function() {
                this.Near("CurrentStateInput").value = this.Near("Dashboard").Save();
            }        
        },
        LoadTextButton: {
            onclick: function() {
                this.Near("Dashboard").Load(this.Near("CurrentStateInput").value);
            }        
        },
        CurrentStateInput: {}
    }
}

Drag and drop dashboard new elements

{
    Elements: {
        Dashboard: {
            _: TK.Dashboard,
            EnableDrop: true,
            style: {
                width: "625px",
                minHeight: "415px",
                backgroundColor: "#ccc"
            }
        },
        Text: {
            _: TK.DragDrop,
            innerHTML: "Drag me!",
            ElementTemplate: {
                _: TK.DashboardTemplates.Text,
                Text: "This is a text dashboard item",
                Width: 3
            },
            HoverTemplate: {
                innerHTML: "Text block"
            }
        }
    }
}