0

Dashboard

Hi guys, 
I experimented a little bit with html and ninox. 

I created a Dashboard which looks currently like this. 

I will also attach the code. 

However is it possible to integreate in Module 4 a table which is called "Veranstaltungen". It should show the first 5 entries and the Collumns Date and Location. 

Would be great if you have some ideas!

 

html("<head>
</head>
<body class=""null"">
    <div class=""wrapper"">
        <main class=""content"">
            <h2>Dashboard Overview</h2><br>
            <div class=""container-fluid"">
                <!-- Erste Kachelreihe (Überschriften mit Tabelle) -->
                <div class=""row gx-5 gy-4 uniform-row"">
                    <div class=""col-md-3 uniform-column"">
                        <div class=""card header-card uniform-card"">
                            <div class=""card-body d-flex align-items-center justify-content-center"">
                                <table class=""header-table"">
                                    <tr>
                                        <td class=""header-text"">Offene Emails</td>
                                        <td class=""header-icon"">📧</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class=""col-md-3 uniform-column"">
                        <div class=""card header-card uniform-card"">
                            <div class=""card-body d-flex align-items-center justify-content-center"">
                                <table class=""header-table"">
                                    <tr>
                                        <td class=""header-text"">ToDos</td>
                                        <td class=""header-icon"">📝</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class=""col-md-3 uniform-column"">
                        <div class=""card header-card uniform-card"">
                            <div class=""card-body d-flex align-items-center justify-content-center"">
                                <table class=""header-table"">
                                    <tr>
                                        <td class=""header-text"">Jahresgewinn 2025</td>
                                        <td class=""header-icon"">💰</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class=""col-md-3 uniform-column"">
                        <div class=""card header-card uniform-card"">
                            <div class=""card-body d-flex align-items-center justify-content-center"">
                                <table class=""header-table"">
                                    <tr>
                                        <td class=""header-text"">Termine 2025</td>
                                        <td class=""header-icon"">📅</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Zweite Kachelreihe (Module) -->
                <div class=""row gx-5 gy-4 mt-5 uniform-row"">
                    <div class=""col-md-3 uniform-column"">
                        <div class=""card module-card uniform-card"">
                            <div class=""card-body text-center"">
                                <h5>Modul 1</h5>
                                <div class=""module-container"">Hier könnte ein Modul eingebunden werden.</div>
                            </div>
                        </div>
                    </div>
                    <div class=""col-md-3 uniform-column"">
                        <div class=""card module-card uniform-card"">
                            <div class=""card-body text-center"">
                                <h5>Modul 2</h5>
                                <div class=""module-container"">Hier könnte ein Modul eingebunden werden.</div>
                            </div>
                        </div>
                    </div>
                    <div class=""col-md-3 uniform-column"">
                        <div class=""card module-card uniform-card"">
                            <div class=""card-body text-center"">
                                <h5>Modul 3</h5>
                                <div class=""module-container"">Hier könnte ein Modul eingebunden werden.</div>
                            </div>
                        </div>
                    </div>
                    <div class=""col-md-3 uniform-column"">
                        <div class=""card module-card uniform-card"">
                            <div class=""card-body text-center"">
                                <h5>Modul 4</h5>
                                <div class=""module-container"">Hier könnte ein Modul eingebunden werden.</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</body>
<style>
/* Container */
.wrapper {
    padding: 2rem;
    background-color: #f8f9fa;
}
.content {
    max-width: 1200px;
    margin: auto;
}
/* Zeilen */
.uniform-row {
    justify-content: space-between;
    align-items: stretch;
    column-gap: 2rem; /* Größerer Abstand zwischen Spalten */
    row-gap: 1.5rem; /* Abstand zwischen Zeilen */
}
/* Spalten */
.uniform-column {
    flex: 1;
    min-width: 250px; /* Gleiche Breite erzwingen */
}
/* Cards */
.uniform-card {
    height: 150px; /* Einheitliche Höhe für alle Karten */
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.header-card {
    height: 100px; /* Höhe für die Überschrift-Karten */
    display: flex;
    justify-content: center;
    align-items: center; /* Vertikale Zentrierung */
}
/* Tabelle in den Überschriften */
.header-table {
    width: 100%;
    height: 100%;
}
.header-text {
    text-align: left;
    font-weight: bold;
    font-size: 1.25rem;
    padding-right: 1rem;
}
.header-icon {
    text-align: center;
    font-size: 2rem;
}
/* Mehr Abstand zwischen Reihen */
.mt-5 {
    margin-top: 3rem;
}
/* Module Container */
.module-container {
    height: 80px;
    background: #e9ecef;
    border: 1px dashed #6c757d;
    border-radius: 0.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>")

2 replies

null
    • Christoph_Hintermuller
    • 2 wk ago
    • Reported - view

    Ok after a lot of tries it is working! 

    If you are interessted in the code, you will find it here

     

    let myObject := do as server
        ((select Veranstaltungen) order by Datum).{
            Nr: raw(Nr),
            Datum: date(Datum),
            Uhrzeit: Uhrzeit,
            Location: Location.Location
        }
    end;
let limitedObject := slice(myObject, 0, 5);
let count := sum(Veranstaltungen);
let tableContent := "
<table class='table'>
    <thead>
        <tr>
            <th>Datum</th>
            <th>Uhrzeit</th>
            <th>Ort</th>
        </tr>
    </thead>
    <tbody>";
let tableRows := for a in limitedObject do
        "<tr>
        <td>" +
        date(a.Datum) +
        "</td>
        <td>" +
        time(a.Uhrzeit) +
        "</td>
        <td>" +
        a.Location +
        "</td>
    </tr>"
    end;
let tableFooter := "
    </tbody>
</table>";
let inboxObject := do as server
        ((select 'Email Verwaltung') order by 'Datum + Uhrzeit').{
            Datum: date('Datum + Uhrzeit'),
            Absender: Absender.Vorname,
            Betreff: Betreff
        }
    end;
let limitedInboxObject := slice(inboxObject, 0, 5);
let tableContentPosteingang := "
<table class='table'>
    <thead>
        <tr>
            <th>Datum</th>
            <th>Absender</th>
            <th>Betreff</th>
        </tr>
    </thead>
    <tbody>";
let tableRowsPosteingang := for a in limitedInboxObject do
        "<tr>
        <td>" +
        date(a.Datum) +
        "</td>
        <td>" +
        a.Absender +
        "</td>
        <td>" +
        a.Betreff +
        "</td>
    </tr>"
    end;
let tableFooterPosteingang := "
    </tbody>
</table>";
html("<head>
</head>
<body class=""null"">
    <div class=""wrapper"">
        <main class=""content"">
               <h4>Hallo und Willkommen zurück.</h4>
            <p>Bitte wähle deinen Nutzernamen aus, damit alle Funktionen richtig funktionieren!</p><br>
            <div class=""container-fluid"">
                <!-- Erste Kachelreihe (Überschriften mit Tabelle) -->
                <div class=""row gx-5 gy-4 uniform-row"">
                    <div class=""col-md-3 uniform-column"">
                        <div class=""card header-card uniform-card"">
                            <div class=""card-body d-flex align-items-center justify-content-center"">
                                <table class=""header-table"">
                                    <tr>
                                        <td class=""header-text"">Offene Emails</td>
                                        <td class=""header-icon"">📧</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class=""col-md-3 uniform-column"">
                        <div class=""card header-card uniform-card"">
                            <div class=""card-body d-flex align-items-center justify-content-center"">
                                <table class=""header-table"">
                                    <tr>
                                        <td class=""header-text"">ToDos</td>
                                        <td class=""header-icon"">📝</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class=""col-md-3 uniform-column"">
                        <div class=""card header-card uniform-card"">
                            <div class=""card-body d-flex align-items-center justify-content-center"">
                                <table class=""header-table"">
                                    <tr>
                                        <td class=""header-text"">Termine 2025</td>
                                        <td class=""header-icon"">📅</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Zweite Kachelreihe (Module) -->
                <div class=""row gx-5 gy-4 mt-5 uniform-row"">
                    <div class=""col-md-3 uniform-column"">
                        <div class=""card module-card uniform-card"">
                            <div class=""card-body text-center"">
                                <h5>Modul 1</h5>
                                <div class=""module-container"">" +
tableContentPosteingang +
tableRowsPosteingang +
tableFooterPosteingang +
"</div> </div>
                        </div>
                    </div>
                    <div class=""col-md-3 uniform-column"">
                        <div class=""card module-card uniform-card"">
                            <div class=""card-body text-center"">
                                <h5>Modul 2</h5>
                                <div class=""module-container"">Hier könnte ein Modul eingebunden werden.</div>
                            </div>
                        </div>
                    </div>
                    <div class=""col-md-3 uniform-column"">
                        <div class=""card module-card uniform-card"">
                            <div class=""card-body text-center"">
                                <h5>Modul 4</h5>
                                <div class=""module-container"">" +
tableContent +
tableRows +
tableFooter +
"<br>" +
"∑ Gesamtveranstaltungen: " +
cnt(myObject) +
"</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</body>
<style>
/* Bestehende Styles beibehalten */
.wrapper {
    padding: 2rem;
    background-color: #f8f9fa;
}
.content {
    margin: auto;
}
.uniform-row {
    justify-content: space-between;
    align-items: stretch;
    column-gap: 2rem;
    row-gap: 1.5rem;
}

.card header-card uniform-card-wide{
    width: 1800px;
}


.card-body text-left
{
  text-align: left;
}

.uniform-column {
    flex: 1;
    width: 400px;
}
.uniform-card {
    height: 400px; /*Vergößert die Hohe zweite Reihe*/
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.header-card {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.header-table {
    width: 100%;
    height: 100%;
}
.header-text {
    text-align: left;
    font-weight: bold;
    font-size: 1.25rem;
    padding-right: 1rem;
}
.header-icon {
    text-align: center;
    font-size: 2rem;
}
.mt-5 {
    margin-top: 3rem;
}
.module-container {
    height: auto;
    background: #e9ecef;
    border: 1px dashed #6c757d;
    border-radius: 0.25rem;
    padding: 1rem;
}
.table {
    width: 100%;
    border-collapse: collapse;
}
.table th, .table td {
    border: 1px solid #ddd;
    padding: 0.5rem;
    text-align: left;
}
.table th {
    background-color: #f2f2f2;
}
</style>")
    • szormpas
    • 2 wk ago
    • Reported - view

     Hi,

    Well done! You can make Ninox even more powerful by adding your own HTML, CSS and JavaScript code.

    You can also check out the Dashboard Template project for some extra inspiration. 

Login to reply

Content aside

  • 2 wk agoLast active
  • 2Replies
  • 54Views
  • 2 Following