19.5.2014

foto Petr Bravenec

Petr Bravenec
Twitter: @BravenecPetr
+420 777 566 384
petr.bravenec@hobrasoft.cz

Every application should provide some useful outputs to its users - one of the typically required output is a print report. Deko the CRM is written in C++. It is beautiful and powerful language but it has some disadvantages to use it for report creation:

  • As a compiled language C++ requires development environment
  • C++ is intended for application building, not for the document creation
  • C++ is not fault tolerant
  • It takes a lot of work to make reports in C++
  • It's unreal that the user can create it's own report.

How to get from this situation? For a long years I'm used to use Javascript for various extensions of my C++ applications. It is easy to add Javascript interpreter to C++ application but for long time I did not realized the advantages of Javascript for reports creation.

Print report is built using HTML and Javascript

Reports have to be created simply by an average developer. There are huge amount of developers that know how to use HTML and many of them know to use the Javascript, too. So the Deko has new document type, report - build-in web browser and some methods for database queries.

Print report is created as a simple HTML page with some parts in Javascript. HTML is used as a template - the report layout and appearance is described in HTML and CSS, and Javascript adds some user data from database to the report. Masochist can use plain Javascript to modify HTML but there are many of libraries to greatly simplify the work - we choosed the jQuery library.

What advantages brings the HTML and Javascript to report developing?

  • Basic knowledge of HTML and Javascript is very common, most of developers can create the report.
  • Work can be simplified using various libraries (jQuery)
  • There is no need to compile the report, it is interpreted in built-in web browser
  • HTML is developed to describe documents
  • Javascript error do not lock the application
  • Report creation is simple and fast

Database can be accessed using two different methods:

Proprietary URL scheme deko.

The deko scheme can be used to access images, libraries and css files:

<img src="deko:///id-of-document/name-of-attachment.svg" alt="logo">

Proprietary Javascript library

The C++ part of Deko is visible through Javascript object deko. Database can be accessed directly using the object:

var document = deko.get('id-of-requested-document');

With jQuery library is the combination very powerful. Complete report can look like this:

Complete report example

<html>
<head>
<script type="text/javascript" 
    src="deko:///report-resources/jquery-2.1.0.min.js"></script>
</head>
<body>

<h1>List of companies</h1>

<table class="report">
<thead>
<tr><th>Name</th><th>Web</th><th>City</th></tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr><th colspan="4"> <th></tr>
</tfoot>
</table>

<!-- ******* Here the HTML ends and javascript begins ******* -->
<script type="text/javascript">
$(document).ready(function(){
    deko.begin();
    var id = deko.id();
    var doc = deko.get(id);
    var parent = deko.linksToMe(id);
    var parentid = parent.rows[0].value.docid;
    var parentlinks = deko.linksFromMe(parentid);
    for (var i=0; i<parentlinks.rows.length; i++) {
        var xtype = parentlinks.rows[i].value.doctype;
        var xid   = parentlinks.rows[i].value.docid;
        if (xtype == 'company') {
            var xdoc = deko.get(xid);
            var city = (xdoc.city == undefined) ? '' : xdoc.city;
            var wwww = (xdoc.www  == undefined) ? '' : xdoc.www;
            $("table.report tbody").append(
                '<tr>' +
                '<td>' + xdoc.name + '</td>' +
                '<td>' + wwww + '</td>' +
                '<td>' + city + '</td>' + 
                '</tr>\n'
                );
            }
        }
});
</script>
</body>
</html>

links

http://dokumentace.hobrasoft.cz/index.php/Tisková_sestava - Deko documentation, reports
http://www.hobrasoft.cz/en/deko/reports/ - reports to download
http://www.w3schools.com/js/default.asp - Javascript tutorial
http://www.w3schools.com/jQuery/ - jQuery tutorial
http://jquery.com/download/ - jQuery, home page

Hobrasoft s.r.o. | Contact