Google Apps Script User Interface

Question

Well, I've been reading the documentation and I believe that I'm calling functions and passing parameters correctly, but for the life of me I can't get this simple UI code to work.

I'm generating a UI for a Spreadsheet using the following code:

function checkOut() {

  var app = buildUI();
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  spreadsheet.show(app);
}

function buildUI() {
  var gui = UiApp.createApplication();
  gui.setTitle("Check-Out/Check-In");
  gui.setStyleAttribute("background", "lavender");

  // Absolute panel for setting specific locations for elements
  var panel = gui.createAbsolutePanel();

  // Equipment ID#s Label
  var equipmentIDLabel = gui.createLabel("Equipment ID#s");
  equipmentIDLabel.setHorizontalAlignment(UiApp.HorizontalAlignment.CENTER);
  equipmentIDLabel.setSize("20px", "125px");
  equipmentIDLabel.setStyleAttributes({background: "SteelBlue", color: "white"});

  // Add all components to panel
  panel.add(equipmentIDLabel, 10, 0);

  gui.add(panel);

  return gui;
}

function getUIdata(eventInfo) {
  // I know how to get the data from each element based on ID
}

It generates the Absolute Panel correctly when checkOut() is called, but the EquipmentIDLabel is never added to the panel. I am basing the code on the simplistic design I created in the GUI builder (that will be deprecated in a few days, which is why I am writing the code so that I can change it later):

So what exactly is going wrong here? If I can figure out how to add one element, I can infer the rest by looking at the docs. I've never been any good at GUI development!

Answer 1

The specific problem in your code is the following line :

// Add all components to panel
  panel.add(equipmentIDLabel, 10, 0);

Simply change it to : panel.add(equipmentIDLabel);

..and you will see the field (at position 0,0).

As patt0 observes, you can then add OTHER components and use positioning. It seems to be a limitation of adding the first field to an absolutePanel.

Of course, the Google Script gui is now deprecated (since December 2014) but I was interested to try your code and see that it still basically executes (as at Feb 2016).

Answer 2

It looks like the absolute panel offset method is a little capricious and take control of your positioning, in my tests I have been able to position panels that are visible in the following way:

  panel.add(equipmentIDLabel);
  panel.add(equipmentIDField,150,0);
  panel.add(otherLabel);
  panel.add(otherField, 150, 20);

Try it out with trial and error, you may get the UI you need, if not I would move to an alternate layout, verticalPanel is a little better behaved and of course you can use forms as well.

Another small bug is that you inverted the length and hight in equipmentIDLabel.setSize("20px", "125px");

Let me know if I can be of more assitance

Answer 3

You could maybe use grid as an interesting alternative... here is an example :

// define styles
var labelStyle = {background: "SteelBlue", color: "white",'textAlign':'center','line-height':'20px','vertical-align':'middle','font-family':"Arial, sans-serif",'fontSize':'10pt'};// define a common label style
var fieldStyle = {background: "white", color: "SteelBlue",'font-family':"Courrier, serif",'fontSize':'11pt'};// define a common label style

function checkOut() {
  var app = buildUI();
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  spreadsheet.show(app);
}

function buildUI() {
  var gui = UiApp.createApplication();
  gui.setTitle("Check-Out/Check-In");
  gui.setStyleAttribute("background", "lavender");
  var panel = gui.createAbsolutePanel().setStyleAttribute('padding','10px');
  var grid = gui.createGrid(4,2).setWidth('300').setCellPadding(10);//define grid size in number of row & cols
  var equipmentID = ['equipmentIDLabel','equipmentIDLabel1','equipmentIDLabel2','equipmentIDLabel3'];// define labels in an array of strings
  for(var n=0 ;n<equipmentID.length ; n++){;// iterate
    var equipmentIDLabel = gui.createLabel(equipmentID[n]).setWidth('125').setStyleAttributes(labelStyle);
    var equipmentIDField = gui.createTextBox().setText('Enter value here').setName(equipmentID[n]).setSize("125", "20").setStyleAttributes(fieldStyle);
    grid.setWidget(n,0,equipmentIDLabel).setWidget(n,1,equipmentIDField);
  }
  gui.add(panel.add(grid));
  return gui;
}