Easier way to define helper functions?

Matthew Ward

I am using data that will be generated by the user and creating the html and passing it as a string in "content" on my request. I am testing out helper functions to total amounts in this example. I can't seem to get my helper function to work any other way than as shown in the code.

$sayReport .= '

    <table class=\'table striped\'>
        <thead>
            <tr>
                <th></th>
                <th>ID</th>
                <th>Last Name</th>
                <th>First Name</th>
                <th>Last Pmt Amt</th>
                <th>Birthday</th>
                <th>Gender</th>
            </tr>
        </thead>
        <tbody>
            {{for array}}
            <tr>
                <td></td>
                <td>{{:id}}</td>
                <td>{{:lastName}}</td>
                <td>{{:firstName}}</td>
                <td>{{:lastPmtAmt}}</td>
                <td>{{:birthdate}}</td>
                <td>{{:gender}}</td>
            </tr>
            {{/for}}
            <tr>
                <td style="font-weight: bold; text-decoration: underline;">{{:array.length}}</td>
                <td style="font-weight: bold; text-decoration: underline;"></td>
                <td style="font-weight: bold; text-decoration: underline;"></td>
                <td style="font-weight: bold; text-decoration: underline;"></td>
                <td style="font-weight: bold; text-decoration: underline;">{{:~mySumFunction(array)}}</td>
                

            </tr>
        </tbody>
    </table>

    <div style=\'page-break-after: always;\'>
    </div>

</div>

';

function renderReport()
{

    // Client
    var request = {
        template: {
            name: 'invoice-main',
            engine: 'jsrender',
            recipe: 'chrome-pdf',
            content: contentString,
            helpers: "function mySumFunction(aa) {\n" +
            "        var total = 0;\n" +
            "        for(var i = 0; i < aa.length; i++)\n" +
            "        {\n" +
            "            total += parseFloat(aa[i]['lastPmtAmt']);\n" +
            "        }\n" +
            "        return '$' + total;\n" +
            "    }"
        },
        data: aa,



    };
    console.log( "Request made!" );
    var reportDisplay = document.getElementById("report-display");
    reportDisplay.innerHTML = "";
    jsreport.renderAsync(request).then(function(res) {
        console.log( "in async...." );
        var html = '<html>' +
            '<style>html,body {padding:0;margin:0;} iframe {width:100%;height:100%;border:0}</style>' +
            '<body>' +
            '<iframe type="application/pdf" src="' +  res.toDataURI() + '"></iframe>' +
            '</body></html>';
        console.log( "before open...." );
        var a = window.open("about:blank", "Report")
        console.log( "before write...." );

        a.document.write(html)
        a.document.close()
        console.log( "done!" );
    })


    return "REPORT LOADED";
}

I think I saw somewhere that you can do something like this but this gives me errors when adding myhelpers to the template request:

    function mySumFunction(aa) {
    var total = 0;
    for(var i = 0; i < aa.length; i++)
    {
        total += parseFloat(aa[i]['lastPmtAmt']);
    }
    return '$' + total;
}

var myhelpers = {mySumFunction: mySumFunction()};

bjrmatos

hi!

var myhelpers = {mySumFunction: mySumFunction()};

this way won't work, probably you saw that you can pass the functions directly in the options like { helpers: { mySumFunction: mySumFunction } }, but this requires that you have in configuration templatingEngines.strategy set to in-process

if you find that is not easy to define the function as string you can try the following:

you can define the functions in a .js file then you can read that file as string and pass that to the helpers option
you can use some ES6 to avoid having too complicated syntax, in the end you can have something like:

helpers: `
  function mySumFunction(aa) {
    var total = 0;
    for(var i = 0; i < aa.length; i++)
    {
        total += parseFloat(aa[i]['lastPmtAmt']);
    }
    return '$' + total;
  }
`

Matthew Ward

I am using the api. Is there a way to edit that configuration for the api?

bjrmatos

oh so you are using jsreportonline, right? well since that is a service there is no way to change the configuration.

i guess your only options are

you can define the functions in a .js file then you can read that file as string and pass that to the helpers option

and

you can use some ES6 to avoid having too complicated syntax, in the end you can have something like:

i like the first

Matthew Ward

Yes, and thank you!