0
Ich suche eine Google Drive Dateiauswahl zu laden, indem Sie auf eine Schaltfläche in einem Google-Formular Add-on Seitenleiste klicken.öffnen Sie Google Dateiauswahl von Add-on-Sidebar
Problem
Ich habe zu arbeiten, nicht in der Lage gewesen, wie die Kommissionierer (in einem modalen Dialog) zu laden direkt aus dem Sidebar Rückruf, dann die Dokument-ID in die Seitenleiste.
Ich konnte erfolgreich einen modalen Dialog laden und dann den Picker aus dem modalen Dialog laden, aber ich habe Mühe zu verstehen, wie man den Picker direkt aus der Sidebar lädt.
Jede Anleitung wird geschätzt. Mein aktueller Code ist unten abgebildet.
.gs Datei:
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();
}
Sidebar 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>
Picker 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>
Entschuldigung für meinen vorherigen Kommentar - Ich habe die Frage nicht vollständig gelesen. Sie können einfach eine einzelne HTML-Seite als Seitenleiste erstellen und bereitstellen und das clientseitige JS auf diese Seite verschieben (Token-Anfrage usw.). Vielleicht vermisse ich etwas. –
@Anton Dementiev, als ich versuchte, eine einzelne HTML-Seite aufzurufen, wurde die Auswahl in der Seitenleiste geladen, anstatt sie in einem neuen Dialogfenster zu öffnen. – Johnny
@AntonDementiev Ich glaube, Sie waren mehr auf dem richtigen Weg als die Lösung, die ich akzeptierte. Ich erkenne jetzt, zwei getrennte HTML-Seiten verursachen Probleme, die Dokument-ID zurück zu der Seitenleiste durch die Rückruffunktion zu erhalten. Irgendwelche Hinweise, was ich zwischen den Dateien bewegen muss? – Johnny