In Ninox-Script auf JavaScript-Variablen zugreifen?

Frank_Heitmann.1
vor 1 JahrThu, March 28, 2024 at 3:08 PM UTC
5Antworten

Hallo Forum,

vielleicht funktioniert das gar nicht. Aber ich probier's mal.

Hintergrund ist folgender: weil es bei Ninox ein hauseigenes Baudiagramm nicht gibt habe ich mir ein Google-Baudiagramm ("Orgchart") in einem Funktionsfeld erstellt. Das Baudiagramm zeigt entsprechend zweier Auswahlfelder (Liegenschaft und Zählertyp) die entsprechenden Messstellen einer Liegenschaft in der korrekten Beziehungsstruktur an. Soweit so gut.

Einzelne Messtellen lassen sich im Baudiagramm auswählen. Bei Auwahländerung wird im JavaScript der Variablenwert "data.getValue(selection[0].row, 0))" bzw. "stelle" neu gesetzt.

relativ klar was erreicht werden soll: Beim Klicken auf die jeweilige Messtelle soll per ui.popupRecord() die Formularansicht der jeweiligen Messstelle geöffnet werden.

Hier die Codeausschnitte:

1. Google Chart (wird in Funktionsfeld importiert)

 <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'));
    //Ein Select-Ereignis einfühen
        google.visualization.events.addListener(chart, 'select', function ()
        {
        var selection = chart.getSelection();
        if (selection.length > 0)
            {
            //alert(data.getValue(selection[0].row, 0));
            var stelle =  data.getValue(selection[0].row, 0);
            %PopupEreignis%
            }
        }
);
        // 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>

Der Ninox-Code des zusammengebauten Baumdiagramm sieht so aus:

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);
let popupMarker := "%PopupEreignis%";
let position := index(htmlcode, popupMarker);
let CodeVorPopup := substr(htmlcode, 0, position - 1);
let CodeNachPopup := substr(htmlcode, position + length(popupMarker));
html(CodeVorPopup + "ui.popupRecord('" + raw(first(select Messstellen where Nr = 1)) +
"');" +
"alert(stelle);" +
CodeNachPopup +
"<br><br><br>" +
Messstellenlegende)

statt raw(first(select Messstellen where Nr = 1)) hätte ich jetzt gerne raw(first(select Messstellen where Nr = stelle))

Zum besseren Verständnis hier noch ein Screenshot:

Scripting and functions

- Michi.1
- vor 1 JahrThu, March 28, 2024 at 6:36 PM UTC
- Gemeldet - anzeigen
Bin jetzt nen Laie, aber ich glaube das geht so nicht. Was du versuchen kannst wäre ein Dialog von ninox zu mißbrauchen. Diesen mittels css hack auf die Bildschirmgröße zu erweitern und den chart dort zu platzieren. Damit du die Buttons vom Diagramm nutzen kannst. Anders als im funktionsfeld ist es aber wichtig das im Dialog alle Werte geladen werden welche vorhanden sind. Du nach ninox schreiben kannst, aber es kein neu laden der Daten von deiner Eingabe gibt, was heißt du must immer den Dialog neu laden um Änderungen zu sehen. Aber du kannst die Buttons nutzen vom Diagramm
- Frank_Heitmann.1
  
  vor 1 JahrFri, March 29, 2024 at 5:19 PM UTC
  
  Gemeldet - anzeigen
  Das ist mir glaube ich zu fummelig. Veilleicht finde ich ja noch einen Weg.
- Michi.1
  
  vor 1 JahrFri, March 29, 2024 at 5:25 PM UTC
  
  Gemeldet - anzeigen
  wenn du einen findest, so teile ihn bitte

Frank_Heitmann.1
vor 1 JahrTue, April 2, 2024 at 12:17 PM UTC
Gemeldet - anzeigen

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)

- Tobias_Bartzsch
- vor 1 JahrWed, April 3, 2024 at 7:07 AM UTC
- Gemeldet - anzeigen
... du könntest auch ein Ninox Feld anlegen, welches als "Trigger bei Änderung" deinen Popup auslöst, und es per javascript mit einer Datensatz ID befüllen. Du müsstest dafür allerdings den internen Feldnamen mit der Ninox API über postman oder einen API call innerhalb von NINOX ausführen.

database.update('" + raw(NrDiesesDatensatzes) + "', 'dieIDdesNinoxFeldes-zB. Y', DeineJavascriptVariable);

Aber du bist mit ui.PopupRecord() ja bereits erfolgreich und im javascript geblieben, da braucht man nicht wieder zum NinoxScript zu wechseln...

Willkommen in der Ninox-Community

In Ninox-Script auf JavaScript-Variablen zugreifen?

5 Antworten

Content aside

Kategorien

Übersicht