Qfyilyi

I have two different functions than run as expected, but I cannot figure out how to combine them. What I want to acchieve:

1. The user click on a menu-item.


2. The user selects images from her Google Drive.


3. These images gets inserted on the slide on top of each other.

I have the following files:

• code.gs


• dialog.html

I have made them based on among others these tutorials:

• https://developers.google.com/apps-script/guides/dialogs


• https://developers.google.com/apps-script/articles/image-slides

In the latter mr. Chung asks us to: "Code challenges

If you want to expand your understanding or dive deeper into Apps Script coding, try to augment the sample above with the following upgrades:
Instead of online files, choose files in Google Drive
Use the Google Drive file picker interface (files first then folders)"

I want to do this, but I can not understand how.

My code.gs file:

    /**

     * Creates a custom menu in Google Sheets when the Slides opens.

     */

    function onOpen() {

      SlidesApp.getUi().createMenu('Tester kode')

          .addItem('Show sandbox', 'showPicker')

          .addItem('Insert images', 'imagesUrlArr')

          .addToUi();

    }



    /**

     * Setting the size of each image and then placing it on the same slide

     */



    function addImageSlide2(imageUrl, index) {

      var presentation = SlidesApp.getActivePresentation();

      var currentPage = SlidesApp.getActivePresentation().getSelection().getCurrentPage();

      var slide = currentPage;

      var image = slide.insertImage(imageUrl);

      var newWidth = 690; 

      var imgWidth = image.getWidth();

      var ui = SlidesApp.getUi();

      var imgHeight = image.getHeight();

      var forhold = imgHeight/imgWidth;

      var newHeight = forhold*newWidth;

       image.setLeft(14).setTop(14).setWidth(newWidth).setHeight(newHeight).setRotation(0);

    }



    /**

     * The driver application features an array of image URLs.

     */

    function imagesUrlArr() {

      var images = [

        'http://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png',

        'http://www.google.com/services/images/phone-animation-results_2x.png',

        'http://www.google.com/services/images/section-work-card-img_2x.jpg',

        'http://gsuite.google.com/img/icons/product-lockup.png',

        'http://gsuite.google.com/img/home-hero_2x.jpg'

       ];

      images.forEach(addImageSlide2);

    }



    /**

     * Displays an HTML-service dialog in Google Sheets that contains client-side

     * JavaScript code for the Google Picker API.

     */

    function showPicker() {

      var html = HtmlService.createHtmlOutputFromFile('dialog.html')

          .setWidth(1100)

          .setHeight(950)

          .setSandboxMode(HtmlService.SandboxMode.IFRAME);

      SlidesApp.getUi().showModalDialog(html, 'Velg bilder');

    }



    /**

     * Gets the user's OAuth 2.0 access token so that it can be passed to Picker.

     * This technique keeps Picker from needing to show its own authorization

     * dialog, but is only possible if the OAuth scope that Picker needs is

     * available in Apps Script. In this case, the function includes an unused call

     * to a DriveApp method to ensure that Apps Script requests access to all files

     * in the user's Drive.

     *

     * @return {string} The user's OAuth 2.0 access token.

     */

    function getOAuthToken() {

      DriveApp.getRootFolder();

      return ScriptApp.getOAuthToken();

    }

The imagesUrlArr work as it is supposed to. My goal is to make the result of the Picker the array instead of these test images.

I have gotten the Sandbox/Picker to work: When hitting the button Pick your images I get the result: a list of the file names, and another of the file's url. When the code is finished I will thens show a new button to insert these images in the slide. But for testing now, I have the buttons in the first view of the Sandbox.
The yellow buttons I need to make work. The yellow URLs from the blue area should be the new array used by the yellow button. But for testing I just use the sample URLs. But nothing happens when I hit the yellow buttons.

When I hit the Insert-images-button, I get the alerts, but no images are inserted. What am I doing wrong?

My dialog.html:

    <!DOCTYPE html>

<html>

<head>

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

  <script>

    // IMPORTANT: Replace the value for DEVELOPER_KEY with the API key obtained

    // from the Google Developers Console.

    var DEVELOPER_KEY = 'key here';

    var DIALOG_DIMENSIONS = {width: 950, height: 1040};

    var pickerApiLoaded = false;



    /**

     * Loads the Google Picker API.

     */

    function onApiLoad() {

      gapi.load('picker', {'callback': function() {

        pickerApiLoaded = true;

      }});

     }



    /**

     * Gets the user's OAuth 2.0 access token from the server-side script so that

     * it can be passed to Picker. This technique keeps Picker from needing to

     * show its own authorization dialog, but is only possible if the OAuth scope

     * that Picker needs is available in Apps Script. Otherwise, your Picker code

     * will need to declare its own OAuth scopes.

     */

    function getOAuthToken() {

      google.script.run.withSuccessHandler(createPicker)

          .withFailureHandler(showError).getOAuthToken();

    }



