Key Stat - Print Multiple Records

From All n One's bxp software Wixi

Jump to: navigation, search

1 Overview

The ability to print a single record in bxp is available through the Ctrl+P command on the keyboard. what if this had to be done 50 times? It would be very time consuming and inefficient.

Recently the bxp team have developed a way to print multiple records through the Key Stats module.

2 Creating the Structure

In order to give structure to the multiple print functionality, a structure needs to be put in place. The structure is as follows:

  • Workbook 1 - Outcome Selection
    • Tab 1 - Outcome Selection Code - Draws an outcome box and submit button
  • Workbook 2 - Get All Records
    • Tab 1 - Get All Records Code - Get all records with the selected outcome
  • Workbook 3 - Draw Records for Print
    • Tab 1 - Draw Records Code - Draws all records on screen ready for print

3 Workbooks

Create three workbooks and name them step 1, step 2 and step 3, once they are created take note of the ID's of the workbooks.

The ID's will be needed later for inserting the tabs and for creating the link to the first workbook so the multiple process can be kicked off.

For all key stats form 1 will be used as an example

3.1 Tabs - Tab 1

The first tab to be created is the grouping page. This allows records to be grouped by a particular field, in this case, outcomes will be used to group the records.

Create the tab and name it Outcome Selection.

Next a key stat needs to be created to get a list of all outcomes.

Create the key stat as a hidden list. This will be key stat 1.

(Key Stat 1)
Select strCOU_1_Description As strOutcome_List From COU_1 Order By strCOU_1_Description ASC

This key stat will return all outcomes in alphabetical order.

Next create key stat 2 which will return the id of the form, parameter0 is used as this will be passed to the first workbook.

(Key Stat 2)
Select intCampaign_Id As intCampaign_IdOnPage From Campaign Where intCampaign_Id = 1

Now we need to create the HTML for the tab page

	<br />
	<br />
	<div id='divOutcome_Selector'>

Create the JavaScript to draw the outcome selector and button to gather the records.

Key stat 2 is used so that the form id can be passed to the second key stat workbook.

