How to move a popup window from a client handler? - google-apps-script

Question

I have a code that simulates a popup window (thanks to Waqar Ahmad) that is triggered by a client handler.
I would like to get this popup appear near the button that triggered it but with the script I have I see no way to move the window.
The code is below and the app is viewable here, if ever someone has an idea about how I should re-organise or change the script so that the popup window shows up near the button that fired the process ?
var choice = ['-','Choice 1','Choice 2','Choice 3','Choice 4']; // var definition
function doGet(){
var app = UiApp.createApplication().setStyleAttribute("background", "beige");
app.add(createMaskPanel_());//this is used to make popup panel modal
var mainPanel = app.createVerticalPanel().setStyleAttributes({'padding' : '15'});
app.add(mainPanel);
// idx holds the index value of the button that is pressed
var idx = app.createTextBox().setId('idx').setName('idx').setVisible(false);
mainPanel.add(idx);
//Make a panel for popup and add your popup elements
var popup = app.createVerticalPanel().setId('popup').setVisible(false)
.setStyleAttributes(
{'position': 'fixed',
'border' : '1px solid brown',
'padding' : '15',
'background' : 'beige',
'top' : '150PX',
'left' : '300PX',
'width' : '200',
'height':'120',
'zIndex' : '2'});
popup.add(app.createLabel('Select your choice').setId('label'));
var list = app.createListBox().setId('ppValue').setName('ppValue').setWidth('200')
.addItem(choice[0], '0').addItem(choice[1], '1').addItem(choice[2], '2').addItem(choice[3], '3').addItem(choice[4], '4');
popup.add(list);
var valHandler = app.createServerHandler('showVal').addCallbackElement(mainPanel).addCallbackElement(popup);;
popup.add(app.createButton('✖ Close / confirm').addClickHandler(valHandler));
app.add(popup);
var mask = app.getElementById('mask')
var ppHandler = app.createClientHandler().forTargets([popup,mask]).setVisible(true)
var flex = app.createFlexTable()
for(nn=1;nn<11;++nn){
flex.setText(nn,0,'Item nr '+nn)
var text = app.createTextBox().setHeight('26').setWidth('150').setId('val'+nn).setName('val'+nn)
flex.setWidget(nn,1,text);
var handler = app.createClientHandler().forTargets(idx).setText(nn).forTargets(text).setText('suggestion = ?');
flex.setWidget(nn,2,app.createButton('✐').setHeight('26').setId('btn'+nn).addClickHandler(handler).addClickHandler(ppHandler))
}
mainPanel.add(flex);
return app;
}
function createMaskPanel_(){ //Called when UI loads, initially it will be invisble. it needs to be made visible
var app = UiApp.getActiveApplication();
var mask = app.createVerticalPanel().setId('mask').setSize('100%', '100%') //maskPanel to mask the ui
.setStyleAttributes({
'backgroundColor' : '#F0F0F0',
'position' : 'fixed',
'top' : '0',
'left' : '0',
'zIndex' : '1',
'opacity' : '0.4'}).setVisible(false);
mask.add(app.createLabel('POPUP')
.setStyleAttribute('color', '#F0F0F0')
.setStyleAttribute('opacity', '0.6'));
return mask;
}
function showVal(e){
var app = UiApp.getActiveApplication();
var source = e.parameter.idx
var value = app.getElementById('val'+source)
value.setText('choice value = '+choice[e.parameter.ppValue])
var popup = app.getElementById('popup')
var mask = app.getElementById('mask')
popup.setVisible(false)
mask.setVisible(false)
return app
}
EDIT : Since the server handler seems to be the only way I gave it a try, the app is viewable here and the (final ?) code is below for info.
var choice = ['-','Choice 1','Choice 2','Choice 3','Choice 4','Choice 5','Choice 6','Last choice !'];//var definition
function doGet(){
var app = UiApp.createApplication().setStyleAttribute("background", "beige");
app.add(createMaskPanel_());//this is used to make popup panel modal
var top = '100PX'
var left = '265PX'
var mainPanel = app.createVerticalPanel().setStyleAttributes({'padding' : '15'});
app.add(mainPanel);
// item definitions
var idx = app.createTextBox().setId('idx').setName('idx').setVisible(false);
mainPanel.add(idx);
//Make a panel for popup and add your popup elements
var popup = app.createVerticalPanel().setId('popup').setVisible(false)
.setStyleAttributes(
{'position': 'fixed',
'border' : '1px solid brown',
'padding' : '10',
'background' : 'beige',
'top' : top,
'left' : left,
'width' : '200',
'height':'110',
'zIndex' : '2'});
popup.add(app.createLabel('Select your choice').setId('label'));
var list = app.createListBox().setId('ppValue').setName('ppValue').setWidth('160')
for(c in choice){list.addItem(choice[c], c)}
popup.add(list);
var valHandler = app.createServerHandler('showVal').addCallbackElement(mainPanel).addCallbackElement(popup);;
popup.add(app.createButton('✖ Close / confirm').addClickHandler(valHandler));
app.add(popup);
var idxHandler = app.createServerHandler('setidx').addCallbackElement(mainPanel)
var flex = app.createFlexTable()
for(nn=1;nn<11;++nn){
flex.setText(nn,0,'Item nr '+nn)
flex.setWidget(nn,1,app.createTextBox().setPixelSize(180,26).setId('val'+nn).setName('val'+nn));
flex.setWidget(nn,2,app.createButton('✐').setHeight('26').setId('btn'+nn).addClickHandler(idxHandler))
}
mainPanel.add(flex);
return app;
}
function setidx(e){
var app = UiApp.getActiveApplication();
var idx = app.getElementById('idx')
var idxval = Number(e.parameter.source.replace(/[a-z]/g,''))
idx.setValue(idxval);
var top = -30+38*idxval+'PX'
var left = '265PX'
var popup = app.getElementById('popup')
var mask = app.getElementById('mask')
var label = app.getElementById('label').setText('Select your choice (item '+idxval+')')
var value = app.getElementById('val'+idxval)
value.setText('suggestion = ?')
popup.setVisible(true)
mask.setVisible(true)
popup.setStyleAttributes(
{'top' : top,
'left' : left});
return app
}
function createMaskPanel_(){ //Called when UI loads, initially it will be invisble. it needs to be made visible
var app = UiApp.getActiveApplication();
var mask = app.createVerticalPanel().setId('mask').setSize('100%', '100%') //maskPanel to mask the ui
.setStyleAttributes({
'backgroundColor' : '#F0F0F0',
'position' : 'fixed',
'top' : '0',
'left' : '0',
'zIndex' : '1',
'opacity' : '0.6'}).setVisible(false);
mask.add(app.createLabel('POPUP')
.setStyleAttribute('color', '#F0F0F0')
.setStyleAttribute('opacity', '0.6'));
return mask;
}
function showVal(e){
var app = UiApp.getActiveApplication();
var source = e.parameter.idx
var value = app.getElementById('val'+source)
value.setText('choice value = '+e.parameter.ppValue+' ('+choice[Number(e.parameter.ppValue)]+')')
var popup = app.getElementById('popup')
var mask = app.getElementById('mask')
popup.setVisible(false)
mask.setVisible(false)
return app
}

