Skip to content

Instantly share code, notes, and snippets.

@Dms-Codee

Dms-Codee/GAScode.gs

Last active September 18, 2021 20:28
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Dms-Codee/709fbd5b034416590394a2370770b9a2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Dms-Codee/709fbd5b034416590394a2370770b9a2 to your computer and use it in GitHub Desktop.
Download ZIP
Google Drive Ui with GAS
Raw
GAScode.gs
// Para poder mostrar la pagina en la webapp
function doGet() {
var template = HtmlService.createTemplateFromFile('index');
var output = template.evaluate();
return output;
}
// Para poder desacoplar el codigo dentro del frontend
function include(fileName) {
return HtmlService.createHtmlOutputFromFile(fileName).getContent();
}
//Funcion que obtiene el acceso al contenido e informacion de una carpeta especifica de Drive utilizando su Id
function driveInfoFolders() {
// Aqui agregas el ID de Tu Folder
var folderMain = DriveApp.getFolderById();
var files = folderMain.getFolders();
var listado = [];
while (files.hasNext()) {
var file = files.next();
var item = {
nombreFolder: file.getName(),
url: file.getUrl(),
descripcion: file.getDescription()
}
listado.push(item);
}
return listado;
}
// Generacion del HTML, especificamente las cards que se renderizara en la vista Index del lado del cliente
function crearCards() {
var ourHTMLString = "";
var data = driveInfoFolders();
data.forEach((carpeta,i) => {
ourHTMLString += `
<div class="card col-sm-12 col-md-4 col-lg-3 m-3" >
<div class="card-body">
<h5 class="card-title"> ${carpeta.nombreFolder} </h5>
<p class="card-text">${carpeta.descripcion == null ? "Sin descripcion" : carpeta.descripcion}</p>
<a href="${carpeta.url}" target="_blank" class="btn btn-success">Ir a Carpeta</a>
<button id="${i}" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Info
</button>
</div>
</div> `
})
return ourHTMLString;
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Contenedor donde se invoca con un scriplet la funcion crearCards y renderiza las mismas en la vista -->
<div class="container d-flex">
<div class="row justify-content-center" id="contenedor">
<?!= crearCards() ?>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment