Synapcus Dashboards and Dashlets

You can configure your own dashboards in Synapcus. The dashboard is a XPage you can call (for example from a navigator) where the informations is shown in dahlets. A dashlet is a box of inforamtion you can freely configurate in JavaScript. The dashlet has an client side JavaScript section (where you define the layout) and a server side JavaScript section (where you define the data source).

{  
   'name':'qDashboardSales_de',
   'dass':[  
      {  
         'idx':'5',
         'hdr':'Offene Rechnungen (Debit)',
         'bdy':'/xaGetDynamicHTML.xsp?module=dhtml&name=qDashletInvsDebitOpen_de',
         'style':'width:220px'
      },
      {  
         'idx':'6',
         'hdr':'Offene Rechnungen (Kredit)',
         'bdy':'/xaGetDynamicHTML.xsp?module=dhtml&name=qDashletInvsCreditOpen_de',
         'style':'width:220px'
      }
   ]
}

The dashlet definition can use Synapcus intern client side java script client libraries as also third part libraries (which must be included). A typical dashlet definition for showing textual data could be:
1. HTML section for the dashlet:
[CDATA[
<table class="qDashletInner">
	<tr>
		<td class="qDashletLabel">
			<a href="#[getFullPath]/xpFinance_InvoicesDebit.xsp">Anzahl:</a>
		</td>
		<td align="right">
			<span class="qDashletNumber">#[invsOpenCnt]</span>
			</td>
	</tr>
	<tr>
		<td class="qDashletLabel">
			<a href="#[getFullPath]/xpFinance_InvoicesDebit.xsp">Geplante:</a>
		</td>
		<td align="right">
			<span class="qDashletNumber">#[invsPlanAmt]</span></span>
			<span>€</span>
		</td>
	</tr>
	<tr>
		<td class="qDashletLabel">
			<a href="#[getFullPath]/xpFinance_InvoicesDebit.xsp">Gestellte:</a>
		</td>
		<td align="right">
			<span class="qDashletNumberGreen">#[invsMadeAmt]</span>
			<span>€</span>
		</td>
	</tr>
	<tr>
		<td class="qDashletLabel">
			<a href="#[getFullPath]/xpFinance_InvoicesDebit.xsp">Betrag offen:</a>
		</td>
		<td align="right">
			<span class="qDashletNumber">#[invsOpenAmt]</span>
			<span>€</span>
		</td>
	</tr>
</table>]]
Be aware to the ‚#[var]‘ variables as defined in HTML. This variables will be substituded in the SSJS-Part of the dashlet, like described in the SSJS-Section.

2. Server Side JavaScript (SSJS) section for the dashlet
This code snippet shows the implementation of the dashboard for „Offene Rechnungen (Debit)“. In a similar way you can configure also the dashlet „Offene Rechnungen (Kredit)“. All the #[var] variables i.e. #[invsOpenCnt], #[invsPlanAmt], #[invsMadeAmt], #[invsOpenAmt] will bereplaced in SSJS before rendering the Dashboard page.
var vw = database.getView( 'tblInvs_debit');
var d = vw.getFirstDocument();
var cnt = 0;
var summPlan = 0;
var summMade = 0;
var summ = 0;
while( d) {					
   var st = d.getItemValueDouble( 'inv_state');
   var vl = d.getItemValueDouble( 'inv_netto_value');
   if( st == 100) {     
      summPlan += vl;
      summ += vl;
      cnt++;
   } else if( st == 200) { 
      summMade += vl;
      summ += vl;
      cnt++;
   }
   d = vw.getNextDocument( d);
}
sHtml = sHtml.replace( '#[invsOpenCnt]', cnt);
sHtml = sHtml.replace( '#[invsPlanAmt]', NumberConverter.numberToString( summPlan, '###,###.##'));
sHtml = sHtml.replace( '#[invsMadeAmt]', NumberConverter.numberToString( summMade, '###,###.##'));
sHtml = sHtml.replace( '#[invsOpenAmt]', NumberConverter.numberToString( summ, '###,###.##'));
In another code snippet we will see how to embed external client side JS libraries (for example d3js or similar) and draw some charts in the dashlets.