8

html-Tabellen

HTML.ninox

Hi Ninoxer mit Interesse für html()-Tabellen. In manchen Fällen ist Optik auch sehr funktionell. Ich mag schnellere Erfassung von Daten mit wenigen Blicken und die bessere Unterscheidung von Einzelinformationen und ich stehe auf eye candy ;-). In Ninox gibt es von Hause aus schon viele Möglichkeiten, aber etwas mehr ist ja immer gut. Wenn ich mal eine html-Tabelle bauen will, dann greife ich auf meine Muster zu, kleckse eine neue Farbe hin und voila. Ich habe versucht sie so zu gestalten, dass auch ein engagierter html-Laie (bin ich auch) damit zurecht kommt.

Noch ein paar mögliche Vorteile

A. Die Ansicht ist nicht verlinkt. Bsp. Urlaubsplan für Mitarbeiter soll nur gesehen werden, nicht manipuliert.

B. Möglichkeit komplexer Tabellen, die Informationen enthalten, die nicht nur aus einer Tabelle stammen. Bsp. ist bei mir der Dienstplan mit Namen, Wochentage, Arbeitszeiten (nicht enthalten)

C. Versucht mal eine ganze Zeile in einer Ninox-Ansicht zu färben - genau.

D. quer scrollende Tabellen

Ich teile mal meine, Mustersammlung. Sie ist, bezogen auf die Schwierigkeit, aufsteigend sortiert.

Am Ende habe ich noch ein interessantes Beispiel für ein html-Layout-Modul. Es nennt sich grid. Damit ist es möglich, so etwas wie ein Raster anzulegen, ohne <div> Container zu benutzen, z.B. für ein Dashboard. Es geht verhältnismäßig einfach und ist, da es in CSS integriert ist, übersichtlicher als Container mit html-tags. Ein wenig Einarbeitung benötigt dieses Thema.

Richtig cool ist dann das letzte, responsive Design, welches sich dynamisch der Bildschirmgröße anpasst (Hier mal zum Test die Fenstergröße drastisch verkleinern). Damit ist so ein Dashboard aus einem einzigen f(x)-Feld auf allen Geräten, bis zum iPhone sinnvoll nutzbar.

Gruß Mirko

24 Antworten

null
    • Maurice
    • vor 1 Jahr
    • Gemeldet - anzeigen

    Wow! Bisher hatte ich mit html nicht viel am Hut, geschweige das in Ninox zu implementieren. Bin froh, die Funktionalitäten umgesetzt zu bekommen. Jetzt, da unsere Verwaltungs-DB seit einem Jahr gut läuft, motivieren mich Vorlagen wie deine, da ggf. erste Schritte zu tun. Vielen Dank. 

    • Rafael_Sanchis
    • vor 1 Jahr
    • Gemeldet - anzeigen

    Mirko

    Hi Mirko one question.

    How can I control the width, and font color. 

      • mirko3
      • vor 1 Jahr
      • Gemeldet - anzeigen

       Font color ist the css-command color:. Value in rgb() or hex. Width is different in table or grid (the last two tabs in my table)? For table the css-command width: dynamic value in %, fix in px. In grid you must change two lines. 

      grid-template-columns:
grid-gap:

      first line: dynamic like in my examples (you can change the minmax-value) or try  auto auto auto and so on. Fix width is in px: 200px 200px 200px or other. One value, one column. The gap values in px, or delete the line. Mirko

      • Rafael_Sanchis
      • vor 1 Jahr
      • Gemeldet - anzeigen

      I would like to put the numbers (248 / 19 etc ) biggers and of another color that is possible with you code.

       

      "//-------------------------normales Ninoxscripting um beliebige Ausgabewerte zu erstellen------------------//";
