Example extension
Introduction
The example extension showcases the HTML components and the basic functionality available for building application extensions.
Creating the extension
Feature policy
Here is the feature policy for this extension - we use the same feature (odsl.example.test) for all extension views
fp = FeaturePolicy()
fp.id = "extension.odsl.example"
fp.description = "Show odsl Example extension views"
fp.features = ["odsl.example.test"]
fp.addMember("*")
fp.deny = false
fp.enabled = true
save fp
Extension manifest
e = Extension()
e.id = "odsl.example"
e.publisher = "odsl"
e.code = "example"
e.name = "Example Extension"
e.icon = "hexagon"
e.description = "A simple extension showcasing the HTML components etc."
e.tags = ["EXAMPLE"]
e.resources.script.install = "odsl-extensions\extensions\example\odsl.example.install"
e.resources.script.upgrade = "odsl-extensions\extensions\example\odsl.example.upgrade"
e.resources.script.uninstall = "odsl-extensions\extensions\example\odsl.example.uninstall"
e.resources.policy = ["extension.odsl.example"]
v = e.addView("Example")
v.section = "Extensions"
v.name = "Example"
v.tabname = "Main"
v.excel = false
v.insights = true
v.feature = "odsl.example.test"
v.icon = "hexagon"
v.script = "odsl-extensions\extensions\example\odsl.example.test"
v = e.addView("Lists")
v.section = "Extensions"
v.name = "Example"
v.tabname = "Apps"
v.appname = "HTML List Components"
v.description = "An example of list components"
v.excel = false
v.feature = "odsl.example.test"
v.icon = "list"
v.script = "odsl-extensions\extensions\example\odsl.example.lists"
v = e.addView("Chart")
v.section = "Extensions"
v.name = "Example"
v.tabname = "Chart"
v.appname = "HTML Chart Component"
v.description = "An example of charts"
v.excel = false
v.feature = "odsl.example.test"
v.icon = "graph-up"
v.script = "odsl-extensions\extensions\example\odsl.example.chart"
v = e.addView("Grid")
v.section = "Extensions"
v.name = "Example"
v.tabname = "Apps"
v.appname = "HTML Grid Component"
v.description = "An example of the grid component"
v.excel = false
v.feature = "odsl.example.test"
v.icon = "table"
v.script = "odsl-extensions\extensions\example\odsl.example.grid"
save e
Scripts
The install, upgrade and uninstall scripts are here for example only.
Install script
print "Installing ODSL Example Extension"
Upgrade script
print "Upgrading ODSL Example Extension"
Uninstall script
print "Un-Installing ODSL Example Extension"
Views
Test
This view doesn't use any ODSL components, it displays a weather widget from weatherwidget.io
<h1>ODSL Example Extension</h1>
<h2>Weather Widget</h2>
<a
class="weatherwidget-io"
href="https://forecast7.com/en/51d51n0d13/london/"
data-label_1="LONDON"
data-label_2="WEATHER"
data-theme="original" >LONDON WEATHER
</a>
<script>
!function(d,s,id) {
var js,fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id)) {
js=d.createElement(s);
js.id=id;
js.src='https://weatherwidget.io/js/widget.min.js';
fjs.parentNode.insertBefore(js,fjs);
}
}(document,'script','weatherwidget-io-js');
</script>
Lists
This view shows how to use the odsl-list-panel component
{{>#odsl-extension}}
<div class="container-fluid h-100 d-flex flex-column extension">
<div class="row h-50 p-1">
<div class="col w-50 h-100 p-1">
<odsl-list-panel name="Public Extensions" service="extension" source="public"></odsl-list-panel>
</div>
<div class="col w-50 h-100 p-1">
<odsl-list-panel name="Reports" service="reportconfig" source="public"></odsl-list-panel>
</div>
</div>
<div class="row flex-grow-1 p-1">
<div class="col w-50 h-100 p-1">
<odsl-list-panel name="Public Objects" service="object" source="public"></odsl-list-panel>
</div>
<div class="col w-50 h-100 p-1">
<odsl-list-panel name="Private Objects" service="object" source="private"></odsl-list-panel>
</div>
</div>
</div>
Chart
This view shows how to use:
It also shows how you can configure a chart to use the odsl-range-selector automatically.
{{>#odsl-extension}}
<div class="container-fluid h-100 d-flex flex-column extension">
<div class="row h-100 p-1">
<div class="col w-50 h-100 p-1">
<odsl-list-panel
name="TimeSeries"
service="data"
source="public"
filter='{"_type":{"$in":["VarTimeSeries","VarEVentTimeSeries","VarSmartTimeSeries"]}}'
onchange="document.getElementById('series').setAttribute('key', event.detail.id)"
>
</odsl-list-panel>
</div>
<div class="col w-50 h-100 p-1 d-flex flex-column">
<div class="flex-shrink-1">
<odsl-range-selector
id="rs"
ranges='["last7","last30","thismonth","lastmonth","thisyear","lastyear"]'>
</odsl-range-selector>
</div>
<div class="flex-shrink-1">
<odsl-chart-panel title="Example Chart" service="data" source="public" rangeselector="rs">
<odsl-chart-axis axis=0 type="datetime"></odsl-chart-axis>
<odsl-chart-series id="series"></odsl-chart-series>
</odsl-chart-panel>
</div>
</div>
</div>
</div>
Grid
This view shows how to use:
It also shows how you can configure a list panel to interact with a grid panel.
{{>#odsl-extension}}
<div class="container-fluid h-100 d-flex flex-column extension">
<div class="row flex-grow-1 p-1">
<div class="col-4 h-100 p-1">
<odsl-list-panel
id="objects"
name="Favourites"
service="group"
filter='{"type":"Favourites","service":"object"}'
onchange="document.getElementById('properties').setAttribute('group', event.detail.id);">
</odsl-list-panel>
</div>
<div class="col-8 h-100 p-1">
<odsl-grid-panel id="properties" service="object" source="all" group="none">
<odsl-grid-column field="_id" headername="ID" flex=2></odsl-grid-column>
<odsl-grid-column field="name" headername="Name" flex=3></odsl-grid-column>
<odsl-grid-column field="description" headername="Description" flex=4></odsl-grid-column>
<odsl-grid-column field="location" headername="Location" flex=2></odsl-grid-column>
</odsl-grid-panel>
</div>
</div>
</div>