How to fit the field text to the column width of a table in a PDF generated in UI Page

[pvnaik]

We have a UI Page which creates a PDF document. The PDF contains a table which populates data from the table within Service Now.

Issue is that, if we enter large amount of text in a field, it goes out of the column width when displayed in the PDF. Please refer the image below of the same, where the 'comments' entered are going out of the column for 'Comments'.

Is there any way by which we can fit the text to the column width or can we increase the size of the columns?

Following is some part of the code that is used for creating the table:

// List

  var xList = x + 20;

  var yList = y + 67;

  var wList = 260;

  var hList = 4.1;

  var totH = 105;

  // Header Grid

  doc.setFillColor(221,221,221);

  doc.rect(xList, yList, wList, hList * 3, 'F'); // gray bg

  doc.rect(xList, yList, wList, hList * 3); // header square

  // Concepts

  doc.setFontType('bold');

  doc.setFontSize(9);

  doc.text(xList + 2, yList + hList * 3 - 1, 'QTY');

  doc.text(xList + 12 + 10, yList + hList * 3 - 5, 'GE PART #');

  doc.text(xList + 9 + 10, yList + hList * 3 - 1, 'CUST. PART #');

  doc.text(xList + 8 + 50, yList + hList * 3 - 1, 'Part Description');

  doc.text(xList + 2 + 90, yList + hList * 3 - 1, 'Need Date');

  doc.text(xList + 7 + 110, yList + hList * 3 - 5, 'Cycle Time');

  doc.text(xList + 2.8 + 110, yList + hList * 3 - 1, '(Business Days)');

  doc.text(xList + 6 + 140, yList + hList * 3 - 8.5, 'UNIT');

  doc.text(xList + 3 + 140, yList + hList * 3 - 5, 'SELLING');

  doc.text(xList + 4.9 + 140, yList + hList * 3 - 1, 'PRICE');

  doc.text(xList + 3 + 160, yList + hList * 3 - 5, 'Extended');

  doc.text(xList + 5.9 + 160, yList + hList * 3 - 1, 'Price');

  doc.text(xList + 32 + 180, yList + hList * 3 - 1, 'Comments');

  // Populate List

  var gr = new GlideRecord('u_quote_list_request');

  gr.addQuery('u_emergent_id', "${sysparm_id}");

                              gr.orderBy('u_line_number');

  gr.query();

  var k = 5;

  var totExtPrice = 0;

  var numOfLines = 0;

  while(gr.next()){

  var yPop = yList + hList * k - 0.8;

  // Get only yyyy-mm-dd

  var pndString = gr.u_part_need_date;

      var pnd = pndString.split(" ");

      // Parse Extended Prices

      var extPrice = parseFloat(gr.u_extended_price);

      if (isNaN(extPrice)) {

      extPrice = 0;

      }

      // Display values

  doc.setFontType("normal");

  doc.text(xList + 1, yPop, gr.u_quantity);

  doc.text(xList + 1 + 10,   yPop, gr.u_part_number);

  doc.text(xList + 1 + 50,   yPop, gr.u_part_description);

  doc.text(xList + 1 + 90,   yPop, pnd[0]);

  doc.text(xList + 1 + 110, yPop, gr.u_cycle);

  doc.text(xList + 1 + 140, yPop, "$"+gr.u_unit_price);

  doc.text(xList + 1 + 160, yPop, "$"+extPrice);

  doc.text(xList + 1 + 180, yPop, gr.u_comments);

                totExtPrice = totExtPrice + extPrice;

  hL(k);

  k++;

  numOfLines++;

Please suggest something on this.

Thanks in advance!

Regards,

Prajakta Naik

[pvnaik]

Hi Ben,

The last part ( //Display values) of the code that i have given populates the contents into the table cells.

Regards,

Prajakta Naik

[BenPhillipsSNC]

Cool. So your comments are being populated here:

  doc.text(xList + 1 + 180, yPop, gr.u_comments);

I don't know what the first or second parameters are. However, it might not be important. What you can do is use JavaScript String methods to just insert line breaks, then see if those work.

Instead of:

doc.text(xList + 1 + 180, yPop, gr.u_comments);

You might want to try something like this:

1. var comments = gr.u_comments;

2. on the comments string object, use a for loop to loop through it at a length N that you set. This is the max characters you'd want in one row.

3. inside the loop, use JavaScript String methods to slice the string and insert a line break "\n" after each N.

4. Then call doc.text(xList + 1 + 180, yPop, comments);

(The yPop might also be involved. I am not sure how you are controlling the height of each row.)

[pvnaik]

Hi Ben,

Could'nt understand the steps that you have mentioned. However, I tried something like this:

var splitcomment = doc.splitTextToSize(gr.u_comments, 85);           // 85 max length to fit in the column                                  

doc.text(xList + 1 + 180, yList +hList * k - 4.1, splitcomment);

But, the above code is just breaking the line to fit inside the column border, if we enter 2-3 lines it overlaps and enters the next rows, also the comments for second row starts inside the first column itself.

I have changed the yPop variable value as well..yPop determines the start position of the text. Pls check the image below

Regards,

Prajakta

[americamo]

Thank you for perhaps the most level headed thing I have read today. Thanks for the info, super helpful. I mostly use http://www.AltoMerge.com   to merge my PDFs. I think it also allows you to fill the merged documents.

[lakshmipatel162]

Hi Naik,

Can you please share this code of PDF generation, i need similar code to generate PDF. If possible please share the code and steps to implement.

Regards

Lakshmi