Proper syntax to load GUI form component in Flex Table using GAS in Google Sites

Question

In answer to this question, I was pointed in the helpful direction of using flex tables to display a short form to collect data (built via GUI) for each row in my table (displayed in Google Sites).

However, there appears to be some problem with the syntax. Specifically, although I can get the rest of the table to render properly, I CAN NOT get the GUI-built form to successfully render along with it.

function doGet(){
    var app     = UiApp.createApplication();
    var tab     = app.createFlexTable();
    app.add(tab
               .insertRow(0).insertRow(0).insertRow(0)
               .insertCell(0, 0).setText  (0, 0, "data01")
               .insertCell(0, 1).setText  (0, 1, "data02")
               .insertCell(0, 2).setWidget(0, 2, app.loadComponent("myGui"))
               .insertCell(1, 0)
               .insertCell(1, 1)
               .insertCell(2, 0)
               .setBorderWidth(5).setCellPadding(10).setCellSpacing(10));
    return app;
}

Any assistance will be greatly appreciated.

Answer 1

The .insertCell() has the flextable as returnvalue. The consecutive .setText() method therefore is not correct. With the FlexTable you can just use the setWidget method a couple of times. No need for separate .insertRow or .insertCell method calls. The FlexTable has the ability for each row to contain a different number of cells, but (with the snippet you provided) i see no need in this instance.

Example table with 1 row and 5 columns.

tab.setWidget(0, 0, <Widgets or plain text>);
tab.setWidget(0, 1, <Widgets or plain text>);
tab.setWidget(0, 2, <Widgets or plain text>);
tab.setWidget(0, 3, <Widgets or plain text>);
tab.setWidget(0, 4, <Widgets or plain text>);

This link shows all available methods en properties of the FlexTable. https://developers.google.com/apps-script/class_flextable

Did you base your code of the example code from google? Try Google'ing: '"Google apps script" FlexTable' and have a look at examples of other developers. It sounds strange but there are (much) better examples than the one from google (in my opinion) and it will give you some insight in the different ways you can reach your goal.

And lastly one tip. Readability of your code is very important, especialy when your writing larger peaces of code. If you stil want to use the .insertRow and .insertCell method calls try to use them in order like .insertRow(0).insertCell(0, 0)... so you construct each row consecutively and it is apparent what is done in each seperate row.

Hope this helps.