Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

SAP UI5 Creating Custom Print layout and Printing

former_member659289
Explorer
‎2020 Feb 21 11:52 AM
4,902
INTRODUCTION:

SAP UI5 Application does not provide the feasibility for printing from the front end side. If we want to do the printing we usually do with the Adobe forms which comes as a add on for the MII and ABAP netweavers. Even-though that has lot of customization and features for creating the print layout, For the applications that is not having those feasibility to access those features for the ABAP system. I have created a layout where we can customize those and create the print layouts from the UI Controller.

This is a complete JavaScript process so it works as platform independent

PROCESS:

 

I will explain step by step from how to configure the layout which will be useful for single and the multiple pages printing even with the different data set.

Step 1:

Understand the layout, How many sections that is needed like a header and footer will be there in most of the scenarios and a inner table will also be there in most of the business scenarios.

In my example i have created a print template with

  • A Header

  • A inner Table

  • A Footer


 

Step 2:

From your data model success function or the navigation function get the  data-sets  that need to be printed inside a array variable like i have done below.
onPrintButtonPressed: function(){

		//this print data model i have created on filtering the data, in similar way or any other method you to get the data required for print in a array like below

		var getModel = this.getView().getModel("printDataModel").getData();

		// the below line will pass the collected print data into the function which we have created for printing the report

		this.printLayoutCreator(getModel)

}

 

Step 3:

