How to create new widgets

In this section we will explain how to create new widgets in Sefarad, or import existing ones. First of all you must create a new directory inside elements, and move inside all your widget files.

elements/dashboard-mywidget

Afterwards, you have to create a new tab in left menu inside index.html file, and create a new section where your widget will me shown.

...
<a data-route="my_widget_route" href="/my_widget_route">
    <iron-icon icon="your_widget_icon"></iron-icon>
    <span>My Widget</span>
</a>
...
<section data-route="my_widget_route">
    <dashboard-mywidget></dashboard-mywidget>
</section>
...

Finally, complete the routing.html and elements.html located inside elements directory.

routing.html

...
page('/my_widget_route',function(){
	app.route = 'my_widget_route';
    });
...

elements.html

<link rel="import" href="../bower_components/my_component/my_component.html">
<link rel="import" href="dashboard-mywidget/index.html">

Remember to add your Polymer plugins to bower_components directory if not included yet. Edit css if necessary.

After following these steps, build up Sefarad environment and you should visualize your widget successfully