The CreatorCon Call for Content is officially open! Get started here.

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

pvnaik
Kilo Contributor

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'.


UI Page generating PDF.jpg

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

10 REPLIES 10

BenPhillipsSNC
Kilo Guru

Hi Prajakta



Does it line-wrap if there are spaces? I noticed the string you entered has no spaces.


Hi Ben,



No it doesnt line-wrap even if there are spaces.


verify below links to create tables



Working with jQuery DataTables



Tryit Editor v2.3


Do you have an idea of where your code populates the contents into the table cells? I think you would have to supply more of the code for more help here. All of it would be best, if it is ok with your company.