NF10 Status Line As Dashboard Widget

From iDempiere en


Goal: UX/Functional

Developer: cloudempiere, Takacs Peter, Design: Norbert Bede Review: Hengsin Low

Feature Ticket: IDEMPIERE-5393


Quick Info was implemented to define data source with SQL Statement and define HTML through System Message. Read More.


This feature allows to define Dashboard Content with the previously defined status lines.

Select existing status line
Select existing status line

Usage: Display and visualise iDempiere data with customisable HTML to the Dashboard as a Widget.

Example Use-case: The next example illustrates Today Revenue in KPI style. (todo: replace image fake data)

Kpi widget by status line
KPI widget by status line


Status Line field was added on Dashboard Content

Tips and Tricks for KPI like status line

this section explain how to setup a typical KPI style indicator

The result


Create new system message:

 1<div class="kpi-title">
 2            <div class="kpi-arrow {2,choice,-1#kpi-arrow-down kpi-data-negative|0#kpi-arrow-right|0<kpi-arrow-up kpi-data-positive}"></div>
 3            {2,number,#.#} %
 4        </div>
 5<div class="kpi-text">Order
 6            Count</div>
 7        <div class="kpi-sub-text">
 8            Last Month: {1}</div>
 9        <div class="kpi-sub-text">
10            Current Month: {0}</div>

note: the choice clause add classes which change color of arrow-up/down

register new dsp file in theme.css.dsp:

<c:include page="fragment/gadget-kpi.css.dsp" />

create new dsp file gadget-kpi.css.dsp

.kpi-arrow {
	border: solid;
	border-width: 0 3px 3px 0;
	display: inline-block;
	padding: 3px;
	text-align: center;
	vertical-align: middle;

.kpi-arrow-up {
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);

.kpi-arrow-down {
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);

.kpi-arrow-right {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);

.kpi-data-negative {
	color: red;

.kpi-data-positive {
	color: green;

.kpi-title {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 35px;
	font-weight: bold;
	text-align: center;
	padding: 5px;
	padding-bottom: 10px;

.kpi-text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	text-align: center;
	padding: 5px;

.kpi-sub-text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-align: center;
	padding: 5px;
	color: grey;

.kpi-inline {
	display: inline;

create status line with the next SQL

 2  ROUND (SUM(orders) FILTER (WHERE kpidata.month = date_trunc('month', now())),0)::numeric as orders_MTD ,
 3  ROUND (SUM(orders) FILTER (WHERE kpidata.month = date_trunc('month', now() - INTERVAL '1 month')),0)::numeric orders_MTD_P,
 4  round((SUM(orders) FILTER (WHERE kpidata.month = date_trunc('month', now())) / SUM(orders) FILTER (WHERE kpidata.month = date_trunc('month', now() - INTERVAL '1 month')) - 1) * 100, 2)::numeric as diff
 8   DATE_TRUNC('month',dateordered) AS month,
 9  COUNT(c_order_id) AS orders
10FROM c_order 
11where ad_client_id=@#AD_Client_ID@ and issotrx='Y' 
12GROUP BY month
13) kpidata
Cookies help us deliver our services. By using our services, you agree to our use of cookies.