Java Skript in Grid Container

Mirko kommt natürlich sofort. Die test DB hab ich gelöscht, daher das ganze skript.

let me := this;
let cc := if 'Ort der Veranstaltung wählen' < 3 or 'Ort der Veranstaltung wählen' = 5 then
        text('Ort der Veranstaltung wählen')
    else
        if 'Ort der Veranstaltung wählen' = 3 then
            Kunde.'Straße + Nr.' + "" + "/" + "" + Kunde.Ort
        else
            if 'Ort der Veranstaltung wählen' = 4 then
                Bezeichnung + "" + "/" + "" + 'Straße + Nr.' + "" + "/" + "" + Ort
            end
        end
    end;
let css := "
<style>
.grid-container {
    display:grid;
    /*hier kann die Spaltenanzahl festgelegt werden*/
    grid-template-columns:repeat(auto-fill, minmax(20em, 1fr));
    grid-gap:5px;
}
.gridFormat, .gridHeader, .gridHeader1{
    font-size:large;
    text-align:center;
    border-radius:.5em;
    padding:1em;
    box-shadow:4px -4px 7px DimGray inset;
    color:black;
}
.gridHeader {
    grid-column: 1 / -4;
    background:Silver;
    font-size:x-large;

}
.gridHeader1 {
    grid-column: 1 / -1;
    background:Silver;
    font-size:x-large;

}
.gridOne {background-color:#b0aac0;}
.gridTwo {background-color:#ddeedd;}
.gridThree {background-color:#c2d4dd;}
.gridFour {background-color:#AD5C62;color:black;}

table{
    width:100%;
}
.tableFixHead {
    overflow-y: auto;
       height: 378px;
      }
.right {
    text-align: right
}
.center {
    text-align: center
}
th {
    font-size:small;
    padding: .5em .5em .5em .5em;
    border-radius: .5em .5em .5em .5em;
}
td{
    font-size:small;
    background-color: #ddeedd;
    padding: .1em .5em .1em .5em;
    text-align: center;
    border-radius: .5em .5em .5em .5em;
}
button{
    font-size:large;
    background-color:#AD5C62;color:black;
    padding: .1em .5em .1em .5em;
    text-align: center;
    border-radius: .5em .5em .5em .5em;
}
thead,tfoot{
      background-color:#ddeedd;
    position: sticky;
    font-size:small;
}
thead {
    top: -.2em;
    text-align:center;
}
tfoot{
      bottom: -.2em;
}
tr:nth-child(odd) td{ /*ungerade Zeile einfärben*/
      background-color: #b0aac0;
}
p {
    visibility: hidden
}
<meta name=viewport content=width=device-width, initial-scale=1>
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

</style>
";
let content := "
<aside class = 'grid-container'>
<header class = 'gridHeader'><button onclick='myFunction()'>Bearbeitung wieder freigeben?</button>
<p>" +
    Sichtbarkeit +
    "</p>
<script>
function myFunction() {
let jnValue = document.querySelector('p').innerHTML;
let idx = '" +
    raw(Nr) +
    "';
if (jnValue === 'Nein') {
database.update(idx, 'OD' , true)
} else {
database.update(idx, 'OD' , false)
};
}
</script>  Veranstaltungsort: " +
    cc +
    "</header>
<aside class = 'gridFormat gridTwo'> Dokument-Nr:<br><br><b>" +
    if 'Dokument Art wählen' = 1 then
        Angebotsnummer
    else
        if 'Dokument Art wählen' = 2 then
            Rechnungsnummer
        end
    end +
    "</b></aside>
<aside class = 'gridFormat gridTwo'> Kunde<br><br><b>" +
    Kunde.Firma +
    Kunde.Name +
    "</b></aside>
<aside class = 'gridFormat gridTwo'> Dokument-Art<br><br><b>" +
    text('Dokument Art wählen') +
    "</b></aside>
<aside class = 'gridFormat gridTwo'> Erwachsene / Kinder<br><br><b>" +
    Erwachsene +
    " / " +
    if 'Kinderzahl unter 12' = null then
        0
    else
        'Kinderzahl unter 12'
    end +
    "</b></aside>
<aside class = 'gridFormat gridTwo'> Event-Art<br><br><b>" +
    'Bitte art der Feier oder Anlass eingeben.' +
    "</b></aside>
<aside class = 'gridFormat gridTwo'> Beginn<br><br><b>" +
    text('Datum beginn') +
    " " +
    "-" +
    'Uhrzeit von' +
    "</b></aside>
<aside class = 'gridFormat gridTwo'> Ende <br><br><b>" +
    text('Datum ende') +
    " " +
    "-" +
    'Uhrzeit bis' +
    "</b></aside>
<aside class = 'gridFormat gridTwo'> Dokumenten-Datum <br><br><b>" +
    if 'Dokument Art wählen' = 1 then
        Angebotsdatum
    else
        if 'Dokument Art wählen' = 2 then
            Rechnungsdatum
        end
    end +
    "</b></aside>
<aside class = 'gridFormat gridThree'>Wert <br><br><b>" +
    'Brutto Gesamt' +
    "</b></aside>
<aside class = 'gridFormat gridFour'> Buffet <br><br><b>" +
    "<table>" +
    for i in numbers('Buffet auswahl') do
        if record(Buffet,i).number(Nr) > 0 then
            "<tr><td>" + record(Buffet,i).Position + "</td></tr>"
        end
    end +
    "</table>" +
    "</td></tr>" +
    "</b></aside>
<aside class = 'gridFormat gridFour'> Buffet beilagen <br><br><b>" +
    "<table>" +
    for i in numbers('Buffet auswahl') do
        if record(Buffet,i).number(Nr) > 0 then
            "<tr><td>" + record(Buffet,i).Position + "</td></tr>"
        end
    end +
    "</table>" +
    "</td></tr>" +
    "</b></aside>
<aside class = 'gridFormat gridFour'> Salatbar <br><br><b>" +
    "<table>" +
    for i in numbers('Salatbar auswahl') do
        if record(Salatbar,i).number(Nr) > 0 then
            "<tr><td>" + record(Salatbar,i).Position + "</td></tr>"
        end
    end +
    "</table>" +
    "</td></tr>" +
    "</b></aside>
<aside class = 'gridFormat gridFour'> Snack`s <br><br><b>" +
    "<table>" +
    for i in numbers('Snack auswahl') do
        if record(Snacks,i).number(Nr) > 0 then
            "<tr><td>" + record(Snacks,i).Position + "</td></tr>"
        end
    end +
    "</table>" +
    "</td></tr>" +
    "</b></aside>
<aside class = 'gridFormat gridFour'> Dessert <br><br><b>" +
    "<table>" +
    for i in numbers('Dessert auswahl') do
        if record(Dessert,i).number(Nr) > 0 then
            "<tr><td>" + record(Dessert,i).Position + "</td></tr>"
        end
    end +
    "</table>" +
    "</td></tr>" +
    "</b></aside>
<aside class = 'gridFormat gridFour'> Getränke <br><br><b>" +
    "<table>" +
    for i in numbers('Getränke wählen') do
        if record('Getränke',i).number(Nr) > 0 then
            "<tr><td>" + record('Getränke',i).Position + "</td></tr>"
        end
    end +
    "</table>" +
    "</td></tr>" +
    "</b></aside>
<header class = 'gridFormat gridTwo gridHeader1'><!-- Trigger/Open The Modal -->
<button id= myBtn >Rechnungspositionen anzeigen</button>
<!-- The Modal -->
<aside id= myModal class= modal>
  <!-- Modal content -->
  <aside class= modal-content>
    <span class=close>&times;</span>
<table ><thead>
        <tr>
            <th> POS.</th>
            <th> Leistung </th>
            <th> Menge </th>
            <th> Einzelpreis </th>
            <th> netto gesamt </th>
            <th> brutto gesamt </th>
        </tr>
    </thead><tbody>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById('myBtn');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName('close')[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
  modal.style.display = 'block';
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = 'none';
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = 'none';
  }
}
</script>";
let mitte := if 'Datum beginn' then
        let AA := (Rechnungspositionen order by number('Pos.'));
        for aa in AA do
            "<tr>
            <td  style=background-color:>" +
            aa.text('Pos.') +
            " </td>
        <td  style=background-color:>" +
            aa.Leistungsbeschreibung +
            " </td>
        <td  style=background-color:>" +
            aa.Menge +
            " </td>
            <td  style=background-color:>" +
            aa.'Netto preis pro einheit' +
            " </td>
            <td  style=background-color:>" +
            aa.'Netto gesamt' +
            " </td>
         <td  style=background-color:>" +
            aa.'Brutto gesamt' +
            " </td>

        </tr>"
        end
    end +
    "</header>";
html(css + content + mitte)

Mirko Teilen macht glücklich, aber kannst du mir eventuell helfen bei den 2 verbliebenen Problemen? Ok 3  

Das sich überlagernde Java Skript bekomme ich nicht gelöst, auch nicht wenn ich die Variablen umbenenne. Es gehen nie beide gleichzeitig, eines tut an irgendeiner Stelle nie was es soll. Auch bekomme ich das dmulti nicht über den änderungstricker beim Datum beginn gefüllt. Ninox mag einfach text(year(Datum beginn) oder auch ohne text akzeptieren. Beim Monat klappt das ohne Probleme.

Am ende ist dann noch das Dokument was einfach den Seiten bzw. Absatz Umbruch nicht ausblenden mag, sondern nur den Text, was zu leer Seiten führt. Da hatte ich schon mal mit Stefanie Kennes getextet... bin aber noch nicht dahinter gekommen warum nicht.

Aber vielleicht hilft ja die test DB, hab in liebevoller kleinarbeit versucht alles raus zu machen was nicht interessiert bzw. Private daten enthält ohne den Charakter der DB zu verlieren.

 Möglichst alles über ein Dashboard steuern ohne in sich in Tabellen zu verlieren.

Danke Michi

Ach so.. fast vergessen, über "<form> könnte man doch eigentlich schöne und vor allem übersichtliche " Eingabe Masken " erstellen und die Felder in ninox über die id füllen. Bekom das aber nicht zum laufen. Ist das überhaupt möglich mit ninox?