#JP102 System Approval Google Form Menggunakan Apps Script

byJavabitpro

System Approval Google Form Menggunakan Apps Script



*Untuk Mendapatkan Full Script tanpa password silahkan Klik Disini*

1. Copy contoh Google Form (Klik Disini)


2. Karena Google Form terdapat field Upload maka klik Pulihkan untuk membuat folder tempat berkas pada Google Drive.
(Silahkan Refresh Page)



3. Pergi ke menu Jawaban/Responses dan buat Spreadsheet yang terhubung pada Google Form.



4. Klik Buat/Create, setelah itu akan membuka Spreadsheetnya pada tab baru.



5. Pastikan pada Google Drive ada 3 file yaitu Google Form, Spreadsheet yang terhubung pada Google Form dan Folder untuk menyimpan berkas dari Google Form.


6. Kembali pada Spreadsheet(Responses) terdapat 1 sheet yang di dalamnya ada beberapa kolom yang sesuai dengan pertanyaan pada Google Form.


Tambahkan 2 kolom terakhir yaitu kolom Status dan kolom Alasan. 2 kolom tambahan tersebut akan terisi secara otomatis apabila sudah di Approve atau di Reject.



7. Buatlah lembar kerja Apps Script dengan cara klik menu Ekstensi/Extensions lalu pilih Apps Script.



8. Pada lembar kerja Apps Script buat 3 file yaitu
  • Code.gs
  • Review.html
  • Visit.html



9. Copy dan pastekan script di bawah ini ke Code.gs


Masukkan Password Untuk Melihat Script (Password ada di dalam video) 

//Source Code by www.javabitpro.com

// Fungsi untuk mengubah format tanggal ke bahasa Indonesia
function convertToIndonesianDate(date) {
  var months = {
    "January": "Januari", "February": "Februari", "March": "Maret", "April": "April",
    "May": "Mei", "June": "Juni", "July": "Juli", "August": "Agustus",
    "September": "September", "October": "Oktober", "November": "November", "December": "Desember"
  };

  var formattedDate = Utilities.formatDate(date, Session.getScriptTimeZone(), "dd MMMM yyyy");
  var monthEnglish = formattedDate.split(" ")[1]; // Ambil nama bulan dalam bahasa Inggris
  return formattedDate.replace(monthEnglish, months[monthEnglish]); // Ganti dengan nama bulan dalam bahasa Indonesia
}

// Fungsi untuk mengambil data dari spreadsheet dan menampilkan pada email
function onFormSubmit(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Form Responses 1");
  var row = e.range.getRow();
  var data = sheet.getRange(row, 1, 1, sheet.getLastColumn()).getValues()[0];

  var emailPengirim = data[1]; // Email Pengirim
  var emailTujuan = data[2]; // Email Tujuan
  var nama = data[3]; // Nama
  var nip = data[4]; // Nomor NIP
  var jenisPengajuan = data[5]; // Jenis Pengajuan
  var tanggalRaw = data[6]; // Tanggal
  var keterangan = data[7]; // Keterangan
  var uploadLink = data[8]; // Link File
  var idUnik = data[9]; // ID Unik (Kolom 10 atau kolom J)


  // Format tanggal ke "dd mmmm yyyy" dalam bahasa Indonesia
  var tanggal = tanggalRaw instanceof Date 
    ? convertToIndonesianDate(tanggalRaw) 
    : tanggalRaw; // Jika bukan objek Date, biarkan apa adanya

  // Jika ID Unik belum ada, buat baru
  if (!idUnik) {
    idUnik = generateUniqueID();
    sheet.getRange(row, 10).setValue(idUnik);
  }

  var reviewUrl = "URL_WEB_APPS_SCRIPT?id=" + idUnik; //Hasil Deploy Pastikan Disini "URL_WEB_APPS_SCRIPT"



  var subject = "Review Pengajuan - " + nama;
  var body = `
    <p>Halo,</p>

<p>Anda memiliki pengajuan baru untuk ditinjau:</p>

<table style="width: 100%; border-collapse: collapse; border: 1px solid #ddd;">
  <tr style="background-color: #f2f2f2;">
    <th style="padding: 10px; text-align: left; border: 1px solid #ddd;">Informasi</th>
    <th style="padding: 10px; text-align: left; border: 1px solid #ddd;">Detail</th>
  </tr>
  <tr>
    <td style="padding: 10px; border: 1px solid #ddd;"><b>Nama</b></td>
    <td style="padding: 10px; border: 1px solid #ddd;">${nama}</td>
  </tr>
  <tr>
    <td style="padding: 10px; border: 1px solid #ddd;"><b>NIP</b></td>
    <td style="padding: 10px; border: 1px solid #ddd;">${nip}</td>
  </tr>
  <tr>
    <td style="padding: 10px; border: 1px solid #ddd;"><b>Jenis Pengajuan</b></td>
    <td style="padding: 10px; border: 1px solid #ddd;">${jenisPengajuan}</td>
  </tr>
  <tr>
    <td style="padding: 10px; border: 1px solid #ddd;"><b>Tanggal</b></td>
    <td style="padding: 10px; border: 1px solid #ddd;">${tanggal}</td>
  </tr>
  <tr>
    <td style="padding: 10px; border: 1px solid #ddd;"><b>Jenis Pengajuan</b></td>
    <td style="padding: 10px; border: 1px solid #ddd;">${keterangan}</td>
  </tr> 
  <tr>
    <td style="padding: 10px; border: 1px solid #ddd;"><b>File</b></td>
    <td style="padding: 10px; border: 1px solid #ddd;"><a href="${uploadLink}" style="color: #007bff; text-decoration: none;">Lihat File</a></td>
  </tr>
</table>

<p style="text-align: center; margin-top: 20px;">
  <a href="${reviewUrl}" style="display: inline-block; padding: 10px 20px; background-color: #28a745; color: white; text-decoration: none; border-radius: 5px;">
    Review Approve/Reject
  </a>
</p>

<p>Terima kasih.</p>

  `;

  MailApp.sendEmail({
    to: emailTujuan,
    subject: subject,
    htmlBody: body
  });
}

