Basics
Javascript
JavaScript
define(["css!./app.css"], function () {
function App(options) {
options.el.innerHTML = '<div class="basic"><div class="hello">Hello World</div></div>';
}
return App;
});
App is called with a number of parameters.
|
Parameter |
Description |
|---|---|
|
el |
A DOM element into which the component can be rendered |
|
Component interface to interact with KX Dashboards view states, data sources, etc. |
CSS
Copy app.css from the Basic project into a css folder created in www/modules/Basic
CSS
.basic {
text-align: center;
font-size: 2em;
}
Component Definition
Open components.json in the www folder and add a component definition.
JSON
{
"id": 10001,
"componentName": "Basic",
"componentDescription": "Simple component",
"size": [400,600],
"appKey": "Basic/main",
"listViewThumb": "<i class=\"fa fa-fw fa-smile-o\" />"
},
|
parameters |
definition |
|---|---|
|
id |
A unique identifier, required for legacy purposes |
|
componentName |
The name shown in the panel |
|
componentDescription |
The description shown in the panel |
|
size |
Define tile size, set to 400 x 600 |
|
appKey |
The path given to RequireJS to load the component, relative to the www/modules/ folder |
|
listViewThumb |
The icon displayed in the panel; can be any HTML element, e.g. |