Google Apps Script의 간단한 팝업 또는 대화 상자

Question

제출 버튼을 눌렀을 때 나타나는 Google Apps Script Ui에 팝업을 추가하는 간단한 코드를 찾고 있습니다. 팝업 상자에는 메시지가 표시되고 팝업을 닫을 수있는 버튼이 있습니다.

나는 모든 곳을 뒤덮었습니다. 모든 것이 너무 복잡해 보이고, 내가해야 할 것보다 더 많은 일을합니다.

제출 버튼에 대한 현재 코드입니다.

 function doGet() { 
     var app = UiApp.createApplication(); 
     app.setTitle("My Logbook"); 

     var hPanel_01 = app.createHorizontalPanel(); 
     var vPanel_01 = app.createVerticalPanel(); 
     var vPanel_02 = app.createVerticalPanel(); 
     var vPanel_03 = app.createVerticalPanel(); 

     var submitButton = app.createButton("Submit"); 

     //Create click handler 
     var clickHandler = app.createServerHandler("submitData"); 
     submitButton.addClickHandler(clickHandler); 
     clickHandler.addCallbackElement(hPanel_01); 


     ////Test PopUp Panel 
     var app = UiApp.getActiveApplication(); 
     var app = UiApp.createApplication; 
     var dialog = app.createDialogBox(); 
     var closeHandler = app.createClientHandler().forTargets(dialog).setVisible(false); 
     submitButton.addClickHandler(closeHandler); 

     var button= app.createButton('Close').addClickHandler(closeHandler); 

     dialog.add(button); 
     app.add(dialog); 
     ////// 



     return app; 
    } 

Answer 1

zIndex를 사용해 보셨습니까? 그것은

var popupPanel = app.createVerticalPanel().setId('popupPanel') 
    .setVisible(false)  
    .setStyleAttribute('left', x) 
    .setStyleAttribute('top', y)   
    .setStyleAttribute('zIndex', '1') 
    .setStyleAttribute('position', 'fixed'); 

X = 패널 위치 앱의 상부 Z- 색인 = '층'에서 앱 Y = 패널 위치의 좌측 부분으로부터 ... 다른 모든 패널 위의 패널을 배치 귀하의 패널이 나타납니다. position = 패널이 (x, y)로 표시된 고정 위치에있을 것입니다.

제출을 클릭 할 때까지 가시성이 false로 설정되어 있습니다 (예 : '1', '2', '3' 제출 단추에 대한 클라이언트 핸들러를 사용하여 popupPanel을 표시되게하십시오. popupPanel에서 버튼을 클릭하면 클라이언트 처리기가 false로 다시 표시되도록 설정하면 사라집니다.

한 가지 더, 나는 당신이 활성 응용 프로그램을 얻은 다음 새로운 응용 프로그램을 만드는 것으로 나타났습니다. 새 앱을 만들 필요가 없습니다. 앱 내부에 새 패널 만 추가하면됩니다.

희망이 도움이됩니다.

Answer 2

팝업 -이 같은 것을 사용

 var table = app.createFlexTable(); 
     table.setStyleAttribute("position", "absolute"); 
     table.setStyleAttribute("background", "white");  

테이블에 항목을 추가하고 숨길 필요에 따라 보여줍니다.

Answer 3

대화 상자을 사용하여 팝업 할 수 있습니다. 대화 상자에 단추를 추가하십시오. 단추를 클릭하면 클라이언트 처리기을 추가하여 대화 상자를 표시하지 않도록 설정합니다.

이렇게하면 도움이됩니다.

편집

추가 "()".createClientHandler 후. 과 관련된 문제를 제거해야합니다. TypeError : 객체 함수 createDialogBox를 찾을 수 없습니다. createApplication() {/ * * /}

Answer 4

UiApp은 가치가 떨어 지므로 사용자 정의 사용자 인터페이스를 만들려면 HTMLService을 사용해야합니다.

는 메시지를 표시 안녕하세요 세계와 OK 버튼과 간단한 팝업 메시지를 표시합니다 Ui class

의 alert 방법을 사용하는 간단한 팝업 메시지를 표시합니다.

는

var html = HtmlService.createHtmlOutput("<div>Hello world</div>").setSandboxMode(HtmlService.SandboxMode.IFRAME); 
DocumentApp.getUi().showModalDialog(html, "My Dialog"); 

HtmlService.createHtmlOutputFromFile는 별도의 파일에 HTML을 표시 할 수 있습니다 UI 클래스의 showModalDialog 방법에 전달할 다음 템플릿을 만들 HTMLService를 사용하고, 대화 상자에서 사용자 정의 HTML 템플릿을 표시합니다. documentation