// Fungsi untuk ID Unik
function generateUniqueID() {
  return "ID-" + new Date().getTime() + "-" + Math.floor(Math.random() * 1000);
}

// Fungsi untuk halaman detail
function doGet(e) {
  var template = HtmlService.createTemplateFromFile("Review");
  template.idUnik = e.parameter.id;
  return template.evaluate().setTitle("Review Pengajuan");
}

// Fungsi untuk menampilkan halaman detail pengajuan dan Approve atau Reject
function getSubmissionDetails(idUnik) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Form Responses 1");
  var data = sheet.getDataRange().getValues();

  for (var i = 1; i < data.length; i++) {
    if (data[i][9] == idUnik) {
      // Format tanggal ke "dd mmmm yyyy" dalam bahasa Indonesia
      var tanggalRaw = data[i][6];
      var tanggal = tanggalRaw instanceof Date 
        ? convertToIndonesianDate(tanggalRaw) 
        : tanggalRaw; 
      var status = data[i][10] || "Belum diproses"; // Kolom 11 untuk status
      var alasan = data[i][11] || "-"; // Kolom 12 untuk alasan

      return `
      <!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Detail Pengajuan</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f8f9fa;
    }
    .container {
      width: 90%;
      max-width: 600px;
      background: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    }
    table {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
    }
    th, td {
      padding: 10px;
      border: 1px solid #ddd;
    }
    th {
      background-color: #f2f2f2;
    }
    a {
      color: #007bff;
      text-decoration: none;
    }
    .status-rejected {
      color: red;
      font-weight: bold;
    }
    .status-approved {
      color: green;
      font-weight: bold;
    }
  </style>
</head>
<body>

  <div class="container">
    <h2 style="text-align: center;">Detail Pengajuan</h2>
    <table>
      <tr>
        <th>Informasi</th>
        <th>Detail</th>
      </tr>
      <tr>
        <td><b>Nama</b></td>
        <td>${data[i][3]}</td>
      </tr>
      <tr>
        <td><b>NIP</b></td>
        <td>${data[i][4]}</td>
      </tr>
      <tr>
        <td><b>Jenis Pengajuan</b></td>
        <td>${data[i][5]}</td>
      </tr>
      <tr>
        <td><b>Tanggal</b></td>
        <td>${tanggal}</td>
      </tr>
      <tr>
        <td><b>Keterangan</b></td>
        <td>${data[i][7]}</td>
      </tr>
      <tr>
        <td><b>File</b></td>
        <td><a href="${data[i][8]}" target="_blank">Lihat File</a></td>
      </tr>
      <tr>
        <td><b>Status</b></td>
        <td class="${status === 'Rejected' ? 'status-rejected' : 'status-approved'}">
          ${status}
        </td>
      </tr>
      ${status === "Rejected" ? `
      <tr>
        <td><b>Alasan Penolakan</b></td>
        <td>${alasan}</td>
      </tr>` : ""}
    </table>
  </div>

</body>
</html>

      `;
    }
  }
  return "Data tidak ditemukan.";
}

