Adding a variable to a Vertical Panel in GAS - user-interface

Question

I am working on a master sheet which should have a UiApp embedded into the active sheet. I have tried coding the first part with the labels in the first row, but I am stuck with getting the names[i] to appear on the left hand side of the table under the Tasks label.
I intend to make check boxes appear for every name under each task label.
Here is the code below:
function showTable()
{
var ss = SpreadsheetApp.getActive();
var TL = ss.getRange('B3').getValue();
//SetFontWeight("bold") for TL < *This does not work either* >
var startDate = ss.getRange('B2').getValue();
var strStartDate = startDate.getDate() + "/" + (startDate.getMonth() + 1) + "/" + StartDate.getFullYear();
var counta = ss.getRange('B4').getValue();
var app = UiApp.createApplication().setHeight(375).setWidth(620)
.setTitle('This is ' + TL + "'s Team Tasks for " + strStartDate);
var panel = app.createAbsolutePanel().setId('panel').setHeight(355).setWidth(605)
.setStyleAttribute('background', 'lightCyan');
var names = ss.getRange('B11:B').getValues();
for (var i = 0; 0 < names.length; i++) **//This is the part that does not work**
{
var agents = app.createLabel(names[i]);
}
var handler1 = app.createServerHandler('btnCloseWindow');
var btnCloseWindow = app.createButton('Close Window').addClickHandler(handler1).setStyleAttribute('background', 'lightYellow');
handler1.addCallbackElement(panel);
var myLabel0 = app.createLabel('Tasks');
var myLabel1 = app.createLabel('HW');
var myLabel2 = app.createLabel('MU');
var myLabel3 = app.createLabel('MOV');
panel.add(myLabel0, 40, 12)
panel.add(myLabel1, 100, 12)
panel.add(myLabel2, 140, 12)
panel.add(myLabel3, 175, 12)
panel.add(agents, 40, 30)
panel.add(btnCloseWindow, 490, 320)
app.add(panel);
ss.show(app);
return app;
};
function btnCloseWindow(e)
{
var ss = SpreadsheetApp.getActive();
var app = UiApp.getActiveApplication();
app.close();
return app;
};
How do you make a vertical panel with the names?
The names are defined in col B11:B and the tasks are defined in the labels.
This is my first time making a UiApp so any help is very much appreciated!

Answer 1

Try it like this, I don't know how the whole think should look like but the part with the list of names is now right...
function showTable()
{
var ss = SpreadsheetApp.getActive();
var TL = ss.getRange('B3').getValue()
ss.getRange('B3').setFontWeight('bold')
var startDate = ss.getRange('B2').getValue();
var strStartDate = Utilities.formatDate(startDate, ss.getSpreadsheetTimeZone(), 'dd/mm/yyyy');
var counta = ss.getRange('B4').getValue();
var app = UiApp.createApplication().setHeight(375).setWidth(620)
.setTitle('This is ' + TL + "'s Team Tasks for " + strStartDate);
var panel = app.createAbsolutePanel().setId('panel').setHeight(355).setWidth(605)
.setStyleAttribute('background', 'lightCyan');
var handler1 = app.createServerHandler('btnCloseWindow');
var btnCloseWindow = app.createButton('Close Window').addClickHandler(handler1).setStyleAttribute('background', 'lightYellow');
handler1.addCallbackElement(panel);
var myLabel0 = app.createLabel('Tasks');
var myLabel1 = app.createLabel('HW');
var myLabel2 = app.createLabel('MU');
var myLabel3 = app.createLabel('MOV');
panel.add(myLabel0, 40, 12)
panel.add(myLabel1, 100, 12)
panel.add(myLabel2, 140, 12)
panel.add(myLabel3, 175, 12)
var names = ss.getRange('B11:B').getValues();
Logger.log(names)
for(i=0;i<names.length;++i){
Logger.log(names[i][0]);// names is a 2D array, you only want the first and only column
if(names[i][0]!=''){ // don't show if empty
panel.add(app.createLabel(names[i][0])); //add label to the panel
}
}
panel.add(btnCloseWindow, 490, 320)
app.add(panel);
ss.show(app);
};

Answer 2

var names = ss.getRange('B11:B').getValues();
Should be,
var names = ss.getRange('B11:B1').getValues();
How I researched,
var data = ss.getRange("b11:b1").getValues();
data.forEach(function(element,index,array){Logger.log(index + " " + element )});
Logs, "0 dog
1 cat
2 frog
3 fish
4 hamster
5 dog
6 cat
7 frog
8 fish
9 hamster
10 dog"