User Input for XSLT based Reports

You need user input for XSLT based Reports.

Technique

Use a Generic Report called from a client Method so that user input can be collected for the query.

This section describes the steps for building the User Input Report. This is an example and there are alternative ways to implement the user interface, but this does illustrate a way to dynamically run a Report.

In this example, we use a very simple Report to get one input from the user, which is the Part Number for the item_number property for the Part ItemType to dynamically build the AML query for our Report.

The following are the steps for building an Interactive Report:

1. Create a Generic Report as a template.

   • Set the Report properties as follows:

     • Name = My Report (this can be any name you want)
     • Type = Generic
     • Location = Server
     • Target = Window
   • Construct an AML query and write the Report as usual.
   • Once the Report is written the AML query is no longer required because the Report acts as a template and the AML query is provided from the user input interactively so remove the Report Query AML from the Report item. But you may want to use the AML query string as the starting point for building the query in the Method coming up next.

2. Create a client-side Method (named “My Report” for this example) that will:

   • Get the user input for the query, which is a modal dialog for this example.
   • Construct the actual AML query based on the user input. Use the AML query from the Report you created as the starting point. We replace hard-coded search criteria in the AML with variables in our Method.
   • Create an XML document to hold the AML query.
   • Get the Report item.
   • Run the Report passing the query XML document as the query criteria.

3. Create an Action to call the Method. Set the Action properties as follows:

   • Type = Generic
   • Location = Client
   • Target = None
   • Method = My Report
   • Name = My Report

This provides the logic to get user input and to invoke the Report from an Action menu choice. The following is client-side Method code to run the Interactive Report:

// The Report is run as a Generic Report so we can pass our own AML query for the Report.

// Get the query criteria from the user via a modal dialog.

var params =
{
aras:aras, innovator: this.getInnovator(),
dialogHeight:227, dialogWidth:350,
content: ‘ReportTool/UserDialogs/MyReport.html’
};
function callback(dialogWrapper)
{
var result = dialogWrapper.result;
if (!result){ return; }

// Create a query Item to hold the AML query for the Report.

// The ItemType Part is an example and you can set this as

required.

var qry = aras.IomInnovator.newItem(‘Part’,'get’);

// The user input from the modal dialog is serialized the into a string.

// The format for the serialized string is | delimited for the list of properties

// for constructing the query and each property is a name/value pair : delimited.

var params = result.split('|');
for (var i=0; i<params.length; ++i)
{
var param = params[i].split(':');
qry.setProperty(param[0], param[1]);
}

// Get the Report item by name.

var reportQry = aras.IomInnovator.newItem(‘Report’,'get’);
reportQry.setProperty(‘name’, ‘My Report’)
reportQry.setAttribute(‘select’,
‘name,description,report_query,target,type,xsl_stylesheet,location,’ +
‘method(name,method_type,method_code,runas_user,runas_pwd)’);
var report = reportQry.apply();

// Run the report passing the query Item as the query criteria for the Report.

// The runReport function is part of the client Toolkit API,

// which expects node object not IOM Item objects.

aras.runReport(report.node, '', qry.node);
}
var wnd = aras.getMainWindow();
wnd = wnd === top ? wnd.main : top;
wnd.ArasModules.Dialog.show(“iframe”, param).promise.then(callback);

4. Create the HTML page that captures the user’s input for the Report. In the sample Method code above, you notice the call to open the modal dialog and load it with the ReportDialogs/MyReport.html page. This is the relative URL to the file from the Client/scripts folder for which the Methods on the server side are invoked.

   Note

   If the folder Client/scripts/ReportTool/UserDialogs does not exist create it. The folder name can be anything you want; basically, we are simply creating a location to put the HTML files for the Report dialogs.

The following is the sample HTML for the MyReport.html page:
<html>
<style type="text/css">
body {
background-color:#d4d0c8;
}
.header {
background-color:#CCCCFF;
font-family:helvetica;
font-weight:bold;
font-size:16pt;
font-style: italic;
color:#000000;
border-width:1px;
border-style:inset;
padding:8px;
}
.buttons {
background-color:#d4d0c8;
border-width:2px;
border-style:groove;
padding:10px;
}
td {
font-family:helvetica;
font-weight:bold;
font-size:8pt;
}
</style>
<script>
var args = window.frameElement ? window.frameElement.dialogArguments : window.dialogArguments,
aras = (args && args.aras) ? args.aras : parent.aras;
window.dialogArguments = args;
function cancel()
{
args.dialog.result = '';
args.dialog.close();
}
function apply(form)
{
args.dialog.result = '';

// Serialize the field values into a string.

// Delimit the fields with the | character

// and delimit the property name/value with the : character.

// i.e. prop-name:value|prop-name:value

for (var i=0; i<form.elements.length; ++i)
{
var field = form.elements[i];
if (field.type == ‘text’)
{
if (field.value)
{
if (args.dialog.result) args.dialog.result+= '|';
args.dialog.result+= field.name + ':' + field.value
}
}
}
args.dialog.close();
}
onload = function() {
document.body.scroll = ‘no';
}
</script>
<body>
<form>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr height="60">
<td class="header” colspan="2">
My Report
</td>
</tr>
<tr>
<td align="right” style="padding:20px 10px 0px 0px;" nowrap>
Description:
</td>
<td style="padding:20px 00px 0px 0px;"><input type="text” name="part_desc"></td>
</tr>
<tr>
<td align="right” style="padding:4px 10px 20px 0px;" nowrap>
Cost:
</td>
<td style="padding:4px 0px 0px 0px;"><input type="text” name="part_cost"></td>
</tr>
<tr>
<td align="center” class="buttons” colspan="2">
<input type="button” value="OK” onclick="apply(this.form)">
<input type="button” value="Cancel” onclick="cancel()">
</td>
</tr>
</form>
</body>
</html>

5. You should now be able to click on My Report in the Action menu and interactively run the Report.