Skip to Content

Introduction

    This is a quick blog explaining how to generate a print from SAPUI5 application . We currently have the flexibility to generate print from the back end system. For an ABAP back end system with SAPUI5 front end , we can generate an excel file or a PDF file from back end and push it to the browser so that the user can download it or take print out manually . The same technique is applicable for other (supported) back ends as well. Here, i am completely forgetting about the back end server , and thinking of generating the printouts from the browser using javascript .

Benefits 

  1. Printout will be rendered in the browser
  2. Data is not transferred to the back end system to generate the document and push back to the client.
  3. Include SAPUI5 controls directly into the output, like charts, tables etc .

Theory : The theory behind here is , we can print html document using javascript Window print() Method

Step 1: Create a SAPUI5 application project in Eclipse , create a view and develop your UI5 application ( These steps have been discussed multiple times , so i am not discussing it here again ).

1Project.JPG

Now my application looks like the below. I included some header data , a table with stock information, and followed by a graphical representation of profit percentage .

blog 2.JPG

When the controls are rendered , corresponding HTML code will be generated . So , if we want to include any SAPUI5 standard controls, we should get the rendered html content.

Below is the print format which we are now going to design .

print.JPG

Now we will think of some HTML stuffs . All the header information can be rendered using plain HTML tags ( using <div> , <p> etc ) and the table can be created in our choice using the <table> html tag . Graph html code can be taken from the rendered HTML DOM and insert into our print document. In the controller , i am defining a function which accept the JSON data for the header and the table ( for the header and the table ) .

code.JPG

In the above code snippet, i am creating the HTML code corresponding to the output expected . HTML DOM for the chart is read using the outerHTML variable from the document . Using the generated HTML string, a popup is opened and the same is printed .

And here comes your document

printout.JPG

Lazy to write the HTML tags for the print out ?

This is for lazy people 🙂 Are you not confident enough to write the HTML for your print out ? SCN is there to help you .

Step 1 : Create a blog or document in SCN.

Step 2 : Go to MS Word , and draft your output ( for eg , i am creating a table )

word1.JPG

Step 3: Copy the table, and paste it in the content editor , and go to the html version (right side, top )

scnword.JPG

            

Here you will get the HTML code . You may need to clean the code based on your requirement . There are many free internet services available to create HTML from MS Word contents .

Happy coding 🙂

Sreehari

To report this post you need to login first.

12 Comments

You must be Logged on to comment or reply to a post.

  1. Robin van het Hof

    Why go through all the manual hassle of writing HTML output by hand?

    A much simpler, flexible and less time consuming approach would be to just generate your to-be-printed report in SAPUI5  and use CSS @media print to style your output specific for printed output

    (1) 
    1. Dean Davis

      Could you expand on this a little?

      I see above where, inside of one function some HTML is written to a window, the window is printed and then closed. Very straight forward.

      How do I accomplish this, still within a function, by generating the report un UI5?

      (0) 
    2. Sreehari V Pillai Post author

      But i see some bottlenecks in that(correct me  Robin van het Hof ). What if i need to display a table in the print out with two column merged and having a total column in the  bottom like the below, or even deliciously complicated? I don’t think we can achieve all these features in SAPUI5 form , as we can only play with the rendered HTML.table.JPG  

      Sree

      (0) 
      1. Robin van het Hof

        Can be perfectly achieved in SAPUI5. Have you taken a look at FlexBoxes (VBox, HBox)?

        But then again, why would you want to print something that is not already on your screen? If your purpose is to print a report or something, I would not advise to do it in UI5 but rather use a backend server (Gateway, Java, etc) to generate these forms.

        (0) 
  2. Nidhi Agrawal

    If I have checkboxes in table after converting ui5 table they are not visible in print preview my table object is var oTable = new sap.ui.table.Table() checkbox are coming after selecetion mode settings on UI but while printing they are not visible place holder is there

    (0) 
  3. Cham Xu

    Thank you for the blog. It’s really helpful. 🙂

     

    But  I’ve got one problem using this method. All the UI5 buttons on the page become unclickable after user clicked the print button. Do you have any idea?

    (0) 

Leave a Reply