Equivalent du target HTML en javascript ?

Le 18/01/2021 à 18:34

Bonjour

J'ai une feuille avec 10 vues filtrées et une sidebar.

Dans la sidebar, j'ai mis 10 boutons pour afficher les 10 vues filtrées. Sauf qu'au clic, au lieu d'afficher les vues filtrées de la feuille dans la feuille, ça les affiche dans la sidebar

Je pense que ça vient soit du code du script :

function visitPage(){
  window.location='https://docs.google.com/spreadsheets/........';
}

...soit du code du bouton dans la page HTML de la sidebar :

<input type="button" value="Afficher les trucs" onclick="window.location.href='https://docs.google.com/spreadsheets/....'" />

C'est le "window" qui pose problème ?

Je cherche à faire l'équivalent du target="" en HTML quand il y a des frames afin de pointer l'affichage dans la feuille.

Vous avez une idée, svp ? Merci d'avoir lu mon message !

Le 18/01/2021 à 19:23

Bonjour,

C'est un peu plus complexe qu'un simple target, il faut renvoyer vers une fonction du script avec google.script.run.mafonction()

Voici un exemple de dialogue avec la feuille https://www.sheets-pratique.com/fr/telechargements/calendriers/calendrier-cliquable-sheets-no526

Dans la partie html, tu as

google.script.run.mettreDate(this.textContent + '/' + mois + '/'+ annee);

ce qui appelle la fonction du script

function mettreDate(laDate) {
  var doc = SpreadsheetApp.getActiveSpreadsheet();
  var feuille = SpreadsheetApp.getActive();
  var r = feuille.getActiveRange();
  r.setValue(laDate);
}

Autre exemple ici aussi de dialogue avec la feuille https://www.sheets-pratique.com/fr/telechargements/finance/convertisseur-devises-sheets-no532

Le 18/01/2021 à 19:26

Bonjour,

L'affichage dans la fenêtre "_top" ne semble pas fonctionner ...

Par contre, si l'affichage dans un nouvel onglet ne te dérange pas, tu as :

function visitPage() {
  window.open('https://docs.google.com/spreadsheets/...');
}

Cordialement,

Le 18/01/2021 à 19:51

@Steelson : il semblerait qu'on ne puisse pas afficher une vue filtrée directement à l'aide d'un code Apps Script

Le 18/01/2021 à 21:18

Bonjour Sébastien,

au vu de ta réponse, je me suis demandé si j'avais bien compris le projet !

@zuhh, pourrais-tu nous faire une copie de ton projet et nous mettre le lien, je suis perdu

Le 18/01/2021 à 23:47

Merci à tous pour votre aide appréciée. Voici le projet :

Je souhaite faire une sidebar avec 10 boutons pour exécuter 10 vues filtrées dans l'onglet actif.

J'aimerais une sidebar, pas un menu déroulant, des boutons ou des liens. Je sais associer des filtres à des macros mais j'ai besoin de vues filtrées car les vues filtrées seront appliquées par plusieurs utilisateurs en simultané.

J'ai réussi à faire la sidebar mais au clic, les vues filtrées s'affichent dans la sidebar

Je ne sais pas si je n'arrive pas à faire la manip à cause du code ou si c'est impossible avec les vues filtrées.

screenshot
Le 19/01/2021 à 06:13

Merci zuhh, je comprends mieux le projet et surtout son intérêt

Sébastien a écrit :

@Steelson : il semblerait qu'on ne puisse pas afficher une vue filtrée directement à l'aide d'un code Apps Script

Sébastien, en effet, tu as sans doute raison.

Je vais quand même regarder dans la journée car on peut partager les vues filtrées moyennant l'ajout d'un id dans l'url : url/edit#gid=0&fvid=123456, est-ce que ce n'est pas une voie possible ?

on sort maintenant du topic tel que décrit dans le titre en réalité

Le 19/01/2021 à 10:43

Voici un essai avec la fonction de Sébastien et son jeu de données. Faites une copie et changez le id car de mon côté je vais continuer à y travailler ...

https://docs.google.com/spreadsheets/d/1Wuu0TPQUYrG6r7KXN2rDnubW4bDte32gVM8HpKnVBkQ/edit?usp=sharing

function onOpen(e) {
  SpreadsheetApp.getUi()
    .createMenu('🎭Navigateur🎭')
    .addItem('Ouvrir', 'showSidebar')
    .addToUi();
}

