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

     

    Overall-CSHS

  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.

    Coach-Layout

     

  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

    ECMDocMapping

     

     

    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;

     

     

    Integration-Service-Layout

  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.

     

     Chrome-Print-View

    IE-Print-View

Join The Discussion