0

Google Apps Script を使用してアプリケーションを構築しています。ただし、ポップアップ パネルを使用して、アプリケーション内のパネルの 1 つをポップアップしたいと考えています。検索しようとしましたが、このポップアップ パネルを適切に機能させる方法の例が見つかりませんでした。

これを機能させる方法を知っている人はいますか？

私がやろうとしているのは、垂直パネルにサービスのリストを作成することです。ユーザーがサービス リンクの 1 つをクリックすると、ポップアップ パネル機能とモーダル メソッドを使用してパネルがポップアップします。したがって、ユーザーはポップアップ パネルでサービスの詳細を編集できます。ユーザーがサービスを更新すると、ポップアップ パネルが閉じて、サービスのリストを含むパネルに戻ります。

ありがとう

4

1 に答える 1

2

現在、ポップアップ パネルは正しく機能しませんが、クライアント ハンドラまたはサーバー ハンドラを使用して、さまざまなイベントでポップアップする独自のカスタム パネルを作成できます。

以下は、クライアント ハンドラーを使用してクリック イベントでトリガーされるポップアップのデモを示す大まかなコードです。

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;
}
于 2012-11-30T09:37:18.100 に答える