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):

![Nothing special](https://i.stack.imgur.com/jHONr.png)

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: 
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;
}

```

![enter image description here](https://i.stack.imgur.com/U1b4n.jpg)
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