MOVE A CLASS OR BATCH TO OTHER CLASS OR BATCH - GOOGLE WEBAPP
Move students from a class to other class using students ids - apps script
As by post title, we are going to know the code that helps us to create a webapp that works like. To move students from a class to other class, first we have to get their ids. To get their ids we use following code that get the students id, name and image. This function runs when class was selected.
//initialize class change data
function initiateId(frCl,frsec) {
var tr = ws.getDataRange().getValues();
var wr ='';
for(var i=0; i<tr.length ; i++){
if(frsec == "ALL"){ var sec = tr[i][7]+"!=''";}else{ var sec = tr[i][7] == frsec;}
if(frCl == tr[i][6] && sec && tr[i][0] !=""){
wr+="<table name='tb'><tr><td height=100px align=center><img src="+
tr[i][1]+" width=90px height=100px></td><tr><td>"+
tr[i][0]+ " <input type='checkbox' class='ids' name='selidn' value="+
tr[i][0]+" onchange='selectid()'></td></tr><tr><td>"+tr[i][2]+" </td><tr></table>";}}
return wr;}
When data are appear on page, I have used this javascript code to select user Id
and stored.
<script>
function selectid() {
var sel = document.querySelectorAll('input[name=selidn]');
var csl = "";
for (var i = 0; i < sel.length; i++) {
if (sel[i].checked) {
csl = csl + sel[i].value +",";}}
document.getElementById("selectedId").value = csl;
}
</script>
Let's move and show all codes that perform action and complete the tasks.
first glance one's eye at the sheet that I have used in this project.
Example sheet
Following codes are defined on above example sheet. You can try this code on
same look sheet or as your requirment. Full Code.gs is bellow. Make a copy of this
code and paste it into Code.gs file
Code.gs
function doGet(e) {
return HtmlService.createTemplateFromFile('index').evaluate();
}
var ws = SpreadsheetApp.openById("spreadsheet id").getSheetByName("Sheet1");
//initialize class change data
function initiateId(frCl,frsec) {
var tr = ws.getDataRange().getValues();
var wr ='';
for(var i=0; i<tr.length ; i++){
if(frsec == "ALL"){ var sec = tr[i][7]+"!=''";}else{ var sec = tr[i][7] == frsec;}
if(frCl == tr[i][6] && sec && tr[i][0] !=""){
wr+="<table name='tb'><tr><td height=100px align=center><img src="+
tr[i][1]+" width=90px height=100px></td><tr><td>"+
tr[i][0]+ " <input type='checkbox' class='ids' name='selidn' value="+
tr[i][0]+" onchange='selectid()'></td></tr><tr><td>"+tr[i][2]+" </td><tr></table>";}}
return wr;}
//class changing by selected Id.
function clcfun(dtc) {
var clr = ws.getDataRange().getValues();
var idL = dtc[2].split(",");
for (var x = 0; x < idL.length; x++) {
for(var i = clr.length-1; i >= 0; i--){
if(clr[i][0] === idL[x]){
ws.getRange(i+1, 7).setValue(dtc[0]);
ws.getRange(i+1, 8).setValue(dtc[1]);
var ttl = idL.length-1 +" students moved to class "+dtc[0]+"-"+dtc[1];
};};};
return ttl};
Now glance one's eye at the index.html code.
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
table, td, th {
border: 1px solid;
border-collapse: collapse;
}
</style>
</head>
<body>
<div class="w3-row-padding w3-border-bottom">
<div class="w3-col s3">
<select id="fromCl"onchange="fclass(this)" class="w3-select w3-col s8">
<option value="">FROM CLASS</option>
<option value="Nur">Nursery</option>
<option value="LKG">LKG</option>
<option value="UKG">UKG</option>
<option value="I">I</option>
<option value="II">II</option>
<option value="III">III</option>
<option value="IV">IV</option>
<option value="V">V</option>
<option value="VI">VI</option>
<option value="VII">VII</option>
<option value="VIII">VIII</option>
<option value="Pending">Pending</option>
<option value="Leaved">Leaved</option>
</select>
<select id="fromSec" onchange="fclass(this)"class="w3-select w3-col s4">
<option value="ALL">ALL</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</div>
<div class="w3-col s3">
<select id="toCl"class="w3-select w3-col s8">
<option value="">TO CLASS</option>
<option value="Nur">Nursery</option>
<option value="LKG">LKG</option>
<option value="UKG">UKG</option>
<option value="I">I</option>
<option value="II">II</option>
<option value="III">III</option>
<option value="IV">IV</option>
<option value="V">V</option>
<option value="VI">VI</option>
<option value="VII">VII</option>
<option value="VIII">VIII</option>
<option value="Pending">Pending</option>
<option value="Leaved">Leaved</option>
</select>
<select id="toSec"class="w3-select w3-col s4">
<option value="">SEC</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</div>
<div class="w3-col s1">
<input type="submit"value="MOVE"class="w3-btn w3-teal w3-hover-red" onclick="toclass()"/>
<input type="hidden" id="selectedId" >
</div>
<div class="w3-col s1">
<i id="spin" class="fa fa-refresh fa-0"onclick="fclass(this)" style="font-size:20px"></i>
</div>
<div class="w3-col s4 w3-left">
<i id="info"></i>
</div>
</div>
<div style="overflow: auto;height:480px;">
<div id="idlay"
style="display: grid;font-family: times;grid-template-columns: repeat(14, 1fr);
grid-template-rows: repea(auto, 65px);grid-gap:5px;"></div>
</div>
<script>
function selectid() {
var sel = document.querySelectorAll('input[name=selidn]');
var csl = "";
for (var i = 0; i < sel.length; i++) {
if (sel[i].checked) {
csl = csl + sel[i].value +",";}}
document.getElementById("selectedId").value = csl;
}
</script>
<script>
function fclass() {
var nel2 = document.getElementById('fromCl');
var frCl = nel2.options[nel2.selectedIndex].value;
var sec2 = document.getElementById('fromSec');
var frsec = sec2.options[sec2.selectedIndex].value;
var idL = document.querySelector('#idlay');
if(frCl === ""){
document.getElementById('info').innerHTML = "";
}else{
function fail1(error){
document.getElementById("spin").classList.remove('fa-spin');
document.getElementById('info').innerHTML = error;
};
function pass1(reList){
idL.innerHTML = reList;
document.getElementById("spin").classList.remove('fa-spin');
var ct =document.getElementsByName('tb').length;
document.getElementById('info').innerHTML = ct+" Records found.";
};
idL.innerHTML = "";
document.getElementById("spin").classList.add('fa-spin');
document.getElementById('info').innerHTML = "Getting detail...";
google.script.run.withFailureHandler(fail1)
.withSuccessHandler(pass1)
.initiateId(frCl,frsec);}};
</script>
<script>
function toclass() {
var toCl = document.getElementById('toCl');
var toClv = toCl.options[toCl.selectedIndex].value;
var toSec = document.getElementById('toSec');
var toSecv = toSec.options[toSec.selectedIndex].value;
let idlist = document.querySelector('#selectedId').value;
if(toClv === "" || toSecv === ""|| idlist ===""){
document.getElementById('info').innerHTML = "Select ID";
}else{
var dtc = [toClv,toSecv,idlist]
var idL = document.querySelector('#idlay');
function fail2(error){
idL.innerHTML = error;
document.getElementById("spin").classList.remove('fa-spin');
document.getElementById('info').innerHTML = "";
};
function pass2(ttl){
fclass();//get update
idL.innerHTML = "Getting updates.....";
document.getElementById('info').innerHTML = ttl;
document.getElementById('toCl').selectedIndex = 0;
document.getElementById('toSec').selectedIndex = 0;
document.getElementById("spin").classList.remove('fa-spin');
};
idL.innerHTML = "";
document.getElementById("spin").classList.add('fa-spin');
document.getElementById('info').innerHTML = "Working on...";
google.script.run.withFailureHandler(fail2)
.withSuccessHandler(pass2)
.clcfun(dtc);}};
</script>
</body>
</html>
>>>TRY TO CHECK OUT , IF ANY ERROR FOUND. PLEASE LET ME KNOW BY COMMENT.
I'LL TRY MY LEVEL BEST TO FIX THE PROBLEM.
THANKS FOR VISITING CodyLab
Have a nice day!
-------------------------- -------------------------