Different User Different Dashboard Open By Login Portal

How to Make Login and Logout Portal by Web App Script

नमस्‍कार दोस्‍तो,

इस ब्‍लॉग में हम आपको बहुत ही सरल भाषा में बतायेगें की किस प्रकार गुगल शीट ओर वेब एप स्‍क्रीप्‍ट की मदद से Login and Logout Portal बना सकते है ा ओर इस पोर्टल से अलग अलग यूजर अलग अलग डेसबोर्ड ऑपन कर सकतें है जैसे Entry Level User, Verification Level User

For Demo

User ID :- site

Password :- 1234

Secound ID & Password

User ID :- ok

Password :- 1234

Loading…

Step 1 :- Click to Google Sheet Copy With Source Code

Step 2 :- Click to >> Extensions >> App Script >>

Step 3 :- Create 2 File

Code.gs
index.html

Step 4 :- Copy of Code.gs file and Paste to Step 3 Create Code.gs File

Code.gs

Step 5 :- Copy of index.html file and Paste to Step 3 Create index.html File

index.html

<!DOCTYPE html> <html> <center> <head> <base target="_top"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link href="https://fonts.googleapis.com/css2?family=Prompt:wght@400&display=swap" rel="stylesheet"> <style> body {font-family: 'Prompt', sans-serif;} a {color: #000;text-decoration: none;} </style> </head> <body> <section id="page1"> <div class="container"> <div class="row"> <div class="col-md-8 mx-auto p-2 mt-2 bg-body border rounded"> <nav class="navbar navbar-dark bg-primary text-white mb-3"> <div class="container-fluid"> <span class="navbar-brand mb-0 h1"><i class="fa-solid fa-right-to-bracket"></i> Login Portal</span> </div> </nav>  <form id="search-form" onsubmit="handleFormSubmit(this)"> <div class="mb-3"> <input type="text" style="text-align: center;" class="form-control col-sm-6" id="searchtext" name="searchtext" placeholder="User ID"><br> <input type="password" style="text-align: center;" class="form-control col-sm-6" id="searchtext2" name="searchtext2" placeholder="Password"> </div> <div class="mt-3 text-center"> <button type="submit" class="btn bg-primary mb-2 text-white btnSubmit"><i class="fa-solid fa-arrow-right-to-bracket"></i> Login</button> <button class="btn bg-primary text-white btnLoading d-none" type="button" disabled> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading... </button></div> <div class="mt-2 text-center"> <span id="resp-spinner5" class="spinner-grow spinner-grow-sm text-danger d-none" role="status" aria-hidden="true"></span> <span id="resp-spinner6" class="spinner-grow spinner-grow-sm text-warning d-none" role="status" aria-hidden="true"></span> <span id="resp-spinner7" class="spinner-grow spinner-grow-sm text-info d-none" role="status" aria-hidden="true"></span> </div> </form> </div> </div> </div> </section> <section id="table" style="display:none"> <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <div class="container-fluid"> <a class="navbar-brand"><i class="fa-solid fa-font-awesome"></i> Sunrise IT Education</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav ms-auto"> <button onclick="goback()" class="btn bg-warning"><i class="fa-solid fa-arrow-right-from-bracket"></i> Logout</button> </div> </div> </div> </nav> <table id="search-results" class="mt-2" style="width:100%"></table> </section> <div class="container text-center"> <footer class="pt-3 mt-3 text-muted " style="font-size:12px"> <div class="footer-copyright py-2 mt-2"> @ <a style="color:red" href="https://sunriseiteducation.blogspot.com/" target="_blank"> Sunrise IT Education</a> © <script> document.write(new Date().getFullYear()) </script> <a style="color:Orange" href="https://www.youtube.com/channel/UCFiqQsZYzRlqfds5YhlGMWA" target="_blank">Youtube channel</a> </div> </footer> </div>  <script> function goback(){ Swal.fire({ position:'top', title: 'Are you sure Logout?', text: "Do you really want to log out?!", icon: 'warning', showCancelButton: true, confirmButtonColor: '#0d6efd', cancelButtonColor: '#d33', cancelButtonText: 'Cencel', confirmButtonText: 'Yes sure' }).then((result) => { if (result.isConfirmed) { document.getElementById("page1").style.display= "block"; document.getElementById("table").style.display= "none"; } }) } //PREVENT FORMS FROM SUBMITTING / PREVENT DEFAULT BEHAVIOUR function preventFormSubmit() { var forms = document.querySelectorAll('form'); for (var i = 0; i < forms.length; i++) { forms[i].addEventListener('submit', function(event) { event.preventDefault(); }); } } window.addEventListener("load", preventFormSubmit, true); //HANDLE FORM SUBMISSION function handleFormSubmit(formObject) { if(document.getElementById('searchtext').value == "" || document.getElementById('searchtext2').value == ""){ Swal.fire({ position: 'top', icon: 'warning', title: 'Enter your User ID and password.', showConfirmButton: false, timer: 1500 }) document.getElementById("table").style.display= "none"; }else{ document.getElementById('resp-spinner5').classList.remove("d-none"); document.getElementById('resp-spinner6').classList.remove("d-none"); document.getElementById('resp-spinner7').classList.remove("d-none"); document.querySelector('.btnSubmit').classList.toggle('d-none'); document.querySelector('.btnLoading').classList.toggle('d-none'); google.script.run.withSuccessHandler(createTable).processForm(formObject); document.getElementById("search-form").reset(); }; }; //CREATE THE DATA TABLE function createTable(dataArray) { document.getElementById('resp-spinner5').classList.add("d-none"); document.getElementById('resp-spinner6').classList.add("d-none"); document.getElementById('resp-spinner7').classList.add("d-none"); document.querySelector('.btnSubmit').classList.toggle('d-none'); document.querySelector('.btnLoading').classList.toggle('d-none'); if(dataArray && dataArray !== undefined && dataArray.length != 0){ document.getElementById("page1").style.display= "none"; document.getElementById("table").style.display= "block"; Swal.fire({ position: 'top', icon: 'success', title: 'Welcome '+'<br><h3 style="color:red" class="mt-3">'+dataArray[0][0]+'</h3>', showConfirmButton: false, timer: 1500 }) var result = "<table class='table table-sm table-striped' id='dtable' style='font-size:0.8em'>"+ "<thead style='white-space: nowrap'>"+"</thead>"+ "<tr>"+ "<td colspan='2' style='text-align:center;color:red'>Welcome <b style='color:blue'> "+dataArray[0][0]+"</b></td>"+ "<tr>"+ "<td colspan='2' style='text-align:center;color:red'><b style='color:blue'><a href== "+dataArray[0][1]+">Link</a></b></td>"+ "<tr>"+ "<td colspan='2' style='text-align:center;color:red'><b style='color:blue'><a href= "+dataArray[0][1]+">Link1</a></b></td>"+ "</tr>"+ "<tr>"+ "<td colspan='2'><iframe width='100%' height='900' frameborder='0' scrolling='auto' src =" + dataArray[0][1]+ "></iframe></td>"+ "</tr>"+ "<tr>"+ "<td colspan='2'><iframe width='100%' height='900' frameborder='0' scrolling='auto' src =" + dataArray[0][2]+ "></iframe></td>"+ "</tr>"+ "<tr>"+ "<td colspan='2'><iframe width='100%' height='900' frameborder='0' scrolling='auto' src =" + dataArray[0][3]+ "></iframe></td>"+ "</tr>"+ "</table>"; var div = document.getElementById('search-results'); div.innerHTML = result; }else{ var div = document.getElementById('search-results'); div.innerHTML = " "; document.getElementById("table").style.display= "none"; document.getElementById("page1").style.display= "block"; Swal.fire({ position: 'top', icon: 'error', title: 'Data not found', showConfirmButton: false, timer: 1500 }) } } </script>  <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"> </script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"> </script> </body> </center> </html>

Different User Different Dashboard Open By Login Portal

How to Make Login and Logout Portal by Web App Script

नमस्‍कार दोस्‍तो,

Step 1 :- Click to Google Sheet Copy With Source Code

Step 2 :- Click to >> Extensions >> App Script >>

Step 3 :- Create 2 File

Step 4 :- Copy of Code.gs file and Paste to Step 3 Create Code.gs File

Code.gs

Step 5 :- Copy of index.html file and Paste to Step 3 Create index.html File

index.html

Step 7 :- Click to >> Deploy >> New Deployment >>

Step 8 :- More Detail See Video

Post a Comment

Donation and Support

Contact Form