Google UI 서비스 팝업 패널 작동 방법

Question

Google Apps Script를 사용하여 애플리케이션을 구축 중입니다. 그러나 팝업 패널을 사용하여 응용 프로그램에서 내 패널 중 하나를 팝업하고 싶습니다. 검색을 시도했지만이 팝업 패널을 제대로 작동시키는 방법을 찾지 못했습니다.

누구나이 작업을 수행하는 방법을 알고 있습니까?

내가하려는 것은 세로 패널에 서비스 목록을 만드는 것입니다. 사용자가 서비스 링크 중 하나를 클릭하면 모달 방법과 함께 팝업 패널 기능을 사용하여 패널이 팝업됩니다. 따라서 사용자는 팝업 패널에서 서비스 세부 정보를 편집 할 수 있습니다. 사용자가 서비스를 업데이트하면 팝업 패널이 닫히고 서비스 목록이 포함 된 패널로 돌아갑니다.

감사

Answer 1

현재 팝업 패널은 그러나 당신은 클라이언트 핸들러 또는 서버 핸들러를 사용하여 다른 이벤트에 팝업을 만들 수 있습니다 사용자 정의 패널을 만들 수 있습니다 제대로 작동하지 않습니다.

다음은 클라이언트 처리기를 사용하여 클릭 이벤트에서 트리거 된 팝업의 데모를 보여주는 대략적인 코드입니다.

function doGet(){ 
    var app = UiApp.createApplication(); 

    app.add(createMaskPanel_());//this is used to make poup panel modal 

    var mainPanel = app.createVerticalPanel(); 
    app.add(mainPanel); 
    var btn = app.createButton('Open poup'); 
    mainPanel.add(btn); 

    //Makke a panel for poup and add your popup elements 
    var popup = app.createVerticalPanel().setId('popup').setVisible(false) 
    .setStyleAttributes(
    {'position': 'fixed', 
    'border' : '1px solid black', 
    'top' : '40%', 
    'left' : '43%', 
    'width' : '150', 
    'height':'150', 
    'zIndex' : '2'}); 
    popup.add(app.createTextBox()); 
    popup.add(app.createButton('Close').addClickHandler(app.createClientHandler().forTargets([app.getElementById('mask'), popup]).setVisible(false))); 
    app.add(popup); 


    btn.addClickHandler(app.createClientHandler().forTargets([app.getElementById('mask'), popup]).setVisible(true)); 

    return app; 
} 

function createMaskPanel_(){ //Called when the setting UI loads, initially it will be invisble. id needs to be made visible 
    //by accessing its id "mask" 
    var app = UiApp.getActiveApplication(); 
    var mask = app.createVerticalPanel().setId('mask').setSize('100%', '100%') //maskPanel to mask the ui 
    .setStyleAttributes({ 
    'backgroundColor' : '#f4f4f4', 
    'position' : 'fixed', 
    'top' : '0', 
    'left' : '0', 
    'zIndex' : '1', 
    'opacity' : '0.5'}).setVisible(false); 
    //Added a dummy element so that it spans to whole window. 
    //don't know why but it works 
    mask.add(app.createLabel('SBC Technology') 
      .setStyleAttribute('color', '#f4f4f4') 
      .setStyleAttribute('opacity', '0.5')); 
    return mask; 
}