BPM, Workflow, and Case

 View Only

Recipe: Using BPM to Fire Print Preview on a Document

By ZACHARY SILVERSTEIN posted Tue September 28, 2021 01:59 PM

  

Utilizing BPM, HTML, Javascript, and BPM Document Store to present a Base 64 Converted PDF

Contents


Overview

Skill Level: Intermediate

In this tutorial I will be showing a method of firing print preview in IE, Firefox, and Chrome via BPM Doc Storage and Javascript.

Ingredients

  • BPM
  • A Base 64 Encoded PDF

Step-by-step

1.
Architecture

The architecture of this solution involves mutliple components

    1. A GSS with a scriptlet before the coach that writes code onto initial coach load
    2. An Integration Service that stores a Base64 encoded document and returns Doc URL
    3. A Coach
    4. A Custom Coach view
    5. A Base64 Encoded Document (in string form)

 

The CSHS Coach Design

2.  Initial Iframe Raw HTML Creation

This first GSS will focus on the piece of raw HTML and Javascript to initially set up the page. This should be created before the Coach initially loads so as the coach loads with the Right functions and HTML.

 

This GSS will have only an output string and a scriplet.

You will want to bind this scriplet to an output string called rawHTMLOutput.

The functionality in the script here should have all the necessary code for the various browsers

 

<!DOCTYPE html>
<head>
 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>

 <script>
 function initialLoadAndPrint(url){
 if(typeof idPDF != 'undefined'){
 PrintPdf()
 }
 else{
 buildPDF(url)
 }
 }
/////////////////////////////////
 function buildPDF(url){
 idContainer.innerHTML = '';
 idContainer.innerHTML =
 '<object id="idPdf" onreadystatechange ="idPdf_onreadystatechange()"'+
 'width ="50" height="50" type="application/pdf"' +
 'data="'+ url +'">'+
 '<span>PDF Plugin not available</span>'+
 '</object>';
 }
///////////////////////////////
 function PrintPdf() {
 idPdf.Print();
 }
///////////////////////////////
 function idPdf_onreadystatechange() {
 if(idPdf.readyState === 4)
 setTimeout(PrintPdf,1000);
 }
////////////////
 printChromePdf = function (url) {
 var iframe = this._printIframe;
 if (!this._printIframe) {
 iframe = this._printIframe = document.createElement('iframe');
 iframe.id = 'pdfIframe';
 document.body.appendChild(iframe);
 iframe.style.display = '';
 
 iframe.onload = function() {
 console.log('iframe Loaded in print PDF fired');
 setTimeout(function() {
 iframe.focus();
 iframe.contentWindow.print();
 }, 1000);
 };
 }

 iframe.src = url;
 iframe.focus();
 
}
 
 
 
 
 </script>
</head>

<body>
 <div id ='idContainer'></div>
</body>



3.  Coach Layout

Inside this coach we will have 3 components. A button, a piece of custom HTML, and a custom CoachView.

 

The button will be called “Fire Boundary Event”, the custom HTML will be bound to our rawHTMLOutput variable and our custom CoachView we will get to later. This is a sample of what our coach may look like.

 

4. Custom Coach View Creation

Here will be our Custom Coach View. We will call it printPDFCV. The binding will take in a variable url of type String. In the Change Event Handler we have some easy JS to catch detection of change of url. There are no other items inside the CV other than some onChange detection.

 

console.log('Change of PDF URL inside printPDFCV');

url = this.context.binding.get('value');

if(url){

console.log('Firing Print PDF Function');

//This works for IE
initialLoadAndPrint(url);
//This works for Chrome
printChromePdf(url);
}

 

On the coach bind the CoachView to the docURL


5. Integration Service Layout

Inside this integration service we will have 5 artifacts.

    1. A scriplet bound to a string variable called b64PDF – for the actual scriplet set it equal to the Base 64 PDF
    2. A piece of server side Javascript to convert the b64PDF to a content stream. (variable contentStream of type ECMContentStream)
    3. A content integration for creating the PDF in Doc Storage
    4. A content integration for retrieveing the doc URL
    5. A piece of Javascript to build our output object of docURL

 

Artifact #2

tw.local.contentStream = new tw.object.ECMContentStream();
tw.local.contentStream.content = tw.local.b64PDF;
tw.local.contentStream.contentLength = tw.local.b64PDF.length;
tw.local.contentStream.mimeType = 'application/pdf';

Artifact #3

ECM Server – IBM BPM Document Store

Operation Name – Create Document

 

Artifact #4

ECM Server – IBM BPM Document Store

Operation Name – Get Document

DataMapping – tw.local.ecmID -> documentID

                       document -> tw.local.document

 

 Artifact #5

tw.local.urlOfPDF = tw.local.document.contentURL;

 

6. Test the Application

Run the CSHS in any browser and you should see a print preview automatically pop up on click of the button.



#BusinessAutomationWorkflow(BAW)
#JavaScript
2 comments
67 views

Permalink

Comments

Wed May 11, 2022 12:57 AM

Could you please share the twx file that I can follow along?

Thanks,
Tuan

Tue November 23, 2021 04:43 PM

Can you please share twx file