🗃️ App Lab · Mini‑eksperimenter med Data‑tabeller

Kort overblik

• Opret en simpel tabel med to kolonner.
• Vis indholdet i en app.
• Redigér data direkte i Data-fanen og se ændringer i app’en.
• Tilføj nye rækker fra koden og tjek, at tabellen opdateres.

Opgave 1 – Opret tabel og projekt

1. Åbn App Lab og lav et nyt projekt.
2. Gå til fanen Data → + New Table og opret tabellen Par med to kolonner:
   • Venstre (Text)
   • Hoejre (Text)
3. Indtast 3–5 rækker. Eksempel:
   • ("æble", "rød")
   • ("himmel", "blå")
   • ("banan", "gul")

Opgave 2 – Byg en mini‑viser (læs fra tabellen)

Mål: Vis alle rækker fra tabellen Par på skærmen.

1. Gå til Design og tilføj:
   • Et Text Area med id text_output (større felt til at vise flere linjer).
   • En Button med id btnHent og tekst Hent data.
2. Skift til Kode og indsæt:

// Hent alle rækker fra tabellen "Par" og vis dem i text_output
onEvent("btnHent", "click", function() {
  readRecords("Par", function(records) {
    var linjer = [];
    for (var i = 0; i < records.length; i++) {
      var r = records[i];
      linjer.push(r.Venstre + " → " + r.Hoejre);
    }
    setText("text_output", linjer.join("\n"));
  });
});

3. Kør app’en og klik Hent data. Vises alle par?

Opgave 3 – Redigér i Data og genkør

Mål: Forstå at app’en læser fra tabellen hver gang.

1. Gå til Data-fanen og ændr én værdi, Rediger: (fx "gul" → "grøn").
2. Gå tilbage til Kode og kør app’en igen. Klik Hent data.
3. Observation: Er den ændrede værdi nu vist i app’en?

Opgave 4 – Tilføj nye rækker fra koden

Mål: Brug createRecord() til at skrive til tabellen.

1. I Design tilføj to Text Input felter:
   • text_Venstre (Placeholder: fx Venstre)
   • text_Hoejre (Placeholder: fx Højre)
   og en Button med id btnTilfoej og tekst Tilføj.
2. I Kode tilføj:

// Tilføj en ny række og hent derefter data igen
onEvent("btnTilfoej", "click", function( ) {
  var v = getText("text_Venstre");
  var h = getText("text_Hoejre");
  if (v === "" || h === "") { return; } // simpelt værn
  createRecord("Par", { Venstre: v, Hoejre: h }, function(newRecord) {
    // ryd felter og opdatér visning
    setText("text_Venstre", "");
    setText("text_Hoejre", "");
    // Genbrug hentekoden
    readRecords("Par", function(records) {
      var linjer = [];
      for (var i = 0; i < records.length; i++) {
        var r = records[i];
        linjer.push(r.Venstre + " → " + r.Hoejre);
      }
      setText("text_output", linjer.join("\n"));
    });
  });
});

3. Test ved at tilføje 1–2 nye par.
4. Gå til Data-fanen: Kan du se de nye rækker i tabellen?

Opgave 5 – Mini‑refleksion

• Hvilke funktioner læser og skriver data?
• Hvordan kan du se, at tabellen i Data faktisk bliver opdateret?
• Hvor i koden ville du validere input mere grundigt?

↩ Til forsiden