function doGet() {
// Renders Index.html as a live serverless web page
return HtmlService.createHtmlOutputFromFile('Index')
.setTitle('MageSheet Custom Portal')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
// Secure data fetcher that isolates the spreadsheet from the client
function getLatestData() {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
const data = sheet.getRange("A2:C2").getValues();
return JSON.stringify(data[0]);
}
- The Frontend (Index.html)
Standard markup that builds the visual dashboard layer, completely hiding the grid.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
body {
font-family: sans-serif;
background: #0f172a;
color: white;
padding: 2rem;
}
.card {
background: rgba(255,255,255,0.05);
padding: 2rem;
border-radius: 12px;
}
button {
background: #f97316;
color: white;
border: none;
padding: 10px 20px;
border-radius: 6px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="card">
<h2>MageSheet Internal Portal</h2>
<p id="data-container">
Click below to fetch secure data off the spreadsheet.
</p>
<button onclick="loadData()">Load Data</button>
</div>
<script>
function loadData() {
// google.script.run is the secure RPC bridge to Code.gs!
google.script.run
.withSuccessHandler(function(response) {
const container = document.getElementById('data-container');
container.innerText = "Data: " + response;
})
.getLatestData();
}
</script>
</body>
</html>
The RPC Bridge Safety
By utilizing this architecture, the end-user remains completely isolated from the raw underlying data layer. Because you execute the script as "Me" (the developer/admin) and share it with "Anyone," users can seamlessly read and write data through your custom interface without ever having view or edit permissions to the source spreadsheet document itself.
The Complete Blueprint
The comprehensive architectural pattern, complete with modern UI framework integrations (Tailwind CDN), state handling, and multi-tenant data isolation boilerplates is available on the MageSheet blog:
👉 The Complete Custom Frontend Blueprint on MageSheet