Hallo Michi.

Einen Weg die JS-Variablen in Ninox zu verarbeiten habe ich leider nicht gefunden. Ich bin aber letztlioch anders zum Ziel gekommen.

Ich habe mir einfach mal angeschaut, was denn denn rauskommt, wenn man:

html("ui.popupRecord('" + raw(first(select Messstellen where Nr=nummer)) + "');");

ausgeben lässt. Am Ende steht da einfach nur: ui.popupRecord('R12') beisplweise. Das konnte ich dann einfach per Text-Ersetzen in den Code übernehmen.

Woher Ninox weiß, welche Tabelle gemeint ist, ist mitr allerdings nicht klar. Aber es funktioniert.

Zur Info hier noch einmal der Code:

1. Baumdiagramm (HTML-Import aus einer Tabelle)

<style>
    #chart_div {
        /*font-family: "NotoSans";
        font-color: black;*/
        font-size: 1.2em;
        }

    #chart_div .nodeDescription {
        /*font-style: italic;*/
        font-weight: normal;
        line-height: 1.2em;
        }

    #chart_div .treenode {
        font-weight: bold;
        background:powderblue;
        border-radius: 10px;
        box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 10px;
        cursor: pointer;
        }

    #chart_div .treenode-selected {
        background:yellow;
        border-radius: 10px;
        }

    #chart_div .google-visualization-orgchart-linebottom {
        border-bottom: 2px solid grey;
        }

    #chart_div .google-visualization-orgchart-linetop {
        border-top: 2px solid grey;
        }

    #chart_div .google-visualization-orgchart-lineleft {
        border-left: 2px solid grey;
        }

    #chart_div .google-visualization-orgchart-lineright {
        border-right: 2px solid grey;
        }
</style>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', {packages:["orgchart"]});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart()
        {
            var data = new google.visualization.DataTable();

        data.addColumn('string', 'Messstelle');
            data.addColumn('string', 'übergeordneteMessstelle');
            data.addColumn('string', 'ToolTip');

        // For each orgchart box, provide the name, manager, and tooltip to show.
        //   [{'v':'%Element%', 'f':'%sichtbarerName%'},'%übergeordnetesElement%', '%ToolTip%']
        data.addRows([
            %Knotenelemente%
        ]);

        %Knotendesign%
        // Create the chart.
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        // Draw the chart, setting the allowHtml option to true for the tooltips.
        chart.draw(data, {'allowCollapse': true,'allowHtml':true, 'nodeClass': 'treenode', 'selectedNodeClass': 'treenode-selected'});
    }
</script>
<div id="chart_div"></div>

2. Messtellensuche (verstecktes Funktionsfeld)

let zaehlertyp := Messstellentypen.Typ;
let liegenschaft := Liegenschaft.Name;
let knotenelemente := (select Messstellen);
if not Messstellentypen then
    knotenelemente := (select Messstellen where Liegenschaft.Name = liegenschaft and aktiv = 1);
    void
else
    knotenelemente := (select Messstellen where Liegenschaft.Name = liegenschaft and 'Zählertyp'.Typ = zaehlertyp and aktiv = 1);
    void
end;
"//";
"/let knotenelemente := eval(""(select Messstellen where Liegenschaft.Name = liegenschaft and 'Zählertyp'.Typ = zaehlertyp and aktiv = 1)"",this);/";
"//";
let htmlcode := text((select 'HTML-Elemente' where Name = "Google Baumdiagramm Knotenelement").'HTML-Inhalt');
let result := [""];
"/Die zugehörigen Informationen zu jeder Messstelle sammeln/";
for i from 0 to count(knotenelemente) do
    "/1. Die Knoten-Daten/";
    let uebergeordneteMessstelle := text((select Messstellen where 'Messstellen-Name' = text(item(knotenelemente, i).'Übergeordnete Messstelle')).'Messstellen-Nr');
    let knoten := "";
    knoten := replace(htmlcode, "%Element%", trim(item(knotenelemente, i).'Messstellen-Nr'));
    knoten := replace(knoten, "%Nr%", text(item(knotenelemente, i).Nr));
    knoten := replace(knoten, "%übergeordnetesElement%", trim(uebergeordneteMessstelle));
    knoten := replace(knoten, "%Elementbeschreibung%", trim(item(knotenelemente, i).'Messstellen-Beschreibung'));
    knoten := replace(knoten, "%Zuordnung%", kuerzen(trim(item(knotenelemente, i).Zuordnung), 30, "..."));
    knoten := replace(knoten, "%ToolTip%", trim(item(knotenelemente, i).ToolTip));
    if [i] = 0 then
        result := [knoten]
    else
        result := array(result, [knoten])
    end;
    "/2. Das Knoten-Design/"
end;
"/if zaehlertyp = null then ""leer"" else zaehlertyp end;/";
join(result, ", ")

3. Knotenelement (HTML-Import aus einer Tabelle)

[
{
'v':'%Element%',
'f':"<div class=\"node\" onclick=\"ui.popupRecord('R%Nr%');\">%Element%<div class=\"nodeDescription\">%Elementbeschreibung%<div style=\"font-size: 0.85em;margin-top:0.25em;\">[%Zuordnung%]</div></div></div>"
},
'%übergeordnetesElement%',
'%ToolTip%'
]

4. Baumdiagramm (sichtbares Funktionsfeld)

let messstellentyp := Messstellentypen.Typ;
let hintergrundfarbe := text((select 'Zählertypen' where Typ = messstellentyp).Farbe);
let htmlcode := text((select 'HTML-Elemente' where Name = "Google Baumdiagramm").'HTML-Inhalt');
htmlcode := replace(htmlcode, "%Knotenelemente%", Messstellensuche);
htmlcode := replace(htmlcode, "%Knotendesign%", Messstellendesign);
htmlcode := "<h2 style=""text-align: center; font-size: 1.2em; font-weight: 600; font-style: normal; color: rgb(81, 89, 113); margin: 0 0 2em;"">Aktive Messstellen</h2>" +
    htmlcode +
    "<br><br><br>" +
    Messstellenlegende +
    "<hr style=""border-width: thin; border-style: none none solid; border-color: rgb(233, 236, 244);"">";
html(htmlcode)