I am a beginner in development and I am currently working on the development of a web app under Google Apps Script.
This one is composed of two parts:
- a form so that different users can make requests
- a home page where you can see in a table all the requests that have been made.
These two pages work perfectly. However, I would like to add the possibility to edit and/or delete a request from the table on the home page. So I added an "edit" and "delete" button in my table for each row.
When I click on the "edit" button, I save the id of the selected request in a global variable with the Apps Script and then I am redirected to the form to edit my request.
This is the edit's button :
<button type="button" onClick="editDemande();">Éditer</button>
This is the function launched on click event :
function editDemande(){
// Récupère l'id de la demande à éditer et transfère celui-ci dans une variable globale persistante
var id = event.srcElement.id;
google.script.run.withSuccessHandler().transfertIdDemande(id);
// Ouvre le formulaire "Édition de la demande"
var url = document.getElementById("url").value;
var link = document.createElement('a');
link.href = url "?page=Édition demande";
link.id = 'linkURL';
document.body.appendChild(link);
document.getElementById("linkURL").click();
}
And this is the apps script's function that allows me to register my id :
function transfertIdDemande(id){
PropertiesService.getScriptProperties().setProperty("idDemande",id);
}
When the form is fully loaded, a function is executed using this code:
document.addEventListener("DOMContentLoaded",changeValuesOfEditForm);
And this is the function :
function changeValuesOfEditForm(){
google.script.run.withSuccessHandler(modifyValues).getIdDemande();
}
With this, I can automatically fill in the form fields corresponding to the request id :
function modifyValues(id){
// Modification de l'Id
document.getElementById("idDemande").value = id;
document.getElementById("idDemande").readOnly = true;
// Secteur
google.script.run.withSuccessHandler(secteur => {
document.getElementById("secteur").value = secteur;
}).getSecteurEdit(id);
// Zone
// google.script.run.withSuccessHandler(zone => {
// document.getElementById("zone").value = zone;
// }).getZoneEdit(id);
// Modification de la description
google.script.run.withSuccessHandler(description => {
document.getElementById("description").value = description;
}).getDescriptionEdit(id);
// Modification de l'équipement stratégique
google.script.run.withSuccessHandler(equipementStratEdit => {
document.getElementById("equipementStrategique").value = equipementStratEdit;
}).getEquipementEdit(id);
// Modification de l'intervention possible en prod
google.script.run.withSuccessHandler(interventionProdEdit => {
document.getElementById("interventionProd").value = interventionProdEdit;
}).getInterventionEdit(id);
// Modification de la disponibilité de la zone
google.script.run.withSuccessHandler(dispoZone => {
document.getElementById("disponibiliteZone").value = dispoZone;
}).getDispoZoneEdit(id);
// Modification du délai
google.script.run.withSuccessHandler(delai => {
if (delai === "Inférieur à 2 mois" || delai === "Inférieur à 1 mois" ||
delai === "Inférieur à 2 semaines" || delai === "Inférieur à 1 semaine"){
document.getElementById("delai").value = delai;
}
else{
document.getElementById("delai").value = "Demande urgente";
document.getElementById("divDemandeUrgente").style.display = "block";
document.getElementById("dateDemandeUrgente").value = delai;
}
}).getDelaiEdit(id);
}
There're apps script's function in link with this part of code :
function getSecteurEdit(id){
const classeur = SpreadsheetApp.getActiveSpreadsheet();
const feuille = classeur.getSheetByName("Demandes");
var tDemandes = feuille.getRange("A3:B").getValues().filter(d=>d[0] != "");
var secteurId = "";
for (let i = 0; i < tDemandes.length; i ){
if (tDemandes[i][0] === id){
secteurId = tDemandes[i][1];
break;
}
}
return secteurId;
}
function getDescriptionEdit(id){
const classeur = SpreadsheetApp.getActiveSpreadsheet();
const feuille = classeur.getSheetByName("Demandes");
var tDemandes = feuille.getRange("A3:J").getValues().filter(d=>d[0] != "");
var descriptionId = "";
for (let i = 0; i < tDemandes.length; i ){
if (tDemandes[i][0] === id){
descriptionId = tDemandes[i][9];
break;
}
}
return descriptionId;
}
function getEquipementEdit(id){
const classeur = SpreadsheetApp.getActiveSpreadsheet();
const feuille = classeur.getSheetByName("Demandes");
var tDemandes = feuille.getRange("A3:F").getValues().filter(d=>d[0] != "");
var equipementId = "";
for (let i = 0; i < tDemandes.length; i ){
if (tDemandes[i][0] === id){
equipementId = tDemandes[i][5];
break;
}
}
return equipementId;
}
function getInterventionEdit(id){
const classeur = SpreadsheetApp.getActiveSpreadsheet();
const feuille = classeur.getSheetByName("Demandes");
var tDemandes = feuille.getRange("A3:G").getValues().filter(d=>d[0] != "");
var interventionId = "";
for (let i = 0; i < tDemandes.length; i ){
if (tDemandes[i][0] === id){
interventionId = tDemandes[i][6];
break;
}
}
return interventionId;
}
function getDispoZoneEdit(id){
const classeur = SpreadsheetApp.getActiveSpreadsheet();
const feuille = classeur.getSheetByName("Demandes");
var tDemandes = feuille.getRange("A3:H").getValues().filter(d=>d[0] != "");
var dispoZoneId = "";
for (let i = 0; i < tDemandes.length; i ){
if (tDemandes[i][0] === id){
dispoZoneId = tDemandes[i][7];
break;
}
}
return dispoZoneId;
}
function getDelaiEdit(id){
const classeur = SpreadsheetApp.getActiveSpreadsheet();
const feuille = classeur.getSheetByName("Demandes");
var tDemandes = feuille.getRange("A3:I").getValues().filter(d=>d[0] != "");
var dispoZoneId = "";
for (let i = 0; i < tDemandes.length; i ){
if (tDemandes[i][0] === id){
if(isValidDate(tDemandes[i][8])){
dispoZoneId = Utilities.formatDate(new Date(tDemandes[i][8]),"GMT 1","yyyy-MM-dd");
break;
}
else{
dispoZoneId = tDemandes[i][8];
break;
}
}
}
return dispoZoneId;
}
All my fields are automatically filled in except for the drop-down menus. Since they are cascaded, this does not work. I tried to include a google.script.run in another google.script.run but it should not be allowed.
This is my apps script's function allowed me to show values of each dropdown after clicking :
function getSecteurs(){
const classeur = SpreadsheetApp.getActiveSpreadsheet();
const feuille = classeur.getSheetByName('BDD');
var secteurs = feuille.getRange('A2:A').getValues().filter(d =>d[0] !== '');
var tSecteurs = [];
secteurs.forEach(function(x){
if(tSecteurs.indexOf(x[0]) === -1){
tSecteurs.push(x[0])
}
});
return tSecteurs.map(d => '<option>' d '</option>').join('');
}
function getZones(secteur){
const classeur = SpreadsheetApp.getActiveSpreadsheet();
const feuille = classeur.getSheetByName('BDD');
var secteursZones = feuille.getRange('A2:B').getValues().filter(d =>d[0] !== '');
var zones = [["Choisissez..."]], tZones = [];
for (let i = 0; i < secteursZones.length; i ){
if (secteursZones[i][0] == secteur){
zones.push([secteursZones[i][1]]);
}
}
zones.push(["Non définie"]);
zones.forEach(function(x){
if(tZones.indexOf(x[0]) === -1){
tZones.push(x[0])
}
});
var selectZones = [];
for (let i = 0; i < tZones.length; i ){
if(tZones[i] === "Choisissez..."){
selectZones.push('<option disabled selected>Choisissez...</option>');
}
else{
selectZones.push('<option>' tZones[i] '</option>');
}
}
return selectZones.join('');
}
function getSalles(secteur,zone){
const classeur = SpreadsheetApp.getActiveSpreadsheet();
const feuille = classeur.getSheetByName('BDD');
var zonesSalles = feuille.getRange('A2:C').getValues().filter(d =>d[0] !== '');
var salles = [["Choisissez..."]], tSalles = [];
for (let i = 0; i < zonesSalles.length; i ){
if (zonesSalles[i][0] == secteur){
if (zonesSalles[i][1] == zone){
salles.push([zonesSalles[i][2]]);
}
}
}
salles.push(["Non définie"]);
salles.forEach(function(x){
if(tSalles.indexOf(x[0]) === -1){
tSalles.push(x[0])
}
});
var selectSalles = [];
for (let i = 0; i < tSalles.length; i ){
if(tSalles[i] === "Choisissez..."){
selectSalles.push('<option disabled selected>Choisissez...</option>');
}
else{
selectSalles.push('<option>' tSalles[i] '</option>');
}
}
return selectSalles.join('');
}
function getMachines(salle){
const classeur = SpreadsheetApp.getActiveSpreadsheet();
const feuille = classeur.getSheetByName('BDD');
var sallesMachines = feuille.getRange('C2:E').getValues().filter(d =>d[0] !== '');
var machines = [["Choisissez..."]], tMachines = [];
for (let i = 0; i < sallesMachines.length; i ){
if (sallesMachines[i][0] == salle){
machines.push([sallesMachines[i][2]]);
}
}
machines.push(["Non définie"]);
machines.forEach(function(x){
if(tMachines.indexOf(x[0]) === -1){
tMachines.push(x[0])
}
});
var selectMachines = [];
for (let i = 0; i < tMachines.length; i ){
if(tMachines[i] === "Choisissez..."){
selectMachines.push('<option disabled selected>Choisissez...</option>');
}
else{
selectMachines.push('<option>' tMachines[i] '</option>');
}
}
return selectMachines.join('');
}
And this is my "edit request"'s page :
<form id= "divFormulaire">
<!-- TITRE -->
<h1 >FORMULAIRE DE DEMANDE D'INTERVENTION</h1>
<h2 >1. Localisation :</h2>
<div >
<div >
<label for="idDemande" >ID de la demande : </label>
<input type="text" id="idDemande" >
</div>
</div>
<div >
<div >
<label for="secteur" >Secteur : <span style="color: #e7343f">*</span></label>
<select type="text" id="secteur" onchange="getZonesJS(secteur);showResponsable()">
<option disabled selected>Choisissez...</option>
<?!=getSecteurs()?>
</select>
</div>
<div >
<label for="zone" >Zone : <span style="color: #e7343f">*</span></label>
<select type="text" id="zone" onchange="getSallesJS(zone)">
</select>
</div>
</div>
<div >
<div >
<label for="salle" >Salle : <span style="color: #e7343f">*</span></label>
<select type="text" id="salle" onchange="getMachinesJS(salle)">
</select>
</div>
<div >
<label for="machine" >Machine : <span style="color: #e7343f">*</span></label>
<select type="text" id="machine" >
</select>
</div>
</div>
<h2 >2. Description de la demande :</h2>
<div >
<div >
<label for="description" >Veuillez décrire votre demande en quelques mots :
<span style="color: #e7343f">*</span>
</label>
<label for="description"><b></b></label>
<textarea type="text" id="description" rows="5" cols="100" placeholder="(nom du demandeur si différent du responsable de secteur, que s'est-il passé, à quel moment, à quelle fréquence,...)" required></textarea>
</div>
</div>
<div >
<div >
<label for="equipementStrategique"><b>Équipement stratégique : <span style="color: #e7343f">*</span></b></label>
<select type="text" id="equipementStrategique" >
<option disabled selected>Choisissez...</option>
<?!=getEquipement()?>
</select>
</div>
<div >
<label for="interventionProd"><b>Intervention possible en production :
<span style="color: #e7343f">*</span></b>
</label>
<select type="text" id="interventionProd" >
<option disabled selected>Choisissez...</option>
<?!=getIntervention()?>
</select>
</div>
</div>
<div >
<div >
<label for="disponibiliteZone"><b>Disponibilité de la zone : <span style="color: #e7343f">*</span></b></label>
<select type="text" id="disponibiliteZone" >
<option disabled selected>Choisissez...</option>
<?!=getDisponibilite()?>
</select>
</div>
<div >
<label for="delai"><b>Délai : <span style="color: #e7343f">*</span></b></label>
<select type="text" id="delai" onchange="controleDelai()">
<option disabled selected>Choisissez...</option>
<?!=getDelai()?>
</select>
</div>
</div>
<div >
<div id="divDemandeUrgente">
<label for="dateDemandeUrgente">
<b>Sélectionnez la date correspondante : <span style="color: #e7343f">*</span></b>
</label>
<input type="date" id="dateDemandeUrgente" >
</div>
</div>
<div >
<div id="divSubmit">
<input type="button" id = "btnSubmit" value="ENVOYER" onclick="submitForm()">
</div>
</div>
</form>
</body>
<script>
document.addEventListener("DOMContentLoaded",changeValuesOfEditForm);
</script>
Could you please help me to solve this problem? If you need, i can give you access of my Sheets if you want. Thank you for advance.
CodePudding user response：
I managed to solve the problem. I don't think this is the most optimal way to do it, but here's what I did.
In the modifyValues(id) function, I called the other functions that I used to populate my cascading drop-down menus. I had to apply an increasingly large sleep in each of them so that they could allow time for the functions to execute and thus for the dropdowns to load the necessary data.
Here is part of JS code::
google.script.run.withSuccessHandler(secteur => {
document.getElementById("secteur").value = secteur;
getZonesJS(secteur);
}).getSecteurEdit(id);
sleep(3000).then(() =>{
google.script.run.withSuccessHandler(zone => {
document.getElementById("zone").value = zone;
getSallesJS(zone);
}).getZoneEdit(id);
});
sleep(6000).then(() =>{
google.script.run.withSuccessHandler(salle => {
document.getElementById("salle").value = salle;
getMachinesJS(salle);
}).getSalleEdit(id);
});
sleep(11000).then(() =>{
google.script.run.withSuccessHandler(machine => {
document.getElementById("machine").value = machine;
}).getMachineEdit(id);
});