Create that printLayoutCreator() function as per your business requirement , i have created a header and a inner table and a footer , this below layout function will create a landscape A4 layout sized report which will create the n number of pages how much ever data we get and pass inside the function.

 
	printLayoutCreator: function (path) {

			var pageno = 0;

			var totcnt;

			for (totcnt = 0; totcnt <= path.length - 1; totcnt++) {

				var totalPages = path.length ;

				var pageno = pageno + 1;

		                var test = "";

	// The below If loop is created for adjusting the layout as per the landscape layout adjustments as per the pages that is been aksed to print	 

		

				if (path.length === 1) {

					var tabless =

						"<br><body><div  style='box-sizing: content-box; width: 1000px; height: 680px; border: 0px solid black;' class='table-responsive'>";



				} else {

					if (totcnt === 0) {

						var tabless =

							"<br><body><div  style='box-sizing: content-box; width: 1000px; height: 711px; border: 0px solid black;' class='table-responsive'>";

					} else if (totcnt === path.length - 1) {

						var tabless =

							"<div  style='box-sizing: content-box; width: 1000px; height: 690px; border: 0px solid black;' class='table-responsive'>";

					} else {

						var tabless =

							"<div  style='box-sizing: content-box; width: 1000px; height: 710px; border: 0px solid black;' class='table-responsive'>";

					}

				}



		//creating a header for print layout

				var Table1 =

					"<table width='1000px'><tr><td style=' padding-left: 367px; width: 488.333;font-family: calibri;font-size: 20px;'><b>HEADER</b></td><td><table><tr><td style='font-family: calibri;font-size: 11px;'>Date:" +

					" " + ""+ "</td></tr><tr><td style='font-family: calibri;font-size: 11px;'>Time:" + " " + "Value"+

					"</td></tr><tr><td style='font-family: calibri;font-size: 11px;'>Value:" + " " + "Value" +

					"</td></tr></table></td></tr></table><hr><div><table class='table' width='1000px' style=''><tr  align='center' ><td style='box-sizing: content-box;font-size: 11px;border: 0px solid black;font-family: calibri;width: 40%;' align='left'>" +

					"<b>Value</b>" + ": " + path[totcnt].data +

					"</td><td  style='box-sizing: content-box;font-size: 11px;border: 0px solid black;font-family: calibri;width: 40%;' align='left'>" +

					"<b>Value</b>" + ": " + path[totcnt].data +

					"</td><td  style='box-sizing: content-box;font-size: 11px;border: 0px solid black;font-family: calibri;width: 20%;' align='left'>" +

					"<b>Value</b>" + ": " + path[totcnt].data  +

					"</td></tr></table></div>" +

					"<div class='table-responsive'><table class='table' width='1000px' style=''><tr  align='left' ><td style='font-size: 11px;font-family: calibri;box-sizing: content-box;border: 0px solid black;width: 40%;' align='left'><b>" +

					"Value" + "</b>: " + path[totcnt].data +

					"</td><td  style='box-sizing: content-box;font-family: calibri;font-size: 11px;border: 0px solid black;width: 40%;' align='left'>" +

					"<b>Value</b>" + ": " +path[totcnt].data  +

					"</td><td  style='box-sizing: content-box;font-size: 11px;border: 0px solid black;font-family: calibri;width: 20%;' align='left'>" +

					"<b>Value</b>" + ": " + path[totcnt].data  +

					"</td></tr></table></div>" +

					"<div class='table-responsive'><table class='table' width='1000px' style=''><tr  align='left' ><td style='font-size: 11px;font-family: calibri;box-sizing: content-box;border: 0px solid black;width: 40%;' align='left'>" +

					"<b>Value</b>" + ": " + path[totcnt].data   +

					"</td><td style='font-size: 11px;font-family: calibri;box-sizing: content-box;border: 0px solid black;width: 40%;' align='left'>" +

					"<b>Value</b>" + ": " + path[totcnt].data  +

					"</td><td style='font-size: 11px;font-family: calibri;box-sizing: content-box;border: 0px solid black;width: 20%;' align='left'>" +

					"<b>Value</b>" + ": " + path[totcnt].data  +

					"</td></tr></table></div>" +

					"<div class='table-responsive'><table class='table' width='1000px' style=''><tr  align='left' ><td style='font-size: 11px;font-family: calibri;box-sizing: content-box;border: 0px solid black;width: 40%;' align='left'>" +

					"<b>Value</b>" + ": " + path[totcnt].data  +

					"</td></tr></table></div><hr>";

					

					

		//creating a inner table for print layout

		

				var Table2 =

					"<div class='table-responsive' style='height:380px;    width: 1000px;'><table class='table' style='border-collapse: collapse; width: 1000px;'>";	

					var Table22 =



					"<tr><th style='   text-align: left;font-size: 11px;font-size: 11px;font-size: 11px;font-family: calibri; text-align: left;width: 5%;'>TableHeader</th><th style='text-align: left;width:4.7%; font-size: 11px; font-family: calibri;  text-align: left; '>TableHeader</th>" +

					"<th style='   text-align: left;font-size: 11px;font-size: 11px;font-size: 11px;font-family: calibri; text-align: left;width: 18.4%;'>TableHeader</th><th style='text-align: left;width:6.7%; font-size: 11px; font-family: calibri;  text-align: left; '>TableHeader</th>" +

					"<th style='  text-align: left; font-size: 11px;font-size: 11px;font-size: 11px;font-family: calibri; text-align: left;width: 7.7%;'>TableHeader</th><th style='text-align: left;width:7.7%; font-size: 11px; font-family: calibri;  text-align: left; '>TableHeader</th>" +

					"<th style='   text-align: left;font-size: 11px;font-size: 11px;font-size: 11px;font-family: calibri; text-align: left;width: 7.7%;'>TableHeader</th><th style='text-align: left;width:4.7%; font-size: 11px; font-family: calibri;  text-align: left; '>TableHeader</th>" +

					"<th style='   text-align: left;font-size: 11px;font-size: 11px;font-size: 11px;font-family: calibri; text-align: left;width: 6.7%;'>TableHeader</th><th style='text-align: left;width:8.7%; font-size: 11px; font-family: calibri;  text-align: left; '>TableHeader</th>" +

					"<th style='   text-align: left;font-size: 11px;font-size: 11px;font-size: 11px;font-family: calibri; text-align: left;width: 8.7%;'>TableHeader</th><th style='text-align: left;width:8.7%; font-size: 11px; font-family: calibri;  text-align: left; '>TableHeader</th>" +

					"</tr></table><hr>";

				Table2 = Table2 + Table22;

				var innerData = path[totcnt].InnerTableArray // i have a another array data set inside a row in my data

				var cnt;

				for (cnt = 0; cnt < innerData.length; cnt++) {



					var table3 =

						"<table class='table' style='border-collapse: collapse; width: 1000px;'><tr style='height: 30px'><td style='  text-align: left; font-size: 11px;font-size: 11px;font-size: 11px;font-family: calibri; width: 5%;'>" +

						innerData[cnt].data+

						"</td><td style='text-align: left;width:4.7%; font-size: 11px; font-family: calibri;   '>" + innerData[cnt].data +

						"</td>" +

						"<td style='   text-align: left;font-size: 11px;font-size: 11px;font-size: 11px;font-family: calibri; width: 18.4%;'>" +

						innerData[cnt].data +

						"</td><td style='text-align: left;width:6.7%; font-size: 11px; font-family: calibri;   '>" + innerData[cnt].data +

						"</td>" +

						"<td style='  text-align: left; font-size: 11px;font-size: 11px;font-size: 11px;font-family: calibri; width: 7.7%;'>" +

						"" +

						"</td><td style='text-align: left;width:7.7%; font-size: 11px; font-family: calibri;   '>" + innerData[cnt].data +

						"</td>" +

						"<td style='   text-align: left;font-size: 11px;font-size: 11px;font-size: 11px;font-family: calibri; width: 7.7%;'>" +

						innerData[cnt].data +

						"</td><td style='text-align: left;width:4.7%; font-size: 11px; font-family: calibri;   '>" + innerData[cnt].data +

						"</td>" +

						"<td style='  text-align: left; font-size: 11px;font-size: 11px;font-size: 11px;font-family: calibri; width: 6.7%;'>" +

						innerData[cnt].data +

						"</td><td style='text-align: left;width:8.7%; font-size: 11px; font-family: calibri;   '>" + innerData[cnt].data + "</td>" +

						"<td style='   text-align: left;font-size: 11px;font-size: 11px;font-size: 11px;font-family: calibri; width: 8.7%;'>" +

						innerData[cnt].data +

						"</td><td style='text-align: left;width:8.7%; font-size: 11px; font-family: calibri;   '>" + innerData[cnt].data +

						"</td>" +

						"</tr>";

					Table2 = Table2 + table3;



				}

				Table2 = Table2 + "</table></div>";

				

	//creating a footerLayout for print layout

	

				var Table4 =

					"<h3 style='font-family: calibri;    font-size: 14px;'>Inner Table</h3><hr><div  style='box-sizing: content-box; width: 1000px;  border: 0px solid black;' class='table-responsive'><div><table class='table' width='1000px' style='height: 25px;'><tr  align='center' ><td style='box-sizing: content-box;font-size: 11px;border: 0px solid black;font-family: calibri;width: 20%;' align='left'>" +

					path[totcnt].data  +

					"</td><td  style='box-sizing: content-box;font-size: 11px;border: 0px solid black;font-family: calibri;width: 20%;' align='left'>" +

					"Value: " + path[totcnt].data  +

					"</td><td  style='box-sizing: content-box;font-size: 11px;border: 0px solid black;font-family: calibri;width: 20%;' align='left'>" +

					"Value: " + path[totcnt].data  +

					"</td><td  style='box-sizing: content-box;font-size: 11px;border: 0px solid black;font-family: calibri;width: 20%;' align='left'>" +

					"Value: " + path[totcnt].data +

					"</td><td  style='box-sizing: content-box;font-size: 11px;border: 0px solid black;font-family: calibri;width: 20%;' align='left'>" +

					"Value: " + path[totcnt].data +

					"</td></tr>" +

					"<tr  align='center' ><td style='box-sizing: content-box;font-size: 11px;border: 0px solid black;font-family: calibri;width: 10%;' align='left'>" +

					path[totcnt].data  +

					"</td><td  style='box-sizing: content-box;font-size: 11px;border: 0px solid black;font-family: calibri;width: 20%;' align='left'>" +

					"Value: " + path[totcnt].data  +

					"</td><td  style='box-sizing: content-box;font-size: 11px;border: 0px solid black;font-family: calibri;width: 20%;' align='left'>" +

					"Value: " + path[totcnt].data  +

					"</td><td  style='box-sizing: content-box;font-size: 11px;border: 0px solid black;font-family: calibri;width: 20%;' align='left'>" +



					"</td><td  style='box-sizing: content-box;font-size: 11px;border: 0px solid black;font-family: calibri;width: 20%;' align='left'>" +



					"</td></tr>" +

					"<tr  align='center' ><td style='box-sizing: content-box;font-size: 11px;border: 0px solid black;font-family: calibri;width: 20%;' align='left'>" +

					"Value" +

					"</td><td  style='box-sizing: content-box;font-size: 11px;border: 0px solid black;font-family: calibri;width: 20%;' align='left'>" +

					"Value: " + path[totcnt].data  +

					"</td><td  style='box-sizing: content-box;font-size: 11px;border: 0px solid black;font-family: calibri;width: 20%;' align='left'>" +

					"Value: " + path[totcnt].data +

					"</td><td  style='box-sizing: content-box;font-size: 11px;border: 0px solid black;font-family: calibri;width: 20%;' align='left'>" +



					"</td><td  style='box-sizing: content-box;font-size: 11px;border: 0px solid black;font-family: calibri;width: 20%;' align='left'>" +

					"Page:" + pageno + "/" + totalPages +



					"</td></tr></table></div></div></div>";



				var ctrlString = "width=500px,height=600px";

				var wind = window.open("", "PrintWindow", ctrlString);

					test = test + tabless + Table1 +

					Table2 + "<hr>" + Table4;

				if (wind !== undefined) {

					wind.document.write(test);

				}

				// Creating a small time delay so that the layout renders

				if (totcnt === path.length - 1) {

					setTimeout(function () {

						wind.print();

						wind.close();



					}, 500);

				}

			}

		},

 

This above function is fully based on user customization , you can change and modify the layout however you need it.

When this code is been executed it pops up a browser print window with the print reports that is been created. you will have to just click on the layout selection and then click on the print, the reports will start printing to the default browser.

 

 

Conclusion:

If there is no SAP Netweaver systems that is been connected to the application, then this will be the one and only way to create the print layouts from the UI perspective, This works very smoothly and very easy to configure also. As HTML and CSS involvement has lot of customization options this will be a very interesting development to work with.

The output will be like below.

1 Comment
Labels in this area
Popular Blog Posts