how to format a text that I can copy/paste anywhere with data from a spreadsheet

Question

I have a database program on a spreadsheet with data classically ordered in rows and columns, what I'm working on is a UI that allows the user to search the database and shows results like shown below. The "table" shows the result and the 15 next items in a scrollable table with most important data and a text area in the bottom that should contain the selected item in a format that I could copy and paste in any document while keeping the layout (new line, spacing...).Note : the script should also detect wich row in the table has the focus. This text area should provide 2 (for now) so called 'formats', one for letters as shown in the screen capture and a second with all the fields (commas or tab separated) on a couple of rows (I called it 'raw data') for any other purpose (selection with radioButtons).

I managed to perform search, table populate and UI design but (here is finally the actual question) I'm not sure how to get the formatted text in the textarea... should I use HTML ?

Below are the screen capture and the UI code I use for now, I guess the picture makes things a bit more clear, at least I hope ;-)

function buildUi() {
   var app = UiApp.createApplication().setTitle("BrowseList Test")
       .setHeight(340).setWidth(800).setStyleAttribute("background-color","beige").setStyleAttribute('padding','20');
    var scroll = app.createScrollPanel().setPixelSize(750,150)
    var vpanel = app.createVerticalPanel();
    var cell = new Array();
    var cellWidth = [45,135,150,250,50,100]
    var row = new Array();
    for(vv=0;vv<15;++vv){
      row[vv]=app.createHorizontalPanel();
      vpanel.add(row[vv]);
       for(hh=0;hh<cellWidth.length;++hh){
        cell[hh+(vv)*cellWidth.length]=app.createTextBox().setWidth(cellWidth[hh]+"");
        row[vv].add(cell[hh+(vv)*cellWidth.length])
        }
      }
app.add(scroll.add(vpanel))
// Initial populate
var data = ss.getDataRange().getValues();
    for(vv=0;vv<15;++vv){
       for(hh=0;hh<cellWidth.length;++hh){
         var rowpos=vv+1+offset
         var cellpos = hh+(vv)*cellWidth.length
        cell[cellpos].setValue(data[rowpos][hh])
        }
      }
  var grid = app.createGrid(2,9).setWidth('700')
  grid.setWidget(1, 0, app.createLabel('search'));
  grid.setWidget(1, 1, app.createTextBox().setName('search').setId('search'));
  grid.setWidget(1, 2, app.createRadioButton('mode','strict'));
  grid.setWidget(1, 3, app.createRadioButton('mode','global').setValue(true));
  grid.setWidget(1, 5, app.createLabel(' ').setWidth('100'));
  grid.setWidget(1, 6, app.createLabel('show mode'));
  grid.setWidget(1, 7, app.createRadioButton('show','letter').setValue(true));
  grid.setWidget(1, 8, app.createRadioButton('show','raw data'));
  app.add(grid);

  var result = app.createTextArea().setPixelSize(700,100)
  app.add(result)

ss.show(app);
 }

Answer 1

Have you considered the Rich Text Area ? And use the setHTML method.

Answer 2

Why not create a flextable, to hold your search result. Changing that to the needed format (with commas) and storing via ScriptProperties you can copy/paste.