2

I need to customize a fiori elements app (F1595 - stock multiple materials). It is required to print the result after filtering (with filters applied).

  1. Is there an existing way of print fiori elements data? (I haven't found one, which I don't understand why you won't be able to print your analyses per default)
  2. If not, how to extend this app with business application studio to add a print button?

It would even be ok to just print the page as pdf/image if there is no other option to print the data but I wan't to check the possibilities first.

UPDATE:

I've created a jQuery script to load the html of the analytics table data to a new table and print it, which works for tables, that fit screen size. Larger tables seems to dynamically load new rows while scrolling but removing all the rows, that are out of screen. I'll share my script here:

const table = [];
const tabledetails = {};
const getAnalyticalTable = () => {
    $.each($('table'), function(){
      let id = $(this).attr('id');
      let prefix = id.split("--")[0];
      let tabledesc = id.split("--")[1];

      if(id.indexOf("analyticalTable") !== -1)
      {
        table.includes(prefix) ? "" : table.push(prefix);
        table.includes(tabledesc) ? "" : table.push(tabledesc);
      }
      
   });

      for (let i = 0; i < table.length; i++)
      {
    if(table[i].indexOf("header") !== -1)
    {
       tabledetails['header'] = $(document.getElementById(table[0]+"--"+table[i]));
    }
    if(table[i].indexOf("-table") !== -1 && table[i].indexOf("-fixrow-bottom") === -1)
    {
       tabledetails['body'] = $(document.getElementById(table[0]+"--"+table[i]));
    }
    if(table[i].indexOf("fixrow-bottom") !== -1)
    {
       tabledetails['footer'] = $(document.getElementById(table[0]+"--"+table[i]));
    }
      }
    
    return tabledetails;
}



const buildPrintableTable = (tabledetails) => {
    let table = '<table><thead><tr>';
    $.each(tabledetails['header'].find('td'), function(){
        table += '<th>'+$(this).text()+"</th>";
    });
    table += "</tr></thead>";

    $.each(tabledetails['body'].find('tr'), function(){
        table += '<tr>';
        $.each($(this).find('td'), function() {
            table += '<td>'+$(this).text()+"</td>";
        });
        table += '</tr>';
    });

    table += "<tbody>";

    return table;
}

const printTable = (html) => {
    var win = window.open("about:blank", "Print View");
    win.document.write(
    '<html>\
      <body>\
      </body>\
      </html>');
      win.document.writeln(html);
      setTimeout(function() {
        win.document.close();
        win.focus();
     //   win.print();
     //  win.close();
      
     }, 300);
}

let tableData = getAnalyticalTable();
let htmlTable = buildPrintableTable(tableData);
printTable(htmlTable);

Anyone knows, how to load the whole table on client side only? - This would be an appropriate workaround to print the data.

toffler
  • 1,231
  • 10
  • 27
  • 1
    You could let users [export the table to spreadsheet](https://experience.sap.com/fiori-design-web/smart-table/#export-to-spreadsheet) and then print the exported spreadsheet. I think UI5 is working on a feature to allow exporting data as a printable PDF. You could follow https://github.com/SAP/openui5/issues/2629 – Boghyon Hoffmann Jul 14 '22 at 16:13
  • @BoghyonHoffmann... thanks, the only problem with exporting to spreadsheet is, that all the groupings/sums etc. are lost. I really hope they are working on it but since this is open since 2019, I'm not so sure :) – toffler Jul 18 '22 at 04:32
  • I don't know if this is helpful to you or not but maybe check out https://stackoverflow.com/questions/17293135/download-a-div-in-a-html-page-as-pdf-using-javascript which uses https://www.freakyjolly.com/multipage-canvas-pdf-using-jspdf/ I hope its helpful – Patrick Hume Jul 19 '22 at 10:35

0 Answers0