Liste déroulante dans boîte de dialogue

dubs_one · Message par **dubs_one** » 08 févr. 2023 00:45

Bonjour,
Je m'en remets à la communauté... Est-il possible de proposer dans une boîte de dialogue une liste déroulante plutôt qu''un champ de saisie ?

Voici mon bout de code :

function exportMailUtilisateur() {
const ongletID = SpreadsheetApp.getActiveSpreadsheet().getSheetName();
if(ongletID == 'FAB'){var matriceID = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('MATRICE');}
if(ongletID == 'FAB2'){var matriceID = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('MATRICE2');}
if(ongletID == 'FAB' || ongletID == 'FAB2'){
const fabID = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(ongletID);
var ui = SpreadsheetApp.getUi();
var result = ui.prompt('Renseignez votre mail :',ui.ButtonSet.OK_CANCEL);
var button = result.getSelectedButton();
var mailID = result.getResponseText();
if (button == ui.Button.OK) {
}}}

Comme il n'y a pas beaucoup de destinataires possibles, je peux récupérer cette liste depuis une colonne prévue à cet effet sur une feuille de calcul, sinon les mettre directement dans le code.gs si c'est plus pratique.
L'idée est de rendre l'action plus rapide aux quelques utilisateurs qui pourraient sélectionner leur mail plutôt que le saisir à chaque fois...

J'ai vu que l'on pouvait créer une boîte de dialogue en html également, mais je ne maitrise pas ce code (non plus)...

NC_Quentin · Message par **NC_Quentin** » 08 févr. 2023 10:09

Bonjour,

Hélas, il n’y a pas de moyen purement Apps Script de produire une liste déroulante, en tous les cas pas que je sache. Il faut donc utiliser du HTML avec du Javascript pour récupérer la valeur sélectionnée, et potentiellement du Javascript pour mettre les différentes options dans le select si celles-ci sont dynamiques et changent en fonction du code ou de données externes (ce qui a l’air d’être le cas ici).

Voici une version très simplifiée du code, histoire d’avoir une base si tu veux essayer de partir de là pour construire ce dont tu as besoin.

Apps Script (Code.gs) :

Code : Tout sélectionner

function showSelectDialogBox() {
  let htmlOutput = HtmlService.createHtmlOutputFromFile("select").setWidth(250).setHeight(200);
  SpreadsheetApp.getUi().showModalDialog(htmlOutput, "Un select simple");
}
function okButton(selectedValue){
  SpreadsheetApp.getUi().alert(`La valeur sélectionnée était ${selectedValue}`);
}

HTML (select.html)

Code : Tout sélectionner

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <!-- Le select avec ses différentes options -->
    <!-- cf. https://developer.mozilla.org/fr/docs/Web/HTML/Element/select -->
    <select id="select_id">
      <option value="1" selected>Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    <!-- Un bouton pour valider la saisie et fermer la fenêtre modale -->
    <!-- Le onclick permet de déclencher un événement (du Javascript) lorsqu’on clique dessus -->
    <button onclick="clickButton()">
      Ok
    </button>
    <!-- La balise script qui contient notre code -->
    <script>
      // La fonction qui s’exécute lorsqu’on clique sur le bouton
      function clickButton(){
        // On récupère le "value" du select, qui est le "value" de l’option sélectionnée
        let selectedOptionValue = document.getElementById("select_id").value;
        // On envoie la valeur du select côté serveur (dans Apps Script)
        // cf. https://developers.google.com/apps-script/guides/html/reference/run
        google.script.run.okButton(selectedOptionValue);
        // On ferme la fenêtre de dialogue
        // cf. https://developers.google.com/apps-script/guides/html/reference/host
        google.script.host.close();
      }
    </script>
  </body>
</html>

J’ai mis des commentaires pour expliquer un peu la logique, une fois copié-collé dans Apps Script ce sera plus clair qu’en vert complet comme ici !

dubs_one · Message par **dubs_one** » 08 févr. 2023 14:24

Bonjour NC_Quentin,

Merci pour ta réponse ! Je m'en doutais un peu...
Je vais tester le mix html/java avec ton code et je reviens vers toi !
N'ayant pas de raison de mettre à jour dynamiquement ma petite liste de mail, je devrais pouvoir m'en sortir sans passer par un AR entre les 2 codes.

Petite question subsidiaire : comment faites-vous pour mettre le code dans une fenêtre distincte du texte dans vos réponses ?
C'est quand même plus clair que mon mode "Citation" en italique

NC_Quentin · Message par **NC_Quentin** » 08 févr. 2023 14:28

Pour le code sur les posts, c’est un peu une option cachée (il faut que j’aille voir quelqu’un à ce sujet d’ailleurs), mais c’est du simple BBCode : il faut englober le code avec les balises [code] [/code], tout simplement !

Bon courage pour le projet, c’est un peu compliqué les premiers pas en HTML + Javascript, mais une fois les premières étapes passées ça vient tout seul

dubs_one · Message par **dubs_one** » 10 févr. 2023 00:26

C'est génial !

J'ai pu adapter ton code et ça marche parfaitement !

Un grand merci NC_Quentin pour ton aide précieuse

NumAgora

Liste déroulante dans boîte de dialogue Le sujet est résolu

Liste déroulante dans boîte de dialogue

Re: Liste déroulante dans boîte de dialogue

Re: Liste déroulante dans boîte de dialogue

Re: Liste déroulante dans boîte de dialogue

Re: Liste déroulante dans boîte de dialogue

Rejoignez la discussion 💬

Inscrivez-vous dès aujourd'hui

Connectez-vous