// Fungsi untuk memproses Approve atau Reject
function processApproval(idUnik, status, alasan) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Form Responses 1");
  var data = sheet.getDataRange().getValues();
  var rowIndex = -1;

  for (var i = 1; i < data.length; i++) {
    if (data[i][9] == idUnik) {
      rowIndex = i + 1;
      break;
    }
  }

  if (rowIndex !== -1) {
    sheet.getRange(rowIndex, 11).setValue(status); // Simpan status di kolom 11
    if (status === "Rejected") {
      sheet.getRange(rowIndex, 12).setValue(alasan || "-"); // Simpan alasan di kolom 12
    }
    sendStatusEmail(data[rowIndex - 1][1], status, alasan);
  }
}

// Fungsi untuk mengirim email balasan
function sendStatusEmail(emailPengirim, status, alasan) {
  var subject = "Status Pengajuan Anda";
  var body = `
   <p>Halo,</p>

<table style="width: 100%; border-collapse: collapse; border: 1px solid #ddd;">
  <tr style="background-color: #f2f2f2;">
    <th style="padding: 10px; text-align: left; border: 1px solid #ddd;">Informasi</th>
    <th style="padding: 10px; text-align: left; border: 1px solid #ddd;">Detail</th>
  </tr>
  <tr>
    <td style="padding: 10px; border: 1px solid #ddd;"><b>Status</b></td>
    <td style="padding: 10px; border: 1px solid #ddd; font-weight: bold; color: ${status === "Rejected" ? "red" : "green"};">
      ${status}
    </td>
  </tr>
  ${status === "Rejected" ? `
  <tr>
    <td style="padding: 10px; border: 1px solid #ddd;"><b>Alasan</b></td>
    <td style="padding: 10px; border: 1px solid #ddd;">${alasan}</td>
  </tr>` : ""}
</table>

<p>Terima kasih.</p>

  `;

  MailApp.sendEmail({
    to: emailPengirim,
    subject: subject,
    htmlBody: body
  });
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}


10. Copy dan pastekan script di bawah ini ke Review.html

Masukkan Password Untuk Melihat Script (Password sama dengan di atas) 

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
   <!-- font-awesome@6.2.0 icon Visit -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
  <?!= include('Visit')?>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f8f9fa;
    }
    .container {
      width: 90%;
      max-width: 500px;
      background: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
      text-align: center;
    }
    h2 {
      margin-bottom: 20px;
    }
    button {
      padding: 10px 15px;
      margin: 5px;
      border: none;
      cursor: pointer;
      border-radius: 5px;
      font-size: 16px;
    }
    .approve {
      background-color: #28a745;
      color: white;
    }
    .reject {
      background-color: #dc3545;
      color: white;
    }
    .submit-reject {
      background-color: #007bff;
      color: white;
    }
    #alasanForm {
      display: none;
      margin-top: 10px;
      text-align: left;
    }
    textarea {
      width: 100%;
      padding: 8px;
      border-radius: 5px;
      border: 1px solid #ccc;
    }

    /* MODAL STYLING */
    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
    }
    .modal-content {
      background-color: #fff;
      margin: 15% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
      max-width: 400px;
      text-align: center;
      border-radius: 10px;
      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    }
    .close {
      color: #aaa;
      float: right;
      font-size: 24px;
      font-weight: bold;
      cursor: pointer;
    }
    .close:hover {
      color: black;
    }
  </style>