function getBildene() {

    alert("bildene");

       google.script.run.settinnbildene();

       //google.script.host.close();

    }

function closeDialog() {

       google.script.host.close();

    }



function settinnbildene() {

alert("hei");



  var images = [

    'http://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png',

    'http://www.google.com/services/images/phone-animation-results_2x.png',

    'http://www.google.com/services/images/section-work-card-img_2x.jpg',

    'http://gsuite.google.com/img/icons/product-lockup.png',

    'http://gsuite.google.com/img/home-hero_2x.jpg'

   ];

   alert("hei2 " + images);

  images.forEach(addImageSlide3);

}



function addImageSlide3(imageUrl, index) {



google.script.host.editor.focus();

//google.script.host.close();

alert("slide3");

  var presentation = SlidesApp.getActivePresentation();

   var currentPage = SlidesApp.getActivePresentation().getSelection().getCurrentPage();

  var slide = currentPage;

  var image = slide.insertImage(imageUrl);

  var newWidth = 690; 

  var imgWidth = image.getWidth();

  var ui = SlidesApp.getUi();

   var imgHeight = image.getHeight();

   var forhold = imgHeight/imgWidth;

   var newHeight = forhold*newWidth;

   image.setLeft(14).setTop(14).setWidth(newWidth).setHeight(newHeight).setRotation(0);

   google.script.host.close();

}





    /**

     * Creates a Picker that can access the user's spreadsheets. This function

     * uses advanced options to hide the Picker's left navigation panel and

     * default title bar.

     *

     * @param {string} token An OAuth 2.0 access token that lets Picker access the

     *     file type specified in the addView call.

     */

    function createPicker(token) {

      if (pickerApiLoaded && token) {



        var picker = new google.picker.PickerBuilder()



        .addView(new google.picker.DocsView().setIncludeFolders(true).setOwnedByMe(true))

            .enableFeature(google.picker.Feature.NAV_HIDDEN)

            .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)

            .hideTitleBar()

            .setOAuthToken(token)

            .setDeveloperKey(DEVELOPER_KEY)

            .setCallback(pickerCallback)

            .setOrigin(google.script.host.origin)

            .setSize(DIALOG_DIMENSIONS.width - 2,

                DIALOG_DIMENSIONS.height - 2)

            .build();

        picker.setVisible(true);

      } else {

        showError('Unable to load the file picker.');

      }

    }



    /**

     * A callback function that extracts the chosen document's metadata from the

     * response object. For details on the response object, see

     * https://developers.google.com/picker/docs/result

     *

     * @param {object} data The response object.

     */

    function pickerCallback(data) {

      var action = data[google.picker.Response.ACTION];

      if (action == google.picker.Action.PICKED) {



      var arradoc = data[google.picker.Response.DOCUMENTS];

       var arradocLen = arradoc.length;

       var resultat = "<p>Du har valgt følgende filer: </p><ul>";

       var urlListe = "";

        for (i = 0; i < arradocLen; i++) {

        var doc = data[google.picker.Response.DOCUMENTS][i];

        var id = doc[google.picker.Document.ID];

        var url = doc[google.picker.Document.URL];

        var title = doc[google.picker.Document.NAME];

        resultat += "<li>" + title + "</li>";

        urlListe += url + ",<br>";

      }



      resultat += "</ul><p>" + urlListe + "</p> <button onclick='getBildene()'>Sett inn valgte filer</button>";

        document.getElementById('result').innerHTML =  resultat;

      } else if (action == google.picker.Action.CANCEL) {

        document.getElementById('result').innerHTML = 'Picker canceled.';

      }

    }



    /**

     * Displays an error message within the #result element.

     *

     * @param {string} message The error message to display.

     */

    function showError(message) {

      document.getElementById('result').innerHTML = 'Error: ' + message;

    }



  </script>

</head>

<body>

  <div>

    <button onclick='getOAuthToken()'>Pick your images</button>

     <button onclick='settinnbildene()'>Insert your images</button>

     <input type="button" value="Run getBildene" onclick="google.script.run.withSuccessHandler(getBildene)" />

     <input type="button" value="Close" onclick="google.script.host.close()" />

    <div id='result'></div>

  </div>

  <script src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>

</body>

</html>

I appriciate any help!