Plugin overview¶

A Brief Overview of the Velocity Report Plugin¶

The Velocity Report plugin is a reporting tool using Java best-of-breed Open Source projects that have been tailored for the Servoy environment to provide an easy and natural way of building reports for Servoy developers. It is compatible Servoy 5+ in smart and web client.

First, have a look at a test sample report produced by the plugin.

Note that this is high definition PDF, suitable for printing.

This PDF test sample report was produced by the simple xhtml/velocity template that you can see here

Don't be afraid by the $ and # in the html files, they are only here to be replaced by real data from Servoy. As you can see there is little code in the template, in fact everything was made on purpose to avoid putting any logic inside it!

The data that fills this template have been populated in Servoy from a simple Javascript object constructed in this function:

function getReportContext() {

    // let's get a foundset:
    var prod = databaseManager.getFoundSet("udm","products");
    prod.loadAllRecords();
    prod.setSelectedIndex(1);

    // and an image from that foundset:
    var blob = prod.product_image;

    // the context object will hold everything we want to output in our report:
    var context = new Object();

    // we can put records directly in our report:
    context.firstRecord = foundset.getSelectedRecord();

    // we can put foundsets in it:
    context.foundset = foundset;
    context.countries = databaseManager.getFoundSet("udm","country_types");
    context.prod = prod;

    // we can put charts:
    context.pieChart = getChart(CHART.PIE, getPieChartDef());
    context.barChart = getChart(CHART.BAR, getBarChartDef());
    context.scatterChart = getChart(CHART.SCATTER,getScatterChartDef());
    context.lineChart = getChart(CHART.LINE, getLineChartDef());
    context.xyLineChart = getChart(CHART.XYLINE,getXYLineChartDef());
    context.radarChart = getChart(CHART.RADAR, getRadarChartDef());
    context.googleOMeterChart = getChart(CHART.GOOGLEOMETER, getGoogleOMeterChartDef());
    context.dialChart = getChart(CHART.DIAL, getDialChartDef());

    // the plugin is i18n aware, of course:
    context.testI18n = "i18n:key.test";

    // we can put functions that will be called back during rendering:
    context.callbackTest = forms.velocity_reports.holywoodPrinciple;

    // we can put datasets:
    context.dataset = databaseManager.getDataSetByQuery(
        "udm", 
        "SELECT * FROM product_types;", 
        null, 
        -1
    );
    context.products = databaseManager.getDataSetByQuery(
        "udm",
        "select product_number as ID, \\
            product_name as name, \\
            cost_each as cost, \\
            product_image as image_blob \\
            from products;",
        null,
        -1
    );

    // we can put blob images:
    context.blob = blob;

    // and media images:
    context.mediaStuff = getMediaStuff();

    // we can put barcodes:
    context.barcode = getBarcode();

    // we can put any Javascript objects:
    context.jsObject = { 
        objectProp: "i18n:key.test", 
        number2: 2 
    };
    return context;
}

The function above is itself inside a form based on the udm sample database.

Note that the context object is just a regular Javascript object that is populated with properties holding ANY kind of valid Servoy Javascript objects: Foundsets, Datasets, Records, Strings, Numbers, Booleans, Dates, ANY Objects...

The Velocity Report plugin also enhances Servoy with a set of tools to build Charts and Barcodes (that you can also use in a regular HTML_AREA). All of this using Java code off the hook, but with the regular Servoy Javascript syntax.

For example the Pie chart has been constructed with this simple Servoy Javascript Object:

function getPieChartDef() {
    var chartDef = {};
    chartDef.title = "i18n:piechart.title";
    chartDef.threeD = false;
    chartDef.slices = [
           {percent: 30, color: '#FF0000', label: 'Thirty', legend: 'Thirty'},
           {percent: 25, color: '#00FF00', label: 'Twenty-Five', legend: 'Twenty-Five'},
           {percent: 15, color: '#0000FF', label: 'Fifteen', legend: 'Fifteen'},
           {percent: 10, color: '#FF00FF', label: 'Five', legend: 'Five'},
           {percent: 20, color: '#00FFFF', label: 'Twenty', legend: 'Twenty'}
    ];
    chartDef.orientation = 45;
    chartDef.margins = [10,10,10,30];
    chartDef.legendMargins = [50,10];
    return chartDef;
}

Note the use of CHART.PIE which is a constant that you will find in the plugin.<br/>
Note also that you can put the myPie object inside a HTML_AREA (html is a form variable used as dataProvider of a HTML_AREA field).

Finally a report can be previewed like this:

plugins.VelocityReport.previewReport("testTemplate.html", getReportContext());

That's it for a very quick overview of the plugin, we invite you to have a look at the other pages of the wiki for detailed instructions on how to use the functionalities to get the most of this new and powerful way of building reports in Servoy!