let CDS := cnt(select Albums where Format like 1);
let CDY := cnt(select Albums where Format like 2);
let CDV := cnt(select Albums where Format like 3);
let CD2 := cnt(select Albums where Format like 4);
let CD3 := cnt(select Albums where Format like 5);
let CBS := cnt(select Albums where Format like 6);
let DVD := cnt(select Albums where Format like 7);
let DV2 := cnt(select Albums where Format like 8);
let M4a := cnt(select Albums where Format like 9);
let MP3 := cnt(select Albums where Format like 10);
"//------------------------Ende normales Ninoxscripting----------------------------------------------//";
let css := "
<style>
.grid-container {
    display:grid;
    /*hier kann die Spaltenanzahl festgelegt werden*/
    grid-template-columns:repeat(auto-fill, minmax(12em, 1fr));
    grid-gap:0px;

}
.gridFormat, .gridHeader{
    font-size:large;
    text-align:center;
    border-radius:.0em;
    padding:1em;
    box-shadow:0px -0px 1px DimGray inset;
    color:DimGray;
}
.gridHeader {
    grid-column: 1 / -1;
    background:Silver;
    font-size:x-large;
    font-family:'Didot';
}
.gridWht {background-colot:#FFFFFF;}
.gridOne {background-color:#b0aac0;}
.gridTwo {background-color:#ddeedd;}
.gridThree {background-color:#c2d4dd;}
.gridFour {background-color:#AD5C62;color:white;}
</style>
";
let content := "
<aside class = 'grid-container'>

<aside class = 'gridFormat gridWht'>&#x1f3b8 Format CD's <br><br><b>" +
    CDS +
    "</b></aside>
<aside class = 'gridFormat gridWht'>&#x1f3a7 Format CD's 2 <br><br><b>" +
    CDY +
    "</b></aside>
<aside class = 'gridFormat gridWht'>&#x1f3b8 Format CD's 3 <br><br><b>" +
    CDV +
    "</b></aside>
<aside class = 'gridFormat gridWht'>&#x1f3a7 Format CD's DVD <br><br><b>" +
    CD2 +
    "</b></aside>
<aside class = 'gridFormat gridWht'>&#x1f3b8 Format CD's Box Set<br><br><b>" +
    CD3 +
    "</b></aside>
<aside class = 'gridFormat gridWht'>&#x1f3a7 Format CD Blu Ray <br><br><b>" +
    CBS +
    "</b></aside>
<aside class = 'gridFormat gridWht'>&#x1f3b8 Format DVD<br><br><b>" +
    DVD +
    "</b></aside>
<aside class = 'gridFormat gridWht'>&#x1f3a7 Format MP3<br><br><b>" +
    DV2 +
    "</b></aside>
</aside>
";
html(css + content)
      • mirko3
      • vor 1 Jahr
      • Gemeldet - anzeigen

       try this.

      "//-------------------------normales Ninoxscripting um beliebige Ausgabewerte zu erstellen------------------//";
let CDS := cnt(select Albums where Format like 1);
let CDY := cnt(select Albums where Format like 2);
let CDV := cnt(select Albums where Format like 3);
let CD2 := cnt(select Albums where Format like 4);
let CD3 := cnt(select Albums where Format like 5);
let CBS := cnt(select Albums where Format like 6);
let DVD := cnt(select Albums where Format like 7);
let DV2 := cnt(select Albums where Format like 8);
let M4a := cnt(select Albums where Format like 9);
let MP3 := cnt(select Albums where Format like 10);
"//------------------------Ende normales Ninoxscripting----------------------------------------------//";
let css := "
<style>
.grid-container {
    display:grid;
    /*hier kann die Spaltenanzahl festgelegt werden*/
    grid-template-columns:repeat(auto-fill, minmax(12em, 1fr));
    grid-gap:0px;  }
.gridFormat, .gridHeader{
    font-size:large;
    text-align:center;
    border-radius:.0em;
    padding:1em;
    box-shadow:0px -0px 1px DimGray inset;
    color:DimGray;
}
.gridHeader {
    grid-column: 1 / -1;
    background:Silver;
    font-size:x-large;
    font-family:'Didot';
}
.gridWht {background-color:#FFFFFF;}
section {font-size:xx-large; color:RebeccaPurple}
</style>
";
let content := "
<aside class = 'grid-container'>  <aside class = 'gridFormat gridWht'>&#x1f3b8 Format CD's <br><br><b><section>" +
    CDS +
    "</section></b></aside>
<aside class = 'gridFormat gridWht'>&#x1f3a7 Format CD's 2 <br><br><b><section>" +
    CDY +
    "</section></b></aside>
<aside class = 'gridFormat gridWht'>&#x1f3b8 Format CD's 3 <br><br><b>" +
    CDV +
    "</b></aside>
<aside class = 'gridFormat gridWht'>&#x1f3a7 Format CD's DVD <br><br><b>" +
    CD2 +
    "</b></aside>
<aside class = 'gridFormat gridWht'>&#x1f3b8 Format CD's Box Set<br><br><b>" +
    CD3 +
    "</b></aside>
<aside class = 'gridFormat gridWht'>&#x1f3a7 Format CD Blu Ray <br><br><b>" +
    CBS +
    "</b></aside>
<aside class = 'gridFormat gridWht'>&#x1f3b8 Format DVD<br><br><b>" +
    DVD +
    "</b></aside>
<aside class = 'gridFormat gridWht'>&#x1f3a7 Format MP3<br><br><b>" +
    DV2 +
    "</b></aside>
</aside>
";
html(css + content)
      • Rafael_Sanchis
      • vor 1 Jahr
      • Gemeldet - anzeigen

       Hi againnow lost the boxes.😮

      • mirko3
      • vor 1 Jahr
      • Gemeldet - anzeigen

       Do you have a file for me?

      • Rafael_Sanchis
      • vor 1 Jahr
      • Gemeldet - anzeigen

       I send the DB

      My Own Music.ninox
      • Rafael_Sanchis
      • vor 1 Jahr
      • Gemeldet - anzeigen

       Thanks Mirko

    • Rafael_Sanchis
    • vor 1 Jahr
    • Gemeldet - anzeigen

    Thank a lot Mirko 

    • Ninox Widgets & User Interfaces
    • Jakob_Jordan
    • vor 1 Jahr
    • Gemeldet - anzeigen

    Es geht auch ohne jegliche HTML / CSS Kenntnisse. Wir haben länger daran getüftelt, wie unsere HTML Widgets einfach zu konfigurieren sind. Schau gerne hier vorbei, wenn dich das interessiert: https://forum.ninox.de/t/h7hva58

    Alle anderen natürlich auch ;)

    • Michi.1
    • vor 1 Jahr
    • Gemeldet - anzeigen

    Danke Mirko für die DB. 👍

    So kann man alles bei gesperrter Bearbeitung einigermaßen übersichtlich anzeigen.

      • Michi.1
      • vor 1 Jahr
      • Gemeldet - anzeigen

      ist es möglich einen Container mit einem Button zu bestücken, welcher über java ein Ja/Nein feld auf true setzt? Dies soll die bearbeitung wieder frei geben. 

      Grüße Michi

      • Rafael_Sanchis
      • vor 1 Jahr
      • Gemeldet - anzeigen

      Michi Can you share the script ? appreciate.

      • mirko3
      • vor 1 Jahr
      • Gemeldet - anzeigen

      click.ninox
      • Michi.1
      • vor 1 Jahr
      • Gemeldet - anzeigen

      Perfekt Danke dir,

      war nur so weit gekommen:

      let content := "
<aside class = 'grid-container'>
<header class = 'gridHeader'>
    <button onclick='myFunction()'>Freigeben?</button>
<p id='demo'></p>
<script>
function myFunction() {
let result = document.getElementById('demo').innerHTML = true;
let idNX = '" +
    raw(Nr) +
    "';
database.update(idNX, 'W5' , result);
}
</script>
    </header>
    </b></aside>";
html(css + content)

      👍geil danke

      • Michi.1
      • vor 1 Jahr
      • Gemeldet - anzeigen

       

      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;
}
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;
}
</style>
";
let content := "
<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>
<header class = 'gridFormat gridTwo gridHeader1'> Rechnungspositionen <br><br><b>" +
    "<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>";
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)
      • Rafael_Sanchis
      • vor 1 Jahr
      • Gemeldet - anzeigen

      Thanks a lot Michi.  Regards

      • Michi.1
      • vor 1 Jahr
      • Gemeldet - anzeigen

      klappt

       

      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;

}
button{
    font-size:large;
    background-color:#AD5C62;color:black;
    padding: .1em .5em .1em .5em;
    text-align: center;
    border-radius: .5em .5em .5em .5em;
}
p {
    visibility: hidden
}
</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: " +
    "inhalt Ninox" +
    "</header>";
html(css + content)
    • yellow_scissors
    • vor 7 Monaten
    • Gemeldet - anzeigen

    ich habe mal rumprobiert und versucht, jede der "responsiv"-karten mit einem eintrag einer demo tabelle "termine" mit den feldern

    "kunde" (a, b, c)  und "termin"

    zu füllen. dann sind die karten aber nicht mehr responsiv und untereinander statt nebeneinander.

    gibt es eine möglichkeit, dass es dargestellt wird wie ursprünglich, also responsiv?

     

    "//-------------------------normales Ninoxscripting um beliebige Ausgabewerte zu erstellen------------------//";
    let term := (select Termine);
    "//------------------------Ende normales Ninoxscripting----------------------------------------------//";
    for i in term do
        let css := "
    <style>
    .grid-container {
        display:grid;
        /*hier kann die Spaltenanzahl festgelegt werden*/
        grid-template-columns:repeat(auto-fill, minmax(20em, 1fr));
        grid-gap:50px;
    }
    .gridFormat, .gridHeader{
        font-size:large;
        text-align:center;
        border-radius:.5em;
        padding:1em;

    color:DimGray;
    }
    .gridHeader {
        grid-column: 1 / -1;
        background:Silver;
        font-size:x-large;
        font-family:'Didot';
    }
    .gridOne {background-color:#b0aac0;}
    .gridTwo {background-color:#ddeedd;}
    .gridThree {background-color:#c2d4dd;}
    .gridFour {background-color:#AD5C62;color:white;}
    </style>
    ";
        let content := "
    <aside class = 'grid-container'>

    <aside class = 'gridFormat gridOne'>&#128197 datetime<br><br><b>" +
            i.Kunde +
            "
        " +
            i.Termin;
        "</b></aside>

    ";
        html(css + content)
    end

      • mirko3
      • vor 7 Monaten
      • Gemeldet - anzeigen

       versuche es mal so:

      let term := (select Termine);
let css := "
<style>
.grid-container {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(20em, 1fr));
    grid-gap:20px;
}
.gridFormat{
    font-size:large;
    text-align:center;
    border-radius:.5em;
    padding:1em;
    color:DimGray;
}
.gridOne {background-color:#b0aac0;}
</style>
";
let content := ---
<aside class = 'grid-container'>{ for i in term do }
<aside class = 'gridFormat gridOne'><b>&#128197 { i.Kunde }<br>von: { i.text(start(Termin)) }<br>bis: { i.text(endof(Termin)) }</b></aside>{ end }
</aside>
    ---;
html(css + content)

      Mirko

      • yellow_scissors
      • vor 7 Monaten
      • Gemeldet - anzeigen

      vielen dank! dann sind aber alle untereinander in einer box

    • mirko3
    • vor 7 Monaten
    • Gemeldet - anzeigen

    Bei mir ist es korrekt. Ich lege mal ein Beispiel bei.

    MP.ninox
      • yellow_scissors
      • vor 7 Monaten
      • Gemeldet - anzeigen

      danke, damit klappt es jetzt auch bei mir!

Anmelden, um zu antworten

Content aside

Kategorien

Alle Themen anzeigen
  • 8 „Gefällt mir“ Klicks
  • vor 7 MonatenZuletzt aktiv
  • 24Antworten
  • 660Ansichten
  • 9 Folge bereits