Display files and folders in Google Apps Script web app

Question

I'm developing a web app with Google apps script where the user will be able to search for and open files from their drive. Right now I display the files with this loop:

var files = DriveApp.searchFiles('title contains "banana"');
var fileCount = 0;

while (files.hasNext()) {
  var file = files.next();
  app.getElementById('displayFilesPanel').add(app.createAnchor(file.getName() + ' - ' + file.getOwner().getEmail(), file.getUrl()));
  fileCount++;
}

The problem here is that the getOwner() method takes quite some time (about 0.1 seconds) which adds up quite fast. The other thing is that it doesn't look very nice with these links representing files.

Is there any way to do these searches with DriveApp.searchFiles() and display the results with something else than anchors/links?

Edit: As both Zig Mandel and Serge insas mentioned HTML-Service should be considered to make it look better. I found that the DriveApp.searchFiles-function was not very useful because when i use it with parameters like 'title contains "banana"' it will not finish within the 5 min timeout limit. The thing is that it found about 40 matches but then went on and probably checked all the other (>120000) files in my drive. In my case I went with the getAllFilesForPaging(number, token)-function and checked every file if the title contained "banana" with the .indexOf('banana') != -1-method.

Answer 1

You cant get arround the speed issue with DriveApp. Its apparently doing another roundtrip to get the owner's email. To make it look better use htmlService instead of uiApp. In both you can add file icons to make it look better.

Answer 2

Concerning the way it looks, even if Zig is right when he recommends HTML service , it is still possible to get interesting results using UiApp.

See that link for example where an animated gif represents the link

That said, I have to admit it is not the simplest thing on earth :-) but it still works !

Here is the code I used to get the example above (full app code, look at the 2 widgets I use):

function doGet(){
  var app = UiApp.createApplication().setStyleAttribute("background", "#CCCCFF").setTitle('Anchor Test')
  var top = '100PX';// define dimensions and position
  var left = '100PX';
  var width = '80PX';
  var height = '80PX';
  var mainPanel = app.createVerticalPanel();

  var customAnchor = app.createHorizontalPanel().setId('usethisId')
  addStyle(customAnchor,top,left,width,height,'1','1')

  var image = app.createImage("https://dl.dropbox.com/u/211279/Time-change-clock_animated_TR80.gif")
  addStyle(image,top,left,width,height,'1','1')

  var realAnchor = app.createAnchor('This is the Anchor', 'https://sites.google.com/site/appsscriptexperiments/home')  
  addStyle(realAnchor,top,left,width,height,'2','0')


  customAnchor.add(realAnchor);
  customAnchor.add(image)
  mainPanel.add(customAnchor);
  app.add(mainPanel);
  return app;
}

function addStyle(widget,top,left,width,height,z,visibility){
widget.setStyleAttributes( 
    {'position': 'fixed', 
     'top' : top,
     'left' : left,
     'width' : width, 
     'height':height,
     'opacity' : visibility,  
     'zIndex' : z});
   }  

About speed : no comment, it is indeed very slow and if you have lots of files it happens that you just can't reach the end of the list because of the 5 minutes limit... no solution that I know :-/