0

OpenRecord in HTML-Tabelle

Hallo,

ich habe zum ersten Mal ein optisch ansprechendes Dashboard erstellt und bin ganz stolz. Jetzt hättei ch gerne nur noch die Option, dass ich auf einen Datensatz in meiner Tabelle klicken kann und sich dieser im Popup öffnet. Habe dazu im Forum ein paar Beiträge gefunden, aber keine will so richtig klappen. vielleicuht hat ja jemand einen Tipp.  Ich danke schon mal!

let leads := (select Leads where Phase = 1 or Phase = 2 or Phase = 3 or Phase = 5 or Phase = 7);
html("
<!DOCTYPE html>
<html lang='de'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Leads Übersicht</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f8f9fe;
            margin: 0;
            padding: 20px;
            text-align: center;
        }          .table-container {
            width: 90%;
            margin: auto;
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }          h2 {
            color: #333;
        }          table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }          th, td {
            padding: 12px; /* Kleinere Zeilenhöhe */
            text-align: left;
            font-size: 13px;
        }          th {
            background-color: #f1f3f7;
            font-weight: bold;
            text-transform: uppercase;
        }          td {
            border-bottom: 1px solid #e0e0e0; /* Dezente Trennlinien */
        }          tr:hover {
            background-color: #f8f9fa;
        }          /* Modernes Status-Design */
        .status {
            padding: 5px 12px;
            font-size: 11px;
            font-weight: bold;
            border-radius: 50px; /* Komplett runde Ecken */
            display: inline-block;
            color: white;
        }          .status-1 { background-color: #28a745; } /* Grün */
        .status-2 { background-color: #007bff; } /* Blau */
        .status-3 { background-color: #ffc107; } /* Gelb */
        .status-5 { background-color: #dc3545; } /* Rot */
        .status-7 { background-color: #6c757d; } /* Grau */          /* Modernes Interesse-Design */
        .interest {
            padding: 5px 12px;
            font-size: 11px;
            font-weight: bold;
            border-radius: 50px; /* Komplett runde Ecken */
            display: inline-block;
            color: white;
        }          .interest-1 { background-color: #28a745; } /* Hoch (Grün) */
        .interest-2 { background-color: #ffc107; } /* Mittel (Gelb) */
        .interest-3 { background-color: #fd7e14; } /* Niedrig (Orange) */
        .interest-4 { background-color: #dc3545; } /* Sehr niedrig (Rot) */
    </style>
</head>
<body>      <div class='table-container'>
        <h2>Leads Übersicht</h2>
        <table>
            <thead>
                <tr>
                    <th>Status</th>
                    <th>Ansprechpartner</th>
                    <th>Unternehmen</th>
                    <th>Letzter Kontakt</th>
                    <th>Interesse</th>
                </tr>
            </thead>
            <tbody>
                " +
for l in leads do
    let statusClass := switch l.Phase do
        case 1:
            "status-1"
        case 2:
            "status-2"
        case 3:
            "status-3"
        case 5:
            "status-5"
        case 7:
            "status-7"
        default:
            ""
        end;
    let interestClass := switch l.Interesse do
        case "🔥":
            "interest-1"
        case "🔥🔥":
            "interest-2"
        case "🔥🔥🔥":
            "interest-3"
        case "🔥🔥🔥🔥":
            "interest-4"
        default:
            ""
        end;
    "<tr>
        <td><span class='status " +
    statusClass +
    "'>" +
    switch l.Phase do
    case 1:
        "Kontakt hergestellt"
    case 2:
        "Erstgespräch"
    case 3:
        "Angebot erstellt"
    case 5:
        "Auswahl erstellt"
    case 7:
        "Follow-Up"
    default:
        "Unbekannt"
    end +
    "</span></td>
        <td>" +
    l.name +
    "</td>
        <td>" +
    l.Unternehmen +
    "</td>
        <td>" +
    if l.'Letzter Kontakt' then
        text(l.'Letzter Kontakt')
    else
        "Keine Angabe"
    end +
    "</td>
        <td><span class='interest " +
    interestClass +
    "'>" +
    if l.Interesse != "" then text(l.Interesse) else "Keine Angabe" end +
    "</span></td>
    </tr>"
end +
"
            </tbody>
        </table>
    </div>  </body>
</html>

10 Antworten

null
    • Gotje_Ing
    • vor 1 Monat
    • Gemeldet - anzeigen

    Ohne den Code genau geprüft zu haben, folgender Hinweis:
    in einem html Button geht folgendes Script:

    html("<button onclick=`ui.popupRecord('"+raw(Nr)+"')`>Click me</button>")

    Wobei Nr vom Zieleintrag stammt. Wichtig, nicht number(Nr), und auch die Anführungsstriche so lassen wie hier, sonst gibt es string-escape Probleme. 
    Wenn dir das so noch nicht hilft, gerne nochmal schreiben.

    • Rafael_Sanchis
    • vor 1 Monat
    • Gemeldet - anzeigen

    Hi Paul I try to recreat your html but give me and error at line 148

    You can a simple db Appreciate

    • Paul_J_Herberhold
    • vor 1 Monat
    • Gemeldet - anzeigen

    ich habe es geschafft :) jetzt sogar ohne button und man kann einfach auf den jeweiligen Datensatz klicken. Das Problem waren die fehlenden --- vor und hinter dem link. 

    let leads := (select Leads where Phase = 1 or Phase = 2 or Phase = 3 or Phase = 5 or Phase = 7);
html("
<!DOCTYPE html>
<html lang='de'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Leads Übersicht</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f8f9fe;
            margin: 0;
            padding: 20px;
            text-align: center;
        }          .table-container {
            width: 90%;
            margin: auto;
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }          h2 {
            color: #333;
        }          table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }          th, td {
            padding: 15px;
            text-align: left;
            font-size: 14px;
            cursor: pointer; /* Der Mauszeiger zeigt an, dass die Zelle klickbar ist */
        }          th {
            background-color: #f1f3f7;
            font-weight: bold;
            text-transform: uppercase;
        }          td {
            border-bottom: 1px solid #e0e0e0;
        }          tr:hover {
            background-color: #f8f9fa;
        }          .status {
            padding: 5px 12px;
            font-size: 11px;
            font-weight: bold;
            border-radius: 50px;
            display: inline-block;
            color: white;
        }          .status-1 { background-color: #28a745; }
        .status-2 { background-color: #007bff; }
        .status-3 { background-color: #ffc107; }
        .status-5 { background-color: #dc3545; }
        .status-7 { background-color: #6c757d; }          .interest {
            padding: 5px 12px;
            font-size: 11px;
            font-weight: bold;
            border-radius: 50px;
            display: inline-block;
            color: white;
        }          .interest-1 { background-color: #28a745; }
        .interest-2 { background-color: #ffc107; }
        .interest-3 { background-color: #fd7e14; }
        .interest-4 { background-color: #dc3545; }
    </style>
</head>
<body>      <div class='table-container'>
        <h2>Leads Übersicht</h2>
        <table>
            <thead>
                <tr>
                    <th>Status</th>
                    <th>Ansprechpartner</th>
                    <th>Unternehmen</th>
                    <th>Letzter Kontakt</th>
                    <th>Interesse</th>
                </tr>
            </thead>
            <tbody>
                " +
for l in leads do
    let statusClass := switch l.Phase do
        case 1:
            "status-1"
        case 2:
            "status-2"
        case 3:
            "status-3"
        case 5:
            "status-5"
        case 7:
            "status-7"
        default:
            ""
        end;
    let interestClass := switch l.Interesse do
        case "🔥":
            "interest-1"
        case "🔥🔥":
            "interest-2"
        case "🔥🔥🔥":
            "interest-3"
        case "🔥🔥🔥🔥":
            "interest-4"
        default:
            ""
        end;
    let recordId := text(raw(l));
    "<tr>
        <td " +
    ---
 onclick="ui.popupRecord('{ recordId }')"
    --- +
    "><span class='status " +
    statusClass +
    "'>" +
    switch l.Phase do
    case 1:
        "Kontakt hergestellt"
    case 2:
        "Erstgespräch"
    case 3:
        "Angebot erstellt"
    case 5:
        "Auswahl erstellt"
    case 7:
        "Follow-Up"
    default:
        "Unbekannt"
    end +
    "</span></td>
        <td " +
    ---
 onclick="ui.popupRecord('{ recordId }')"
    --- +
    ">" +
    l.name +
    "</td>
        <td " +
    ---
 onclick="ui.popupRecord('{ recordId }')"
    --- +
    ">" +
    l.Unternehmen +
    "</td>
        <td " +
    ---
 onclick="ui.popupRecord('{ recordId }')"
    --- +
    ">" +
    if l.'Letzter Kontakt' then
        text(l.'Letzter Kontakt')
    else
        "Keine Angabe"
    end +
    "</td>
        <td " +
    ---
 onclick="ui.popupRecord('{ recordId }')"
    --- +
    "><span class='interest " +
    interestClass +
    "'>" +
    if l.Interesse != "" then text(l.Interesse) else "Keine Angabe" end +
    "</span></td>
    </tr>"
end +
"
            </tbody>
        </table>
    </div>  </body>
</html>
      • Rafael_Sanchis
      • vor 1 Monat
      • Gemeldet - anzeigen

       

      Hi again Paul.

      I have tried to reproduce the html/css table but don't know what is wrong, if you can check I would appreciate your help.

      Tablero.ninox
      • Paul_J_Herberhold
      • vor 1 Monat
      • Gemeldet - anzeigen

       Hello, I downloaded your database and tried it out a bit, with this script it should work:

       

      let leads := (select Leads where Phase = 1 or Phase = 2 or Phase = 3 or Phase = 5 or Phase = 7);
html("<!DOCTYPE html>
<html lang='de'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Leads Übersicht</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f8f9fe;
            margin: 0;
            padding: 20px;
            text-align: center;
        }
        .table-container {
            width: 90%;
            margin: auto;
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        h2 {
            color: #333;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }
        th, td {
            padding: 15px;
            text-align: left;
            font-size: 14px;
            cursor: pointer;
        }
        th {
            background-color: #f1f3f7;
            font-weight: bold;
            text-transform: uppercase;
        }
        td {
            border-bottom: 1px solid #e0e0e0;
        }
        tr:hover {
            background-color: #f8f9fa;
        }
        .status {
            padding: 5px 12px;
            font-size: 11px;
            font-weight: bold;
            border-radius: 50px;
            display: inline-block;
            color: white;
        }
        .status-1 { background-color: #28a745; }
        .status-2 { background-color: #007bff; }
        .status-3 { background-color: #ffc107; }
        .status-5 { background-color: #dc3545; }
        .status-7 { background-color: #6c757d; }
        .interest {
            padding: 5px 12px;
            font-size: 11px;
            font-weight: bold;
            border-radius: 50px;
            display: inline-block;
            color: white;
        }
        .interest-1 { background-color: #28a745; }
        .interest-2 { background-color: #ffc107; }
        .interest-3 { background-color: #fd7e14; }
        .interest-4 { background-color: #dc3545; }
    </style>
</head>
<body>
    <div class='table-container'>
        <h2>Leads Übersicht</h2>
        <table>
            <thead>
                <tr>
                    <th>Status</th>
                    <th>Ansprechpartner</th>
                    <th>Unternehmen</th>
                    <th>Letzter Kontakt</th>
                    <th>Interesse</th>
                </tr>
            </thead>
            <tbody>" +
for l in leads do
    let statusClass := switch l.Phase do
        case 1:
            "status-1"
        case 2:
            "status-2"
        case 3:
            "status-3"
        case 5:
            "status-5"
        case 7:
            "status-7"
        default:
            ""
        end;
    let interestClass := switch l.Interesse do
        case "🔥":
            "interest-1"
        case "🔥🔥":
            "interest-2"
        case "🔥🔥🔥":
            "interest-3"
        case "🔥🔥🔥🔥":
            "interest-4"
        default:
            ""
        end;
    let recordId := text(raw(l));
    "<tr " +
    ---
    onclick="ui.popupRecord('{ recordId }')"
    --- +
    ">
        <td " +
    ---
        onclick="ui.popupRecord('{ recordId }')"
    --- +
    "><span class='status " +
    statusClass +
    "'>" +
    switch l.Phase do
    case 1:
        "Kontakt hergestellt"
    case 2:
        "Erstgespräch"
    case 3:
        "Angebot erstellt"
    case 5:
        "Auswahl erstellt"
    case 7:
        "Follow-Up"
    default:
        "Unbekannt"
    end +
    "</span></td>
        <td " +
    ---
        onclick="ui.popupRecord('{ recordId }')"
    --- +
    ">" +
    l.Name +
    "</td>
        <td " +
    ---
        onclick="ui.popupRecord('{ recordId }')"
    --- +
    ">" +
    l.Unternehmen +
    "</td>
        <td " +
    ---
        onclick="ui.popupRecord('{ recordId }')"
    --- +
    ">" +
    if l.'Letzter Kontakt' then
        text(l.'Letzter Kontakt')
    else
        "Keine Angabe"
    end +
    "</td>
        <td " +
    ---
        onclick="ui.popupRecord('{ recordId }')"
    --- +
    "><span class='interest " +
    interestClass +
    "'>" +
    if l.Interesse != "" then text(l.Interesse) else "Keine Angabe" end +
    "</span></td>
    </tr>"
end +
"</tbody>
        </table>
    </div>
</body>
</html>
      • Rafael_Sanchis
      • vor 1 Monat
      • Gemeldet - anzeigen

       

      Thanks Paul but the same problem Expression expected at line 181, column 3, don't understand.

      why.

      • Paul_J_Herberhold
      • vor 1 Monat
      • Gemeldet - anzeigen

      Try this 

      tabelero-new.ninox
      • Rafael_Sanchis
      • vor 1 Monat
      • Gemeldet - anzeigen

       

      Too many things Paul, 👋 Appreciate your help. Now review what happened

      • Rafael_Sanchis
      • vor 1 Monat
      • Gemeldet - anzeigen

       

      Hi Paul, I modify some your code. With scroll and Footer

      let leads := ((select 'Orders by Clients' where TypeOrder = 1 or TypeOrder = 2 or TypeOrder = 3 or TypeOrder = 4 or TypeOrder = 5) order by 'Order date');
let sumIVA := sum(leads.IVA);
let sumNet := sum(leads.'Total net price');
let sumGross := sum(leads.'Total gross price');
html("<!DOCTYPE html>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title> Orders by Clients </title>
    <style>
        .footer-total td {
            font-weight: bold;
            background-color: #f1f3f7;
        }
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f8f9fe;
            margin: 0;
            padding: 20px;
            text-align: center;
        }
        .table-container {
            width: 90%;
            margin: auto;
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 6px 6px rgba(0, 0, 0, 0.1);
            height: 30vh; /* Altura fija para el contenedor */
            display: flex;
            flex-direction: column;
        }
        h2 {
            color: #333;
            margin-bottom: 15px;
        }
        .table-scroll {
            overflow-y: auto;
            flex-grow: 1;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        thead th {
            position: sticky;
            top: 0;
            background-color: #f1f3f7;
            z-index: 2;
        }
        th, td {
            padding: 8px;
            text-align: left;
            font-size: 14px;
            cursor: pointer;
        }
        th {
            font-weight: bold;
            text-transform: uppercase;
        }
        td {
            border-bottom: 1px solid #e0e0e0;
        }
        tr:hover {
            background-color: #f8f9fa;
        }
        .status {
            padding: 2.2px 45px;
            font-size: 12px;
            font-weight: bold;
            border-radius: 10px;
            display: inline-block;
            color: white;
        }
        .type-1 { background-color: #28a745; }
        .type-2 { background-color: #007bff; }
        .type-3 { background-color: #ffc107; }
        .type-4 { background-color: #dc3545; }
        .type-5 { background-color: #6c757d; }
    </style>
</head>
<body>
    <div class='table-container'>
        <h2> Orders by Client order by Date </h2>
        <div class='table-scroll'>
            <table>
                <thead>
                    <tr>
                        <th>Type Order</th>
                        <th>Order Invoice No</th>
                        <th>Order Date</th>
                        <th>Client</th>
                        <th>iVA</th>
                        <th>Total Net Price</th>
                        <th> Total Gross Price</th>
                    </tr>
                </thead>
                <tbody>" +
for l in leads do
    let statusClass := switch l.TypeOrder do
        case 1:
            "type-1"
        case 2:
            "type-2"
        case 3:
            "type-3"
        case 4:
            "type-4"
        case 5:
            "type-5"
        default:
            ""
        end;
    let recordId := text(raw(l));
    "<tr " +
    ---
    onclick="ui.popupRecord('{ recordId }')"
    --- +
    ">
        <td " +
    ---
        onclick="ui.popupRecord('{ recordId }')"
    --- +
    "><span class='status " +
    statusClass +
    "'>" +
    switch l.TypeOrder do
    case 1:
        "Offer"
    case 2:
        "Order"
    case 3:
        "Delivery"
    case 4:
        "Invoice"
    case 5:
        "Cancellation"
    default:
        "Unknown"
    end +
    "</span></td>
        <td " +
    ---
        onclick="ui.popupRecord('{ recordId }')"
    --- +
    ">" +
    l.'Order Invoice No' +
    "</td>
        <td " +
    ---
        onclick="ui.popupRecord('{ recordId }')"
    --- +
    ">" +
    l.'Order date' +
    "</td>
        <td " +
    ---
        onclick="ui.popupRecord('{ recordId }')"
    --- +
    ">" +
    l.'Client_>'.Name +
    "</td>
        <td " +
    ---
        onclick="ui.popupRecord('{ recordId }')"
    --- +
    ">" +
    text(l.IVA) +
    "</td>
        <td " +
    ---
        onclick="ui.popupRecord('{ recordId }')"
    --- +
    ">" +
    text(l.'Total net price') +
    "</td>
        <td " +
    ---
        onclick="ui.popupRecord('{ recordId }')"
    --- +
    ">" +
    text(l.'Total gross price') +
    "</td>
    </tr>"
end +
"<tr class='footer-total'>
       <td colspan='4' style='text-align: right;'>Total</td>
       <td>" +
text(sumIVA) +
"</td>
       <td>" +
text(sumNet) +
"</td>
       <td>" +
text(sumGross) +
"</td>
</tr>" +
"</tbody>
            </table>
        </div>
    </div>
</body>
</html>
      • Paul_J_Herberhold
      • vor 1 Monat
      • Gemeldet - anzeigen

       Oh, very cool, I'll take a look at that right away. Thank you!

Anmelden, um zu antworten

Content aside

Kategorien

Alle Themen anzeigen
  • vor 1 MonatZuletzt aktiv
  • 10Antworten
  • 141Ansichten
  • 3 Folge bereits