Specifying Composite Report Layouts

A composite report layout can have multiple charts and tables. It allows you to create a complete HTML document, which may serve as a dashboard in a corporate portal.

To create a composite report, select the Composite Report option in the Layout tab.

An HTML editor opens that supports editing the HTML document in WYSIWYG (What you see is what you get) mode as well as editing the HTML source code directly.

Note that report instances of any kind are disabled for composite reports.

Composite Report
Figure: Composite Report

Tutorial Creating a Composite Report in the Tutorial Guide Creating a Composite Report in the Tutorial Guide provides details steps to create an example composite report.

Using HTML5/Angular for Record Sets and Series Groups

If the Data Set is specified as a Record Set, the document layout has access to the entire record set as an Angular JS Controller object. This way you can use HTML5 syntax in the HTML source code of the document HTML markup.

Syntax

The following table displays the syntax provided for record sets and series groups.

API Description
recordSet Simplified descriptor Ids (without {modelname} prefix)
qualifiedRecordSet Qualified descriptor Ids
seriesGroupData Access to series data
<iframe> </iframe> Insert Report Definition
  • can be executed in the CK HTML editor
- see section <iframe> tag for details
<sd-report-frame> </sd-report-frame> Insert Report Definition
  • supports an angularization
  • the embedded report will not be executed in the CKEditor in HTML mode
- see section <sd-report-frame> tag for details.
isSeriesGroup value true indicates that report data is SeriesGroup data
isRecordSet value true indicates that report data is recordSet data
unique filter may be used to get a "set of values" from Report Data records

Record Sets Example

To access record set elements, use the following syntax:

<ul ng-repeat="record in recordSet">
 ...
</ul>

Record Sets Example

For example define the following code in the source editor to display the process name and customer name for descriptors FirstName and LastName:

<h1>Customers</h1>
<ul ng-repeat="record in recordSet">
   <li><b>Process Name</b>: {{record.processName}}</li>
   <li><b>Customer Name</b>: {{record.FirstName}} {{record.LastName}}</li>
</ul>

Composite Report Code Example
Figure: Composite Report example code

In the CKEditor this code is rendered as follows:

Composite Report Code Example
Figure: Composite Report example CKEditor

In the Preview tab you can preview the result:

Composite Report Example
Figure: Composite Report example

For all elements in the record set, the process name and the customer name with first and last name are displayed.

Series Groups

To access series group elements, use the following syntax:

<ul ng-repeat='(seriesName, value) in seriesGroupData'>
   <li><span><b>Series Name: </b>{{seriesName}}</span></li>
   <ul ng-repeat='record in value'>
      ...
   </ul>
</ul>

Series Group Example

In this example we create a composite report for a series group with fact Process Instance Duration, dimension of descriptor OrderedItem grouped by a descriptor CustomerName.

Series Group Data Set example
Figure: Series Group Data Set example

In the Layout tab we select Composite Report and enter the following code to list divers values grouped by customer names for each ordered item.

<h1>Series Group Report</h1>
<ul ng-repeat='(seriesName, value) in seriesGroupData'>
   <li><span><b>Series Name: </b>{{seriesName}}</span></li>
   <ul ng-repeat='record in value'>
      <li><span>Dimension: {{record.dimension}}</span></li>
      <ul>
         <li>Maximum: {{record.max}}</li>
         <li>Minimum: {{record.min}}</li>
         <li>Average: {{record.avg}}</li>
         <li>Standard Deviation: {{record.std}}</li>
         <li>Count: {{record.count}}</li>
      </ul>
   </ul>
</ul>

Enter Syntax in the Composite Report
Figure: Enter Syntax in the Composite Report

In the Preview tab we can see the resulting report:

Series Group Composite Report result
Figure: Series Group Composite Report result

Embedding Reports

The Composite Layout also allows you to embed existing report definitions. Combining HTML5 and embedding, you can display a series of charts parameterized by a master set of criteria applied at runtime.

You can either insert a report manually by code or by dragging and dropping it from the Reporting Launch Panel into the Layout tab source editor. Note that dragging into the HTML editor is not possible.

Embedding a Report manually by Code

To embed an existing report definition manually into your report, you can use one of the following syntax:

<iframe> tag

The syntax for a plain <iframe> tag is the following:

<iframe allowtransparency="true" frameborder="0" sandbox="allow-same-origin allow-forms allow-scripts" scrolling="auto" 
   src="../../../plugins/views-common/views/report/reportViewer.html?viewMode=embedded&amp;
   qualifiedParameters=false&amp;
   path=report path/reports/designs/report name.bpmrptdesign" 
   style="border: none; width: 100%; height: 150%;">
</iframe>

The following input attributes are supported:

Using the <iframe> tag, the embedded report will be executed in the CK HTML editor:


Figure: Embedded Report displayed in the CKEditor

<sd-report-frame> tag

The syntax for a <sd-report-frame> tag is the following:

<sd-report-frame path="report path/reports/designs/report name.bpmrptdesign"></sd-report-frame>

This tag supports an angularization. The embedded report will not be executed in the CKEditor in HTML mode!

Embedding a Report Definition by Drag and Drop

To embed an existing report definition, select it in the My Reports tree and drag it to the Source editor of your Composite Report.

Drag and Drop
Figure: Drag and drop an existing Report Definition

A plain <iframe> tag is inserted in the editor.

Drag and Drop
Figure: Syntax created for dragged Report Definition

Grouping Output via Parameter

You can display embedded reports in record sets grouped by specific elements in the set. The syntax to use is the following:

<ul ng-repeat="record in recordSet | unique:'Param1Name,Param2Name'">
   <sd-report-frame ...parameters="{{'&Param1Name='record.param1Name'&param2Name='+record.param2Name}}"
</sd-report-frame>

For example:

<ul ng-repeat="record in recordSet | unique:'CustomerName'">
   <sd-report-frame ...parameters="{{'CustomerName='+record.CustomerName}}" >
</sd-report-frame>

Note that it is required that the parameter used is defined in the embedded report. Please refer to section Defining Report Parameters of chapter Specifying Data Sets for details on setting report parameters.

Example Usage

In this example, we like to group our report to provide a list for each customer. The embedded report has a filter that is set as parameter for descriptor CustomerName. We add this parameter to the syntax for embedding the report.

<h1>Customer specific Reports</h1>

<ul ng-repeat="record in recordSet | unique:'CustomerName'">
   <li><b>Customer Name</b>: {{record.CustomerName}}</li>
   <li><b>Customer Id</b>: {{record.CustomerId}}</li>
   <li><b>Report</b>:<br />
   <sd-report-frame parameters="{{'CustomerName='+record.CustomerName}}" 
         path="/realms/carnot/users/frank/documents/reports/designs/OrderedItemsCustomer.bpmrptdesign">
    </sd-report-frame></li>
</ul>


Figure: Setting a Parameter in the Layout

The records in the record set will be displayed grouped by the specified parameter (CustomerName).


Figure: Preview with grouped Records