Passing request parameters to Jasper report when using velocity template

[saraswathi.pa]

We are trying to implement the interactive column sorting in Jasper without using Jasper Server. We are using VelocityUtil.processTemplate to render the report.

The parameters that the JRXML needs are set in a map and passed to VelocityUtil.processTemplate as below.
Map parameterMap = new HashMap<String, String>();
parameterMap.put("name" , "abc");
parameterMap.put("dept" , "def");
parameterMap.put("reportUri" , "sample.jasper");
parameterMap.put("page", Integer.valueOf(pageIndex) ) ; 
parameterMap.put("contextPath", request.getContextPath());
VelocityUtil.processTemplate("sample.vm", parameterMap);

The datasourceExpression is set in the JRXML as below
<dataSourceExpression><![CDATA[new com.test.customDataSource($P{name}, $P{dept})]]></dataSourceExpression>

sample.vm as below.
<div id='reportContainer' style='display: table-cell'></div>
<script class='jasperreports'>
var reportPromise = null,
        viewer = null;

require(["jasperreports-viewer"], function(Viewer) {
    viewer = new Viewer({
        at: "reportContainer",
        reporturi: "${reportUri}",
        async: ${async},
        page: "${page}",
        applicationContextPath: "${contextPath}"

    });

    reportPromise = viewer.loadReport();
});

The issue is the paramters are not being accessible in the customDataSource after calling the Jasper report. (The parameters are not available in the Jasper report also ). How to pass the parameter to the report when using velocity for rendering the report? Should we explicitly pass the parameter in the Viewer? if Yes, how can it be done?

Thanks.