Answer 1

Serge I did something simular using a dialogbox to get this kind of functionality.
In the proper function that shows the dialogbox I decide the position of the dialogbox.
I used it to enlarge a image so I just put the (entire) code I used for the dialogbox.
function showimg(e){
var app = UiApp.getActiveApplication();
//
// Style
//
var _showimg =
{
"position":"fixed",
"width":"200px", // here you can change size
"top":"100px", // and horizontal position maybe you can use your
"left":"100px", // your setidx function .
"opacity":"0.95",
"border":"none",
}
var _container =
{
"width":"90%",
"border":"none",
}
var _img= {
"background-color":"none",
"width":"90%",
"border":"4px solid f2f2f2",
}
var _btn= {
"background-color":"none",
"background":"none",
"width":"80px",
"height":"24px",
"border":"None",
"font-family":"hobo std",
"font-size":"0.9em",
"color":"3f3f3f",
"opacity":"1",
}
//
// aplication
//
var f = DocsList.find("YOURSPREADSHEET");
var id = f[0].getId();
var ss = SpreadsheetApp.openById(id);
var sheet = ss.getSheetByName("YOURSHEET");
var rows= sheet.getLastRow();
var cols = sheet.getLastColumn();
var dialogBox = app.createDialogBox(true, true).setId("dialogBox");
applyCSS(dialogBox, _showimg);
var cont = app.createAbsolutePanel().setId("cont").setVisible(true);
applyCSS(cont, _container);
var source = e.parameter.source;
for (var i = 1; i < rows ; i++) {
for (var j = 1; j <6 ; j++) {
if (source == "imgb"+[j]+[i]) {
if (j == 1) {
var img = app.createImage().setId('img').setUrl(sheet.getRange(i+1,[5]).getValue()).setVisible(true);
dialogBox.setText(sheet.getRange(i+1,[6]).getValue());
}
if (j == 2) {
var img = app.createImage().setId('img').setUrl(sheet.getRange(i+1,[7]).getValue()).setVisible(true);
dialogBox.setText(sheet.getRange(i+1,[8]).getValue());
}
}
app.getElementById( "imgb"+[j]+[i]).setEnabled(false);
//}
}
}
applyCSS(img,_img)
app.createImage().setId('img').setUrl("https://lh6.googleusercontent.com/-PTl6c-pfHoc/TzFvp1dteaI/AAAAAAAACTI/Mmx-7RU4i8g/s640/xxxxxxx.jpg").setVisible(true);
// applyCSS(img,_img)
var closeb = app.createButton("Close").setId("closeb").setTitle("close");
applyCSS(closeb,_btn);
var closeH = app.createServerClickHandler("closediag");
closeb.addClickHandler(closeH);
closeH.addCallbackElement(cont);
cont.add(img);
cont.add(closeb);
dialogBox.add(cont);
app.add(dialogBox);
return app;
}
The applyCss from James
function applyCSS(element, style){
for (var key in style){
element.setStyleAttribute(key, style[key]);
}
}

Answer 2

From what I've discovered so far using what I see in these replies, this methodology is positioning my widgets accordingly, but not the actual form itself. Unless, of course, I'm missing something, which is entirely possible. Thanks for the replies so far.