Page History

...

Create <omk_dir>/templates/public/jsexample.html.ep

Add the html content:

Code Block

language	xml
title	jsexample.html.ep

%# JS 
%= javascript begin
var templateHtml;
$(document).ready(function(){

	$("#sortable li").addClass("drop").bind('mousedown',function(){
		templateHtml = $("#sortable").html();
	});
	$("#sortable").sortable();
	$("#droppable").droppable({
		activeClass: 'active',
		hoverClass:'hovered',
		accept:".drop",
		drop:function(event,ui){
			$("#sortable").sortable('destroy').html(templateHtml);
			$("#sortable").sortable();
			$("#sortable li").addClass("drop").bind('mousedown',function(){
				templateHtml = $("#sortable").html();
			});
			alert(ui.draggable.text());
		}
	});
	
});
% end
%# CSS Style
<style type="text/css">
	#sortable li{
		clear:both;
		float:left;
        margin: 10px;
	}

	#droppable {
		clear:both;
		height:100px;
		width:100px;
		background-color:#DEC9F0;
        margin: 40px;
        padding: 20px;
	}
	#droppable.active {
		background-color:#CFC;
	}
	#droppable.hovered {
		background-color:#CCF;
	}
</style>

<ul id="sortable">
<li id="one"><span class="label label-success">Success</span></li>
<li id="two"><span class="label label-danger">Danger</span></li>
<li id="three"><span class="label label-warning">Warning</span></li>
<li id="four"><span class="label label-primary">Secondary</span></li>
<li id="five"><span class="label label-info">Info</span></li>
<li id="six"><span class="label label-light">Light</span></li>
</ul>

<div id="droppable">
<center>Drop me Here</center>
</div>

Create <omk_dir>/lib/json/opCharts/components.d/jsexample_component.json

Code Block

language	js
title	wikipediajsexample_component.json

{
  "name": "WikipediaJavascript Example Component",
  "ep_template_file": "public/jsexample",
  "options": {
    "titleText": "Javascript Example"
  },
  "type": "ep_template"
}

Restart omkd daemon:
Code Block
language js
title console
sudo service omkd restart
Go to our Server Views/Dashboards: http://ourserver/en/omk/opCharts/dashboards and Add a New Dashboard.
Select Data Source Type> opCharts. We will select our new component, Javascript Example.
We will see our new Dashboard:

...

Space shortcuts

Page tree

Versions Compared

Old Version 10

New Version Current

Key