function showSidebar(){
  var ui = SpreadsheetApp.getUi();
  var html = HtmlService
    .createTemplateFromFile("index")
    .evaluate();
  html.setTitle("Vues filtrées :");
  ui.showSidebar(html);
} 

function monresult(num){
  try {
    var id = SpreadsheetApp.getActiveSpreadsheet().getId();
    var page = "https://docs.google.com/spreadsheets/d/" + id + "/edit#gid=0";
    linkOpen(page + "&fvid=" + num);
  }
  catch(err) {
    Browser.msgBox('Erreur "' + err + '" !');
   }
}

function linkOpen(url) {
  // Source : https://www.sheets-pratique.com/fr/codes/link-open
  SpreadsheetApp.getUi().showModalDialog(HtmlService.createHtmlOutput(`<!DOCTYPE html><html><head>
  <style>div{text-align:center}img{width:50px;animation:s 1s infinite linear}@keyframes s{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}</style>
  </head><body><div><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzA1YjM4ZSIgZD0iTTEyLDRWMkExMCwxMCAwIDAsMCAyLDEySDRBOCw4IDAgMCwxIDEyLDRaIi8+PC9zdmc+"></div><script>window.addEventListener('load',()=>{setTimeout(()=>{window.open('${url}'),google.script.host.close()},1000)});</script></body></html>`).setWidth(200).setHeight(65), 'Ouverture ...');
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <style>
    body{margin:12px;}
  </style>
</head>

<body>

  <p>Votre choix </p>
  <form>
    <input type="radio" name="vf" value="470203752">France<br>
    <input type="radio" name="vf" value="545561687">Canada<br>
  </form>

  <br>
  <div id="lastButtonBlock" class="block">
    <button onclick="myFunction()" class ="action button actionButton" > VALIDER </button>
    <button onclick="google.script.host.close()" class ="create deleteButton actionButton" > Fermer le navigateur </button>
  </div>
  <br>

  <div class="sidebar bottom">
    <span class="gray">Mike Steelson en 2020</span>
  </div>

<script>
function myFunction() {
  var x = (document.forms.length)-1;
  var vue = document.forms[x];
  var txt = "";
  var i;
  for (i = 0; i < vue.length; i++) {
    if (vue[i].checked) {
      txt = txt + vue[i].value ; 
    }
  }
  google.script.run.monresult([txt])

  for (i=0; i < vue.length; i++){
    //Si balise de type radio on met checked = false
    if(vue[i].type == 'radio') { 
      vue[i].checked = false
    };
  }
};
</script>

</body>
</html>

Est-ce que cela répond au sujet ? ou y-a-t'il plus simple ?

Autre solution : si les acteurs sont spécialisés par région/client/etc. autant faire en sorte qu'ils accèdent directement à l'URL url/edit#gid=0&fvid=123456

Le 19/01/2021 à 13:36

Sébastien,

Sébastien a écrit :

@Steelson : il semblerait qu'on ne puisse pas afficher une vue filtrée directement à l'aide d'un code Apps Script

j'ai aussi essayer de forcer à _self avec d'autres scripts, et rien ne se passe en effet !

@zuhh :

in fine, ne faut-il pas changer de méthode, oublier le superbe sidebar, mettre des liens hypertextes en ligne 1 par exemple en pointant sur les vues filtrées préformatées à l'aide de leur fvid ce que je viens d'ajouter en colonne J

Le 19/01/2021 à 14:40
Steelson a écrit :

ou y-a-t'il plus simple ?

Je n'ai pas testé ton code mais s'il affiche aussi la page dans un nouvel onglet, tu peux le faire plus simplement avec le bout de code que j'avais posté un peu plus haut :

window.open('https://docs.google.com/spreadsheets/...');

Le but de cette astuce est d'ouvrir un lien dans un nouvel onglet via Apps Script, mais si tu es déjà dans une sidebar ou boîte de dialogue, tu peux utiliser directement window.open.

Le 19/01/2021 à 14:55

Bonjour,

Merci pour vos conseils.

Merci infiniment pour la démo Steelson, c'est exactement ce que je cherche à faire ! Quand je vois le code, je n'y serais jamais arrivé. J'ai recopié le code.

Le 19/01/2021 à 14:59

in fine, ne faut-il pas changer de méthode, oublier le superbe sidebar, mettre des liens hypertextes en ligne 1 par exemple en pointant sur les vues filtrées préformatées à l'aide de leur fvid ce que je viens d'ajouter en colonne J

@Steelson

Oui, effectivement, je suis partagé entre la solution technique proposée parfaitement fonctionnelle et le fait qu'en termes d'ergonomie, c'est effectivement assez lourd par rapport à un simple lien direct dans la feuille. La sidebar, c'est un temps de chargement en plus. L'exécution du bouton aussi.

Je pense que je vais essayer de partir avec cette solution et si j'ai des retours comme quoi c'est trop lent, je remplacerai par des liens.

Le 19/01/2021 à 15:54

Oui merci Sébastien. Je l'avais essayé mais bêtement, dans le module gs, je me suis ensuite rendu compte qu'il fallait plutôt le mettre dans le module html.

Sébastien a écrit :
Steelson a écrit :

ou y-a-t'il plus simple ?

Je n'ai pas testé ton code mais s'il affiche aussi la page dans un nouvel onglet, tu peux le faire plus simplement avec le bout de code que j'avais posté un peu plus haut :

window.open('https://docs.google.com/spreadsheets/...');

Le but de cette astuce est d'ouvrir un lien dans un nouvel onglet via Apps Script, mais si tu es déjà dans une sidebar ou boîte de dialogue, tu peux utiliser directement window.open.

Mais après ce long parcours, qui m'a appris pas mal de choses, je pense que le plus simple est un lien hypertexte en ligne 1 !

Le 19/01/2021 à 16:46
@Steelson
Super !!!!!!!
Pour mon infos
Chaque fvid appartient-t-il à un seul classeur ou à un seul onglet ?
Merci
Gilbert
Le 19/01/2021 à 17:16

Gilbert

Gilbert_RGI a écrit :
Chaque fvid appartient-t-il à un seul classeur ou à un seul onglet ?

je ne sais pas ! je découvre, ce matin encore je ne savais pas ce qu'était une vue filtrée ! GSheets est plein de trésors ...

Le 20/01/2021 à 00:44

L'intérêt que je trouve aux vues filtrées c'est que si un utilisateur applique une vue filtrée, contrairement à un filtre, ça n'a pas d'incidence sur l'affichage des autres utilisateurs

Le 20/01/2021 à 15:42

J'ai nettement simplifié le code en ajoutant une fonction de recherche de l'ID du fichier et en tenant compte de la remarque de Sébastien,

en laissant 2 possibilités

  1. par sidebar
  2. par lien hypertexte
function onOpen(e) {
  SpreadsheetApp.getUi()
    .createMenu('🎭Navigateur🎭')
    .addItem('Ouvrir', 'showSidebar')
    .addToUi();
}

function showSidebar(){
  var ui = SpreadsheetApp.getUi();
  var html = HtmlService
    .createTemplateFromFile("index")
    .evaluate();
  html.setTitle("Vues filtrées :");
  ui.showSidebar(html);
} 

function getID() {
  let id = SpreadsheetApp.getActiveSpreadsheet().getId();
  return id;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <style>
    body{margin:12px;}
  </style>
</head>

<body>
  <p>Votre choix </p>
  <? var fID = getID(); ?>
  <form>
    <input type="radio" name="vf" value="https://docs.google.com/spreadsheets/d/<?= fID ?>/edit#gid=0&fvid=470203752">France<br>
    <input type="radio" name="vf" value="https://docs.google.com/spreadsheets/d/<?= fID ?>/edit#gid=0&fvid=545561687">Canada<br>
  </form>

  <br>
  <div id="lastButtonBlock" class="block">
    <button onclick="myFunction()" class ="action button actionButton" > VALIDER </button>
    <button onclick="google.script.host.close()" class ="create deleteButton actionButton" > Fermer le navigateur </button>
  </div>
  <br>

  <div class="sidebar bottom">
    <span class="gray">Mike Steelson en 2020</span>
  </div>

<script>
function myFunction() {
  var vue = document.forms[0];
  var txt = "";
  for (var i = 0; i < vue.length; i++) {
    if (vue[i].checked) {
      txt = vue[i].value ; 
    }
  }
  window.open(txt);

  for (i=0; i < vue.length; i++){
    if(vue[i].type == 'radio') { 
      vue[i].checked = false
    };
  }
};
</script>

</body>
</html>

rappel du lien en lecture pour copie si besoin https://docs.google.com/spreadsheets/d/1Wuu0TPQUYrG6r7KXN2rDnubW4bDte32gVM8HpKnVBkQ/edit?usp=sharing

Le 21/01/2021 à 12:48

@zuhh

n'oublie pas de clore le fil de discussion en cliquant sur

Rechercher des sujets similaires à "equivalent target html javascript"