79099246

Date: 2024-10-17 17:40:32
Score: 0.5
Natty:
Report link

How to Setup Web App and Importing Data in Sheets

This is based on my own understanding of your problem, The solution I came up with is using Web App in Apps Script. I added and modified your code.

Sample Output:

index.html Page 1

recipe.html Page 2

This is How you Setup

New Project Image

Create Files

Naming HTML

function doGet(e) {
  let html = HtmlService.createTemplateFromFile(e.parameter.page || "index");
  let data = getValues();
  if (e.parameter.title) {
    for (let i = 0; i < data.length; i++) {
      if (data[i][1] == e.parameter.title) {
        html.recipe = data[i];
        return html.evaluate()
      }
    }
  }
  html.recipe = data;
  return html.evaluate();
}

function getValues() {
  // Paste your Sheet ID here
  const sheetId = '-SHEET ID-';
  const ss = SpreadsheetApp.openById(sheetId);
  const rawData = ss.getActiveSheet().getRange(2, 2, ss.getLastRow() - 1, ss.getLastColumn()).getValues();
  let data = [];
  for (let i = 0; i < rawData.length; i++) {
    let tempData = []
    for (let o = 0; o < rawData[i].length; o++) {
      if (rawData[i][o] != '' && rawData[i].length) {
        tempData.push(rawData[i][o]);
      }

    }
    data.push(tempData);
  }
  return data
}

How to get SHEET ID

Sample Image from Web.

Sample Image from Web

In your Index and Recipe HTML's paste this code

index.html

<!DOCTYPE html>
<html lang="cz">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kuchařka ztracených receptů</title>
  <script>
    function getRecipe(title){
      const loc = <?= ScriptApp.getService().getUrl()?>+`?page=recipe&title=${title}`;
      window.open(loc);
      }
  </script>
</head>
<style>
  button {
    color: rgb(210, 210, 210);
    background-color: rgb(53, 104, 139);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15pt;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    margin: 15px;
    /*15px mezera z top, right, bottom, left*/
  }

  h1 {
    color: rgb(21, 42, 55);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 30pt;
  }

  .button-container {
    text-align: center;
    /*centrování tlačítek*/
    margin-top: 20px;
    /* místo nad tlačítky */
  }
</style>
<body style="background-color:rgb(179, 199, 213);">
  <h1>Kuchařka ztracených receptů</h1>
  <div class="button-container">

    <? for (let i = 0; i < recipe.length; i++) { ?>
    <button onclick="getRecipe(<?= recipe[i][1] ?>)"><?= recipe[i][1] ?></button>
    <? } ?>
  </div>
</body>
</html>

recipe.html

<!DOCTYPE html>
<html lang="cz">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Recipe</title>
  <script>
    function winClose(){
      window.top.close();
    }
  </script>
</head>
<style>
  button {
    color: rgb(210, 210, 210);
    background-color: rgb(42, 84, 111);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 10pt;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
  }
  h3 {
    color: rgb(21, 42, 55);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20pt;
  }
</style>
<body>
  <h4 class="title">
    <?= recipe[0] ?>
  </h4>
  <h5>
    <?= recipe[1] ?>
  </h5>
  <p>Ingredients</p>
  <ul>
    <? for(let i = 2; i < recipe.length - 1; i++ ){ ?>
    <li>
      <?= recipe[i] ?>
    </li>
    <? } ?>
  </ul>
  <br>
  Steps:
  <? const lastRecipe = recipe.length - 1; ?>
  <?= recipe[recipe.length - 1] ?>
  <br><br>
  <button onclick="winClose()">Hlavní stránka</button>
</body>
</html>

How to Setup a Web App

Follow these Instruction

Reference:

Reasons:
  • Probably link only (1):
  • Long answer (-1):
  • Has code block (-0.5):
  • Starts with a question (0.5): How to
  • Low reputation (0.5):
Posted by: Lime Husky