Web Port's custom reports can be used for processing and presenting data in Web Port or for export in .csv or .pdf format via e-mail or ftp. The report uses input data which is then processed via JavaScript (e.g. generate average values) and then presented using HTML/JavaScript/CSS.
Results can then be exported and sent to the desired recipient.
NOTE!
If you want to use predefined energy reports you need ExtReports. For more info, see the manual for ExtReports
Installation
Custom reports come with the basic installation. Create a custom report by creating a new report page (.wpr) page and select Custom Report as Report Type.
Configuration
After the creation of the report, the input page is displayed.
Input
Add new input data by selecting Add Input data.
Input as following:
| Input: | Description: |
| Name | The name of the input data. If Tag linking is checked, the name will be a tag |
| Value | Can be typed in manually or, if tag linking is enabled, value is retrieved from tag |
| Scaling | Scales set value by factor |
| Unit | Enter unit manually or retrieve automatically via tag linking |
| Category | Desired Category. Can be used for e.g. breakdown between different buildings |
| Tag linking | Link name to tag |
| Custom 1-3 | Adds the possibility of configuring up to 3 custom values that the report can use |
Tip!
An input parameter can be copied by clicking the signal under Inputs and clicking Copy in the side menu.
Parameters
To set General Settings, reach Data Processing and Presentation go to VIEW/PARAMETERS.
General settings:
| Setting: | Description: |
| Active | Indicates whether the report should be run according to the set interval |
| Run on View | Indicates whether the report should run automatically when viewing or manually |
| Enable history | Saves the data object from the data processing step (see info box below) |
| Interval type | Indicates how often the report should run |
| Custom interval | If custom interval is selected, it runs according to the following interval. HH:MM:SS |
| Next run | Next time the report will run |
Information
If Enable History is configured, the data object described below will be saved to the database and can be loaded and updated during the next report run. This can be relevant when certain data points in the report need to be changed manually and not be overwritten during the next run.
This data object will be cleared if Init report has been activated at next run.
Data processing is done using JavaScript code. In addition to the functions used by Web Port's common script engine (see Manual Script), the following functions and variables are available.
[INPUTS]
Array consisting of the inputs / tags selected.
output
The output variable is used for exporting data to .csv format or as input to the presentation. Output shall be returned from the data processing step.
data
Variable of type System.Data.DataSet which is serialized to JSON structure in the presentation layer. Suitable for use when presenting data in tables or graphs.
Example:
var inputs = [INPUTS]; // Link input signals to variables
var output = ""; // Create variable to return output
data.Reset(); // Reset previous data
var table = new DataTable("data"); // Create a new table
var coltag = new DataColumn("tag", Type.GetType("System.String")); // Add a new column with tag name
var colvalue = new DataColumn("value", Type.GetType("System.String")); // Add a new column with tag value
var colunit = new DataColumn("unit", Type.GetType("System.String")); // Add a new column with unit
var coldescription = new DataColumn("description", Type.GetType("System.String")); // Add a new column with tag description
var colcategory = new DataColumn("category", Type.GetType("System.String")); // Add a new column with category
var colcustom1 = new DataColumn("custom1", Type.GetType("System.String")); // Add a new column with Custom 1
var colcustom2 = new DataColumn("custom2", Type.GetType("System.String")); // Add a new column with Custom 2
var colcustom3 = new DataColumn("custom3", Type.GetType("System.String")); // Add a new column with Custom 3
table.Columns.Add(coltag); // Add column to table
table.Columns.Add(colvalue); // Add column to table
table.Columns.Add(colunit); // Add column to table
table.Columns.Add(coldescription); // Add column to table
table.Columns.Add(colcategory); // Add column to table
table.Columns.Add(colcustom1); // Add column to table
table.Columns.Add(colcustom2); // Add column to table
table.Columns.Add(colcustom3); // Add column to table
data.Tables.Add(table); // Add table to data
output += "Tag Name;Tag Value;Unit;Tag Description;Category;Custom 1;Custom 2;Custom 3\r\n"; // Add header row to output
for (var key in inputs) {
var dr = table.NewRow(); // Create new table row
dr["tag"] = inputs[key].Name; // Add tag name to row under "tag" column
dr["value"] = inputs[key].Value; // Add tag value to row under "value" column
dr["unit"] = inputs[key].Unit; // Add unit to row under "unit" column
dr["description"] = inputs[key].Description; // Add tag description to row under "description" column
dr["category"] = inputs[key].Category; // Add category to row under "category" column
dr["custom1"] = inputs[key].Custom1; // Add Custom 1 to row under "custom1" column
dr["custom2"] = inputs[key].Custom2; // Add Custom 2 to row under "custom2" column
dr["custom3"] = inputs[key].Custom3; // Add Custom 3 to row under "custom3" column
table.Rows.Add(dr); // Add row to the table
output += inputs[key].Name + ";" + inputs[key].Value + ";" + inputs[key].Unit + ";" + inputs[key].Description + ";" + inputs[key].Category + ";" + inputs[key].Custom1 + ";" + inputs[key].Custom2 + ";" + inputs[key].Custom3 + "\r\n"; // Also add information to output
}
return output;
Information
The variables that can be used from the input objects are:
inputs[key].Name; // Tag name
inputs[key].Value; // Tag value
inputs[key].Unit; // Unit
inputs[key].Description; // Tag description
inputs[key].Category; // Category
inputs[key].Custom1; // Custom 1
inputs[key].Custom2; // Custom 2
inputs[key].Custom3; // Custom 3
Example:
This example uses both the data object and output in the processing step.
var inputs = [INPUTS]; // Link inputs to variable
var output = ""; // Create the variable to be returned
data.Reset(); // Reset previous data
var table = new System.Data.DataTable("data"); // Create new table
var coltag = new System.Data.DataColumn("tag", System.Type.GetType("System.String")); // Add new column containing tag name
var colvalue = new System.Data.DataColumn("value", System.Type.GetType("System.String")); // Add new column containing tag value
table.Columns.Add(coltag); // Add column to table
table.Columns.Add(colvalue); // Add column to table
data.Tables.Add(table); // Add table to data
var dr = table.NewRow(); //Create new table tow output += "Tag;Value\r\n"; // Add header row to output
for (var key in inputs) {
dr["tag"] = inputs[key].Name; // Add tag name to row, column ”tag” dr[“value”] = inputs[key].Value; // Add tag value to tow, column “value” table.Rows.Add(dr); // Add the row to the table
output += inputs[key].Name + ";" + inputs[key].Value + "\r\n"; // Add info also to output
}
return output;
Presentation of data is done as HTML / JavaScript / CSS with the following variables available:
[OUTPUT]
String that corresponds to the variable "output" from the data processing
data
JSon structure created from the DataSet: a data processing data.
Example:
<style>
/* Customize styles for table headers */
#datatable thead tr td {
background-color: black; /* Background color is black */
color: white; /* Text color is white */
font-weight: bold; /* Bold text */
}
.header-cell {
background-color: black;
color: white;
font-weight: bold;
}
.banner {
background-color: #7245b9; /* Background color */
color: white; /* Text color is white */
text-align: center; /* Center-align the content */
padding: 10px; /* Add padding around the content */
font-size: 8em; /* Set the font size to 8em (adjustable) */
font-family: 'Arial', sans-serif; /* Specify font family */
display: flex; /* Use flexbox for layout */
justify-content: space-between; /* Space between elements */
align-items: center; /* Center-align items vertically */
}
.logo {
max-width: 200px; /* Set maximum width for the logo */
}
.centered-text {
flex-grow: 1; /* Allow text to expand and take up all available space */
text-align: center; /* Center-align the text within its space */
}
</style>
<script>
var data = [DATA];
$(function() {
var $bannerContainer = $('<div class="banner">');
var $logoContainer = $('<div class="logo-container">');
$bannerContainer.insertBefore('#datatable');
$bannerContainer.append($logoContainer);
// Change URL to the logo
$logoContainer.append('<img class="logo" src="https://theme.zdassets.com/theme_assets/810257/b6133e0b50cce7cb70f6a3ace24aafe25c3301ef.svg" alt="Logo">');
// Change the centered text "Custom Report" in the banner
$bannerContainer.append('<div class="centered-text">Custom Report</div>');
$.each(data.data, function(i, item) {
var $tr = $('<tr>').append(
$('<td style="color: black;">').text(item.tag),
$('<td style="color: black;">').text(item.value),
$('<td style="color: black;">').text(item.unit),
$('<td style="color: black;">').text(item.description),
$('<td style="color: black;">').text(item.category),
$('<td style="color: black;">').text(item.custom1),
$('<td style="color: black;">').text(item.custom2),
$('<td style="color: black;">').text(item.custom3)
).appendTo('#data');
});
var oTable = $('#datatable').dataTable({ // Create a table using jQuery DataTable
"bPaginate": false, // Disable pagination
"bAutoWidth": false, // Disable auto width adjustment
"aaSorting": [[0, 'asc']], // Sort by the first column in ascending order
"oLanguage": {
"sProcessing": "Processing...",
"sLoadingRecords": "Please wait - loading...",
"sLengthMenu": "Show _MENU_ entries",
"sZeroRecords": "No matching records found",
"sEmptyTable": "No data available",
"sInfo": "Showing _START_ to _END_ of _TOTAL_ entries",
"sInfoEmpty": "Showing 0 to 0 of 0 entries",
"sInfoFiltered": "(filtered from _MAX_ total entries)",
"sInfoPostFix": "",
"sSearch": "Search:",
"sUrl": "",
"oPaginate": {
"sFirst": "First",
"sPrevious": "Previous",
"sNext": "Next",
"sLast": "Last"
},
"oAria": {
"sSortAscending": " - sort ascending",
"sSortDescending": " - sort descending"
}
}
});
});
</script>
<table id="datatable" class="display dataTable responsive nowrap"> <!-- Create a table -->
<thead>
<tr>
<td style="background-color: black; color: white; font-weight: bold;">Name</td>
<td style="background-color: black; color: white; font-weight: bold;">Value</td>
<td style="background-color: black; color: white; font-weight: bold;">Unit</td>
<td style="background-color: black; color: white; font-weight: bold;">Description</td>
<td style="background-color: black; color: white; font-weight: bold;">Category</td>
<td style="background-color: black; color: white; font-weight: bold;">Custom 1</td>
<td style="background-color: black; color: white; font-weight: bold;">Custom 2</td>
<td style="background-color: black; color: white; font-weight: bold;">Custom 3</td>
</tr>
</thead>
<tbody id="data"></tbody> <!-- Load table with data -->
</table>
Exports
Add new export by going to VIEW/EXPORTS and EDITING/ADDING EXPORTS.
Following settings can be made:
Name
Name to display
Description
Description of the export
Export Type
Exports data directly to file. Prints "output" directly to file. Suitable as.csv export Exports the data directly to Excel file
Exports report to.pdf. Exports the presentation to.pdf format
Name
Export name
Description
Description of the export
Active
Indicates whether the export is to be executed
Export directory
Files is exported to C:\ProgramData\WebPort\assets\export
File Name
Enter the file name. If export type is directly to file and no file extension is selected, .txt will be used.
Timestamp Format
Indicates whether the time stamp should be added to the file name. yyyyMMddHHmmss
Encoding
Enter character style. E.g. utf-8, Unicode, ANSI.
Override previous files
Indicates whether to overwrite existing files.
Sendings
Sendings enable sending report via FTP, e-mail, HTTP Post, or WebDAV. Click Sendings and Add sender.
The general settings are:
| Setting: | Description: |
| Name | Name to display |
| Description | Description of the transmitter |
| Export to send | Choosing export to send |
| Sender type | Send reports via FTP or email |
| Active | Indicates whether transmission should be active when the export is run |
| Retry on fail | Indicates whether the transmission should be re-run in case of error |
FTP specific settings:
| Setting: | Description: |
| FTP address | FTP server address |
| FTP port | Port to ftp server |
| FTP directory | Directory where file should be added. Standard "/" |
For e-mail senders it is possible to use the standard SMTP settings configured under System settings/Server/E-mail settings. Set this standard setting by the checkbox Use default e-mail settings. If this setting is used, only Receiver, Subject and Message need to be configured. It is also possible to configure e-mail settings specifically for each sender.
Settings as below:
| Setting: | Description: |
| Sender | Email address to be sent as sender |
| Recipient | Email address your email is sent |
| Heading | Heading on email |
| Message | Text in message |
| SMTP Server | Address to SMTP server |
| Port | Port to SMTP server |
| Use SSL | Indicates whether SSL encryption is used. (Requires server support) |
Settings specific for HTTP Post:
| Setting: | Description: |
| HTTP address | Complete URL to webservice |
| Content type | Sets body or multipart sending of file |
| Username | Username (if needed) |
| Password | Password (if needed) |
| Additional headers | You can add headers here that are sent with the HTTP post |
Settings specific for WebDAV sender:
| Setting: | Description: |
| WebDAV address | URL to the WebDAV service |
| WebDAV folder | Subfolder for uploading (if relevant) |
| Username | Username (if needed) |
| Password | Password (if needed) |