Different User Different Hyperlink Open with iframe Login Portal

Different User Different Hyperlink Open with i frame Login Portal

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

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

For Demo

User ID :- ok

Password :- 123

Step 1 :-
Click to Wait Get Google Sheet With Source Code
Click To Get Source Code Waiting...

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
function doGet(e) { return HtmlService.createTemplateFromFile("index").evaluate() .setTitle("Login Logout Hyperlink") .addMetaTag('viewport', 'width=device-width, initial-scale=1') .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); } /* PROCESS FORM */ function processForm(formObject){ var concat = formObject.searchtext.toString().toLowerCase()+formObject.searchtext2; var result = ""; if(concat){//Execute if form passes search text result = search(concat); } return result; } //SEARCH FOR MATCHED CONTENTS ; function search(searchtext){ var range = SpreadsheetApp.getActive().getSheetByName('Data').getDataRange(); var data = range.getValues(); var ar = []; data.forEach(function(f) { if (~[f[0].toString().toLowerCase()+f[1]].indexOf(searchtext)) { ar.push([ f[2], f[3],f[4],f[5]]); } }); return ar; };
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:1.0em'>"+ "<thead style='white-space: nowrap'>"+ "<tr>"+ //Change table headings to match with the Google Sheet "</tr>"+ "</thead>"; for(var i=0; i<dataArray.length; i++) { result += "<tr>"; for(var j=0; j<dataArray[i].length; j++){ result += "<td>"+dataArray[i][j]+"</td>"; } result += "</tr>"; } result += "</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: 'User ID & Password Wrong', 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>
Step 6 :- Click to >> Deploy >> New Deployment >>
Step 7 :- More Detail See Video

Different User Different Hyperlink Open with iframe Login Portal

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

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 6 :- Click to >> Deploy >> New Deployment >>

Step 7 :- More Detail See Video

Post a Comment

Donation and Support

Contact Form