Skip to Content
Technical Articles

SAP UI5 Creating Custom Print layout and Printing

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.

Be the first to leave a comment
You must be Logged on to comment or reply to a post.