How can I create an arbitrary html widget for Dashboards?

Question

How can I create an arbitrary html widget for Dashboards?

Answer

1. Create a module with the following code:

define("UsrMySimpleWidget", ["ext-base", "terrasoft", "sandbox", "BaseFiltersGenerateModule",
"UsrMySimpleWidgetResources"], function(Ext, Terrasoft, sandbox, BaseFiltersGenerateModule, resources) {
 
           function getViewModel() {
                return Ext.create("Terrasoft.BaseViewModel", {
                     entitySchema: "Activity",
                     methods: {
                           getChart: function(key) {
                                sandbox.publish("GenerateChart", key);
                           },
                           load: function() {
                           }
                     }
                });
           }
 
           function generateMainView(renderTo) {
 
                var resultConfig = Ext.create("Terrasoft.Container", {
                     id: "tableOtchetMetkiParamContainer",
                     selectors: {
                           wrapEl: "#tableOtchetMetkiParamContainer"
                     },
                     renderTo: renderTo
                });
                return resultConfig;
           }
 
           function fillDom() {
                var htmlAdded = "<div>hello world!</div>";
                Ext.get("tableOtchetMetkiParamContainer").setHTML(htmlAdded);
           }
 
           var render = function(renderTo) {
 
                var viewConfig = generateMainView(renderTo);
                var viewModel = getViewModel();
 
                fillDom();
 
                viewConfig.bind(viewModel);
                viewConfig.render(renderTo);
           };
 
           return {
                schema: "Activity",
                methods: {
 
                },
                userCode: function() {
 
                },
                init: function() {
 
                },
                filterChanged: function(filter, eOpts) {
 
                },
                render: render
           };
     }
);

2. Add the widget to the Dashboard panel and select the schema created above.