Step 1 - Create the outcome options and append the form id.

	//create the outcome options
	function fn_GetOutcome_Options(){
		var strReturn_String = '';
		var strOutcome_List = document.getElementById('strOutcome_List').value;
		var aryOutcome_List = strOutcome_List.split('[##SEP##]');

		for(var i = 0; i < aryOutcome_List.length; i++){
			var temp = aryOutcome_List[i].replace('[##SEP##','');
			strReturn_String += '<option value="[--SEP--]' + temp + '[--SEP--]--2[[keyStatsCustom1]]--">' + temp + '</option>';
		return strReturn_String;

Step 2 - Draw the outcomes and submit button

Instead of passing keyStatsCustom1 and intKeyStatCustomCount as query string values, they will be passed as form variables.

	//Draw the outcomes and the submit button
	function fn_Draw_Outcome_Submit(){
		var strReturn_String 	= '';
		strReturn_String += '<table width="1000">';
		strReturn_String += '	<tr height="30">';
		strReturn_String += '		<td width="500">';
		strReturn_String += '			Please select an outcome:';
		strReturn_String += '		</td>';
		strReturn_String += '		<td width="500">';
		strReturn_String += '			<select style="width:100%;" id="keyStatsCustom1" name="keyStatsCustom1">';
		strReturn_String += '				<option value="Please select an outcome">Please select an outcome</option>';
		strReturn_String +=	fn_GetOutcome_Options();
		strReturn_String += '			</select>';
		strReturn_String += '			<input type="hidden" id="intKeyStatCustomCount" name="intKeyStatCustomCount" value="1" />';
		strReturn_String += '		</td>';
		strReturn_String += '	</tr>';
		strReturn_String += '	<tr height="30">';
		strReturn_String += '		<td width="500">';
		strReturn_String += '			&nbsp;';
		strReturn_String += '		</td>';
		strReturn_String += '		<td width="500">';
		strReturn_String += '			&nbsp';
		strReturn_String += '		</td>';
		strReturn_String += '	</tr>';
		strReturn_String += '	<tr height="30">';
		strReturn_String += '		<td width="500">';
		strReturn_String += '			&nbsp;';
		strReturn_String += '		</td>';
		strReturn_String += '		<td width="500">';
		strReturn_String += '			<input type="submit" id="btnSubmit_Outcome" name="btnSubmit_Outcome" class="cssMaster_Button" style="width:100%;height:30px;" value="Get Records" />';
		strReturn_String += '		</td>';
		strReturn_String += '	</tr>';
		strReturn_String += '</table>';
		return strReturn_String;

Step 3 - Override form1 on every bxp page with a custom submit page. It also sets the value of the div called divOutcome_Selector to be the result of the above function.

	//Set the form submit to be the key stat workbook and not the standard form submit
	function fn_ChangeForm_Submit(){
		document.getElementById('form1').action = '';

	//draw the table in the div and override the submit page
	document.getElementById('divOutcome_Selector').innerHTML = fn_Draw_Outcome_Submit();

After all the code is in place, the page should look something like this:

KeyStat PrintMultiple Tab1.png

Once this tab is complete it needs to be added to workbook 1.

3.2 Tabs - Tab 2

The second tab will handle the processing of the records. This is an interim page and will auto submit to the final page that actually draws the records.

Two key stats need to be created getting the record list and form id. These both need to be hidden lists.

(Key Stat 3)
Select intCDA_1_Id As strRecord_List From CDA_1 Where strCDA_1_Status = '--parameter0--'

(Key Stat 4)
Select intCampaign_Id As strCampaign_IdOnPage From Campaign Where intCampaign_Id = 1

Add a div to the page and any custom parameters required.

	<br />
	<br />
	<div id='divRecord_PrintSubmit'>
		Processing has begun, this may take a minute...

Prepare the records for processing.

A key stat custom needs to be created for each record and the form id appended.

	//prepare all the records for processing and override
	function fn_Prepare_Records(){
		var strReturn_String		= '';
		var strRecord_List			= document.getElementById('strRecord_List').value;
		var intForm_Id 				= parseInt(document.getElementById('strCampaign_IdOnPage').value.replace('[##SEP##',''));
		var intRecord_Count			= 0;
		if(strRecord_List != ''){
			var aryRecord_List		= strRecord_List.split('[##SEP##]');
			for(var i = 0; i < aryRecord_List.length; i++){
				var temp			= aryRecord_List[i].replace('[##SEP##','');
				//create a keyStatCustom for each record and append the form id
				strReturn_String 	+= '<input type="hidden" id="keyStatsCustom' + (i+1) + '" name="keyStatsCustom' + (i+1) + '" value="[--' + 'SEP' + '--]' + intForm_Id + '[--' + 'SEP' + '--]' + temp + '" />';
				intRecord_Count		= intRecord_Count + 1;
			//add the count and the loop limit as part of for variables
			strReturn_String 		+= '<input type="hidden" id="intKeyStatCustomCount" name="intKeyStatCustomCount" value="' + intRecord_Count + '" />';
			strReturn_String 		+= '<input type="hidden" id="intKeyStatLoopLimit" name="intKeyStatLoopLimit" value="' + intRecord_Count + '" />';
			strReturn_String		+= 'No records to process.';
		return strReturn_String;

The next step is to override the form submit and auto submit the form to the final page.

	//override the standard form submit page to our future keystat workbook
	function fn_ChangeForm_Submit(){
		document.getElementById('form1').action = '';
	//set the inner html of print submit page to be the content above alert the user and submit the form
	document.getElementById('divRecord_PrintSubmit').innerHTML = fn_Prepare_Records();
	alert('Gathering records now, this may take a few minutes depending on how many records need to be printed...');

This tab then needs to be added to workbook 2.

3.3 Tabs - Tab 3

The last tab draws all records on screen and adds the print functionality.

A few key stats need to be created here.

The first is the record id and the two after that are fields in a particular record.

The last two are the form id.

The key stats are also used and implemented using the key stat looping engine

(Key Stat 5)
Select intCDA_1_Id  As strCDA_Record_Id  From CDA_1 Where intCDA_1_Id = --parameter1--; //the record id

(Key Stat 6)
Select strCDA_1_field_0_1  As strCDA_Field_1   From CDA_1 Where intCDA_1_Id = --parameter1--; // the record id

(Key Stat 7)
Select strCDA_1_field_0_2  As strCDA_Field_2   From CDA_1 Where intCDA_1_Id = --parameter1--; // the record id

(Key Stat 8)
Select intCampaign_Id As strCampaign_IdOnPage From Campaign Where intCampaign_Id = 1

(Key Stat 9)
Select intCampaign_Id As strCampaign_IdOnPage From Campaign Where intCampaign_Id = 1

The next step is to build the HTML, and implement the looping engine so that multiple records can be drawn on screen.

	<div id="divPrintAll" style="height:500px;overflow:auto;">
		<br />
		<p style="page-break-after:always;">
		<div id="divLoopContain[[LoopCount]]">
			<br />
			<h2>Record Id: (--5[[keyStatsCustom[[LoopCount]]]]--)</h2>
			<table style="width: 1000px; border-color: #000000;" border="1">
						<td style="width: 250px;">&nbsp;<strong>Field</strong></td>
						<td style="width: 250px;"><strong>Field Value<br /></strong></td>
						<td style="width: 250px;"><strong>Field</strong></td>
						<td style="width: 250px;"><strong>Field Value<br /></strong></td>
						<td style="width: 250px;"><strong>&nbsp;Criteria Consent</strong></td>
						<td style="width: 250px;">&nbsp;--6[[keyStatsCustom[[LoopCount]]]]--</td>
						<td style="width: 250px;"><strong>&nbsp;Number of Dependants</strong></td>
						<td style="width: 250px;">&nbsp;--7[[keyStatsCustom[[LoopCount]]]]--</td>
		<input type="hidden" id="intCurrent_RecordId_[[LoopCount]]" name="intCurrent_RecordId_[[LoopCount]]" value="--5[[keyStatsCustom[[LoopCount]]]]--" />
		<input type="hidden" id="intLoopLimit" name="intLoopLimit" value="[[LoopCount]]" />
	<table width="1000">
		<tr height="30">
			<td width="500">
				<strong>Please click the button to print:</strong>
			<td width="500">
				<input class="Master_Button" type="button" value="Print all records" id="btnPrint_All" name="btnPrint_All" style="width:500px;height:30px;" onclick="javascript:Popup();" />

Create functions for getting the record count, creating a hidden element of the record ids.

	//gets the record count so we can print the correct number of records
	function fn_GetRecord_Count(){
		var intCount		= 0;
		var objLoopLimit	= document.getElementsByName('intLoopLimit');
		for(var i = 0; i < objLoopLimit.length; i++){
		return intCount;
	//Create a hidden list of record ids for the given count
	function fn_Create_HiddenRecordIds(intCount){
		var strReturn_String	= '<input type="hidden" id="strAll_RecordIds" name="strAll_RecordIds" value="';
		for(var i = 0; i < intCount; i++){
			strReturn_String	+= document.getElementById('intCurrent_RecordId_' + (i + 1) + '').value + '[-#-]';
		strReturn_String		+= '" />';
		return strReturn_String;

A popup window needs to be created so all the records can be printed without all of the bxp formatting.

	//Create the new window with all the ajax libraries and print functionality so records can be updated
	function fn_WindowStart(){
		var strReturn_Table = '';
		strReturn_Table		+= '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">';
		strReturn_Table		+= '<html xmlns="" xml:lang="en" lang="en">';
		strReturn_Table		+= '	<head>';
		strReturn_Table		+= '		<title>Title</title>';
		strReturn_Table		+= '		<style type="text/css">';
		strReturn_Table		+= '			body{background-image:none;background-color:#ffffff;}';
		strReturn_Table		+= '		</style>';
		strReturn_Table		+= '	</head>';
		strReturn_Table		+= '	<body>';
		strReturn_Table		+= '		<table style="width:1000px;">';
		strReturn_Table		+= '			<tr>';
		strReturn_Table		+= '				<td>';
		strReturn_Table		+= '					<input type="button" value="Print Page" class="Master_Button" onclick="fn_UpdateAll();window.print();" style="width:500px;" />';
		strReturn_Table		+= '				</td>';
		strReturn_Table		+= '				<td>';
		strReturn_Table		+= '					<input type="button" value="Close Window" class="Master_Button" onclick="window.close();" style="width:500px;" />';
		strReturn_Table		+= '				</td>';
		strReturn_Table		+= '			</tr>';
		strReturn_Table		+= '		</table>';
		strReturn_Table		+= fn_Create_HiddenRecordIds(fn_GetRecord_Count());
		strReturn_Table		+= document.getElementById('divPrintAll').innerHTML;
		strReturn_Table		+= '		--8[[keyStatsCustom1]]--';
		strReturn_Table		+= '	</body>';
		strReturn_Table		+= '</html>';
		return strReturn_Table;

	//creates the popup window for printing the records
    function Popup(){
        var mywindow ='', 'PrintMultipleRecords', 'height=500,width=1000');

        mywindow.document.close(); // necessary for IE >= 10
        mywindow.focus(); // necessary for IE >= 10
        return true;

This draws all the records on screen and creates a button that will open the popup window.

On the popup window there will be a print button and a close button.

The print button will print all of the records and the close button closes the popup window.

4 Print Multiple Execution

By the end of this, there will be three workbooks and with one tab attached to each.

The link required to kick the whole process off should look like below.[--SEP--]1

Knowledge of the Key Stat module is required to implement this functionality.