Page Comparison

Overview

Dashboard components are used within a dashboard to display a graphical representation of the business data. 

Getting Started

Component XML File

Dashboard component file should follow the structure below and use the defined Tags.

<?xml version="1.0" encoding="UTF-8"?><dashboardcomponent xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../xsd/dashboards.xsd">
	<title></title>
	<iconclass></iconclass>
	<ejb></ejb>
	<method></method>
	<type></type>
	<orientation></orientation>
	<xaxislabel></xaxislabel>
	<yaxislabel></yaxislabel>
	<settings>
		<setting>
			<id></id>
			<label></label>
			<classname></classname> 
		</setting>
	</settings>
	<summarypage></summarypage> 
	<summarypageparameters>
		<summarypageparameter>
			<name></name>
			<classname></classname>
			<field></field> 
			<axis></axis>
		</summarypageparameter> 
	</summarypageparameters>
	<columns>
		<column>
			<label></label>
		</column> 
	</columns>
</dashboardcomponent>

Tags

A dashboard component should consist of the following tags:

• <title> - used to define a valid key defined in translation properties file to display the component's title.

• <subTitle> - used to define a valid key defined in translation properties file to display the chart's title.

  Note
  Use $currency variable to insert the default system currency symbol. Use $period variable to insert the dashboard result's specific period (the default specific period is for the last 12 months).

  
  

• <iconclass> - used to define a font awesome icon class that will be used to render the icon of the component. 

  Note
  The supported version of Font Awesome is version 4.7.0.

  
  

• <ejb> - used to define a class name in which the method that will be used to retrieve chart’s data is implemented.
• <method> - used to define the method that will be invoked to retrieve the chart's data.

• <type> - used to define the type of the chart. 

  Note
  Allowed values are BAR, DONUT, LINE, PIE, STACKED_BAR and SUMMARY.

  
  

• <orientation> - used to define the orientation of the chart's data.

  Note
  Allowed values are VERTICAL and HORIZONTAL. Applicable only for chart types BAR and STACKED_BAR.

  
  

• <xaxislabel> - used to define a valid key defined in translation properties file to display the X axis title.

  Note
  Applicable only for chart types BAR, LINE and STACKED_BAR. Use $currency variable to insert the default system currency symbol. Use $period variable to insert the dashboard result's specific period (the default specific period is for the last 12 months).

  
  

• <yaxislabel> - used to define a valid key defined in translation properties file to display the Y axis title.

  Note
  Applicable only for chart types BAR, LINE and STACKED_BAR. Use $currency variable to insert the default system currency symbol. Use $period variable to insert the dashboard result's specific period (the default specific period is for the last 12 months).

  
  

• <settings> - used to define the chart settings and should follow the structure below.

  Code Block
  language xml
  <settings> <setting> <id></id> <label></label> <classname></classname> </setting> </settings>

  
  

  Note
  Settings must have the same order as the ejb method parameters.

  Each setting tag should consist of:

  • <id> - used to define a unique id for the setting that will be used to construct dashboard component's xml.
  • <label> - used to define a valid key defined in translation properties file. Its translation through the glossary will be used as the setting label.

  • <classname> - used to define the class name of the setting data object. 

• <summarypage> - used to define the summary page that will be redirected upon clicking the chart's data.

• <summarypageparameters> - used to define the filters that will be passed to the summary page upon clicking on chart's data and should follow the below structure.

  Code Block
  language xml
  <summarypageparameters> <summarypageparameter> <name></name> <classname></classname> <field></field> <axis></axis> </summarypageparameter> </summarypageparameters>

  
  

  Note
  Summary page parameters must have the same order as Settings order.

  Each summary page parameter tag should consist of:

  • <name> - used to define a valid summary criterion xpath of the specified summary page.
  • <classname> - used to define the class name of the data object that is mapping with the specified xpath.

  • <field> - used to define the class field that will be used to load the data object.

    Note
    Applicable only for objects of CRMDO type.

    
    

  • <axis> - used to define the axis that will be used to get the parameter value.

    Note
    Applicable only for chart types BAR, LINE and STACKED_BAR.

    
    

• 
  

  
  

• <columns> - used to define the columns of a summary chart type and should follow the structure below.

  Code Block
  language xml
  <columns> <column> <label></label> </column> </columns>

  
  

  Note
  Applicable only for chart type SUMMARY. Columns are mapping with the chart's data. For example, if the method that retrieves chart's data returns HashMap<CRMDOSubscriptionType, HashMap<CRMDOProduct, Integer>> then the columns should be associated with subscription type, product and number respectively.

  
  

• 
  

  Each column tag should consist of:

  • <label> - used to define a valid key defined in translation properties file to display the summary column header label.

Charts

Bar Chart

The following examples show a dashboard component of type BAR.

...

Donut Chart

The following example show a dashboard component of type DONUT.

Line Chart

Pie Chart

The following example shows a dashboard component of type PIE.

Stacked Bar Chart

The following examples show a dashboard component of type STACKED_BAR.

...

Summary Chart

The following examples show a dashboard component of type SUMMARY.

...