Skip to main content

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>