</head>
<body>
   <div class="container">
    <h2>Review Pengajuan</h2>
    <div id="data"></div>
    <input type="hidden" id="idUnik" value="<?= idUnik ?>">

    <button class="approve" onclick="submitApproval('Approved')">Approve</button>
    <button class="reject" onclick="showAlasanForm()">Reject</button>

    <div id="alasanForm">
      <label for="alasan"><b>Alasan Penolakan:</b></label>
      <textarea id="alasan" rows="3"></textarea><br>
      <button class="submit-reject" onclick="submitApproval('Rejected')">Submit Rejection</button>
    </div>
  </div>

  <!-- MODAL POPUP -->
  <div id="successModal" class="modal">
    <div class="modal-content">
      <span class="close" onclick="closeModal()">&times;</span>
      <p id="modalMessage"></p>
    </div>
  </div>

  <script>
    function submitApproval(status) {
      var alasan = "";
      if (status === "Rejected") {
        alasan = document.getElementById("alasan").value;
        if (alasan.trim() === "") {
          alert("Harap isi alasan penolakan.");
          return;
        }
      }

      // Kirim ke Google Script
      google.script.run.withSuccessHandler(function() {
        updateStatus(status);
      }).processApproval(document.getElementById("idUnik").value, status, alasan);
    }

    function updateStatus(status) {
      document.getElementById("modalMessage").innerText = 
        status === "Approved" ? "Pengajuan berhasil disetujui!" : "Pengajuan berhasil ditolak!";
      document.getElementById("successModal").style.display = "block";

      // Sembunyikan textarea setelah Submit Reject
      if (status === "Rejected") {
        document.getElementById("alasanForm").style.display = "none";
        document.getElementById("alasan").value = ""; // Hapus teks dalam textarea
      }

      // Refresh Data
      google.script.run.withSuccessHandler(function(data) {
        document.getElementById("data").innerHTML = data;
      }).getSubmissionDetails(document.getElementById("idUnik").value);
    }

    function showAlasanForm() {
      document.getElementById("alasanForm").style.display = "block";
    }

    function closeModal() {
      document.getElementById("successModal").style.display = "none";
    }

    // Load Data saat halaman dibuka
    google.script.run.withSuccessHandler(function(data) {
      document.getElementById("data").innerHTML = data;
    }).getSubmissionDetails("<?= idUnik ?>");
  </script>
</body>
</html>


11. Copy dan pastekan script di bawah ini ke Visit.html

Masukkan Password Untuk Melihat Script (Password sama dengan di atas) 

<link href="https://cdn.jsdelivr.net/gh/javabitpro/css@main/javabitprovisit.css" rel="stylesheet">
	<div class="fab-container2">

  </div>
	<div class="fab-container">
		<div class="fab fab-icon-holder">
			
		</div>
		<ul class="fab-options">
			<li>
				<span class="fab-label">Youtube</span>
				<div class="fab-icon-holder">
					<a target="_blank" href="https://www.youtube.com/playlist?list=PLDeNeiwBHjwYg7_gz2vDA1D6QfBiMgIj6"><i class="fa-brands fa-youtube"></i></i></a>
				</div>
			</li>
			<li style="margin-bottom: 10px;">
				<span class="fab-label">Website</span>
				<div class="fab-icon-holder">
					<a target="_blank" href="https://s.id/javabitpro"><i class="fa-solid fa-globe"></i></a>
				</div>
			</li>			
		</ul>
	</div>


12. Klik ikon Save.



13. Klik menu Pemicu/Triggers pada menu sebelah kiri.



14. Tambah Pemicu/Add Triggers



15. Samakan pengaturannya dengan gambar di bawah ini lalu tekan Simpan.
Izinkan otorisasi akses apabila di minta (Tutorial ada di video)



16. Kembali ke halaman Editor



17. Klik tombol Terapkan/Deploy lalu pilih Deployment baru/New deployment.



18. Pastikan jenisnya adalah Aplikasi web, hak aksesnya adalah Siapa saja/Anyone lalu klik Terapkan/Deploy.



19. Izinkan otorisasi akses jika di minta (Tutorial ada di video)



20. Klik Salin URL yang sudah di Deploy dan klik Selesai.



21. Pastekan URL APPS SCRIPT yang sudah di salin ke Code.gs point 44 URL_WEB_APPS_SCRIPT



22. Terakhir, klik ikon Save


Google Form sudah siap di Publish.

SELESAI!!!
























Project #JP102 System Approval Google Form Menggunakan Apps Script
Harga(IDR) Rp150.000 Rp 75.000
Download
Memuat tombol...
Tags:
Previous Post Next Post