2017-12-15 15 views
0

Googleドライブのアドオンサイドバー内のボタンをクリックして、Googleドライブのファイルピッカーを読み込もうとしています。私はサイドバーから直接(モーダルダイアログで)ピッカーをロードする方法を考え出すことができていないアドオンサイドバーからGoogleファイルピッカーを開きます

問題は、その後、サイドバーにドキュメントIDをコールバック。

モーダルダイアログを正常に読み込んだ後、モーダルダイアログからピッカーを読み込むことができましたが、サイドバーからピッカーを直接読み込む方法を理解するのは苦労しています。

ご了承ください。私の現在のコードを以下に示します。

.GSファイル:

function onOpen(e) { 
    FormApp.getUi() 
    .createAddonMenu() 
    .addItem('Picker', 'showSidebar') 
    .addToUi(); 
} 

function showSidebar(){ 

    var ui = HtmlService.createHtmlOutputFromFile('Sidebar') 
    .setSandboxMode(HtmlService.SandboxMode.IFRAME) 
    .setTitle('Title'); 
    FormApp.getUi().showSidebar(ui); 

} 

function openPicker(){ 

    var html = HtmlService.createHtmlOutputFromFile('Picker') 
    .setWidth(600) 
    .setHeight(425) 
    .setSandboxMode(HtmlService.SandboxMode.IFRAME); 
    FormApp.getUi().showModalDialog(html, 'Select a file'); 

} 


function getOAuthToken() { 
    DriveApp.getRootFolder(); 
    return ScriptApp.getOAuthToken(); 
} 

サイドバーのHTML

<!DOCTYPE html> 
<html> 
    <head> 
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css"> 
    <base target="_top"> 
    </head> 
    <body> 
    <button onclick='openPicker()'>Select a file</button> 
    </body> 
</html> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
<script> 


function openPicker() { 
google.script.run 
.withSuccessHandler(success) 
.withFailureHandler(failure) 
.openPicker(); 
} 

function success() { 
console.log('success'); 
} 

function failure() { 
console.log('failure'); 
} 

</script> 

ピッカーHTML

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css"> 
    <script> 

    var DEVELOPER_KEY = ''; 
    var DIALOG_DIMENSIONS = {width: 600, height: 425}; 
    var pickerApiLoaded = false; 


    function onApiLoad() { 
     gapi.load('picker', {'callback': function() { 
     pickerApiLoaded = true; 
     }}); 
    } 


    function getOAuthToken() { 
     google.script.run 
     .withSuccessHandler(createPicker) 
     .withFailureHandler(showError) 
     .getOAuthToken(); 
    } 


    function createPicker(token) { 
    console.log("here"); 
     if (pickerApiLoaded && token) { 
     var picker = new google.picker.PickerBuilder() 
      // Instruct Picker to display only spreadsheets in Drive. For other 
      // views, see https://developers.google.com/picker/docs/#otherviews 
      .addView(google.picker.ViewId.DOCUMENTS) 
      // Hide the navigation panel so that Picker fills more of the dialog. 
      .enableFeature(google.picker.Feature.NAV_HIDDEN) 
      // Hide the title bar since an Apps Script dialog already has a title. 
      .hideTitleBar() 
      .setOAuthToken(token) 
      .setDeveloperKey(DEVELOPER_KEY) 
      .setCallback(pickerCallback) 
      .setOrigin(google.script.host.origin) 
      // Instruct Picker to fill the dialog, minus 2 pixels for the border. 
      .setSize(DIALOG_DIMENSIONS.width - 2, 
       DIALOG_DIMENSIONS.height - 2) 
      .build(); 
     picker.setVisible(true); 
     } else { 
     showError('Unable to load the file picker.'); 
     } 
    } 


    function pickerCallback(data) { 
     var action = data[google.picker.Response.ACTION]; 
     if (action == google.picker.Action.PICKED) { 
     var doc = data[google.picker.Response.DOCUMENTS][0]; 
     var id = doc[google.picker.Document.ID]; 
     var url = doc[google.picker.Document.URL]; 
     var title = doc[google.picker.Document.NAME]; 
     document.getElementById('result').innerHTML = 
      '<b>You chose:</b><br>Name: <a href="' + url + '">' + title + 
      '</a><br>ID: ' + id; 
     } else if (action == google.picker.Action.CANCEL) { 
     document.getElementById('result').innerHTML = 'Picker canceled.'; 
     } 
    } 


    function showError(message) { 
     document.getElementById('result').innerHTML = 'Error: ' + message; 
    } 
    </script> 
</head> 
<body> 
    <div> 
    <button onclick='getOAuthToken()'>Select a file</button> 
    <p id='result'></p> 
    </div> 
    <script src="https://apis.google.com/js/api.js?onload=onApiLoad"></script> 
</body> 
</html> 
+0

私の以前のコメントに申し訳ありません - 私はその質問全体を読んでいませんでした。単一のhtmlページを作成してサイドバーとして提供し、クライアント側のJSをそのページに移動することができます(トークン要求など)。おそらく私は何かを逃しています。 –

+0

@Anton Dementiev、単一のhtmlページを呼び出そうとしたとき、新しいダイアログウィンドウで開くのではなく、サイドバー内のピッカーを読み込んでいました。 – Johnny

+0

@AntonDementiev私はあなたが受け入れた解決策よりも正しい方向に進んでいたと思う。私は今、別の2つのhtmlページを持つことは、コールバック関数を介してサイドバーに文書IDを戻す問題を作成することを認識しています。ファイル間を移動する必要があることについてのガイダンスはありますか? – Johnny

答えて

関連する問題