Button-Ereignis

In der Tabelle „ButtonEvent“ der Demo-Datenbank legen die Felder des Datensatzes („caption“, „the color“, „Tooltip“, „badge.caption“, „badge.color“) die Beschriftung, die Farbe, den Tooltip und das Badge des Buttons „Bonjour“ fest, mithilfe der unten beschriebenen Funktion onUpdate.

Buttons mit Ninext anpassen

Mit Ninext können Sie das Erscheinungsbild von Ninox-Buttons verändern, indem Sie in der Formel „Display field only, if“ des Buttons eine Funktion namens onUpdate definieren. Diese Funktion muss ein Objekt zurückgeben, das die zu ändernden visuellen Elemente beschreibt, und das Skript muss mit einem booleschen Wert enden, der angibt, ob der Button angezeigt wird.

Auf diese Weise können Sie:

• Die Beschriftung des Buttons ändern.
• Den Tooltip (oder Titel) des Buttons anpassen.
• Die Farbe des Buttons ändern, unter den drei Button-Stilen von Ninox: "blue" (blauer Hintergrund), "red" (rosa Hintergrund, roter Text) und "grey" (weißer Hintergrund, blauer Rahmen, wie der Button „Bonjour“ oben).
• Ein Badge anzeigen, um wichtige Informationen hervorzuheben.

Diese Funktion lässt sich in den Ninext Einstellungen ausschalten, Abschnitt „UI-Verbesserungen“: Button-Ereignisse (onUpdate) (standardmäßig aktiviert).

Kurzüberblick über die JSON-Eigenschaften

Allgemeiner Ablauf

1. Die Funktion onUpdate definieren
   Deklarieren Sie in der Formel „Display field only, if“ des Buttons eine Funktion namens onUpdate. Diese Funktion gibt ein Objekt (im JSON-Format) zurück, das die zu ändernden Elemente beschreibt. Sie erhält als Parameter die Beschriftung und die Farbe des Buttons, wie sie in Ninox festgelegt sind: { caption, buttonColor }.
2. Einen booleschen Wert für die Sichtbarkeit zurückgeben
   Die Formel muss abschließend einen booleschen Wert (true oder false) zurückgeben, der angibt, ob der Button angezeigt wird.
3. Ninext wendet die Änderungen an
   Wenn der Datensatz geöffnet oder aktualisiert wird, führt Ninext die Funktion onUpdate aus, liest das zurückgegebene Objekt und wendet die Darstellungsänderungen dynamisch auf den Button an.

Umsetzung

Ein einziger Codeblock in der Formel „Display field only, if“

"Declaration of the onUpdate function that customizes the button";
function onUpdate(buttonValues : any) do
 let count := this.Count;
 {
      caption: if count > 0 then
          "Send (" + count + ")"
      else
          "Send"
      end,
      tooltip: "Click to send your request",
      buttonColor: if count > 0 then "red" else "blue" end,
      badge: {
           caption: if count > 0 then text(count) else "" end,
           color: "red"
      }
 }
end;

"Determination of the button's visibility";
this.Count >= 0

Anmerkungen:

• Die Funktion onUpdate baut ein Objekt auf, mit dem sich die Beschriftung des Buttons (mit einem Zahlenhinweis, wenn Count positiv ist), der Tooltip, die Farbe des Buttons und die Anzeige eines Badges festlegen lassen.
• Der letzte Codeblock gibt einen booleschen Wert zurück, der bestimmt, ob der Button angezeigt wird.

Minimalbeispiel (nur Badge)

"Declaration of the onUpdate function to display only a badge";
function onUpdate(buttonValues : any) do
 let newItems := this.newItems;
 {
      badge: {
           caption: if newItems > 0 then text(newItems) else "" end,
           color: "red"
      }
     }
end;
"The button is always displayed";
true

Anmerkungen:

• Es wird ausschließlich die Eigenschaft badge zurückgegeben, um einen Wert anzuzeigen, wenn newItems größer als 0 ist.
• Der Button wird bedingungslos angezeigt.

Wichtige Hinweise

• Abschließender boolescher Rückgabewert
  Ohne ein abschließendes true oder false ist der Button nicht sichtbar.
• Eine Badge-Beschriftung immer als Text
  Ninext zeigt das Badge nur an, wenn badge.caption ein nicht leerer Text ist. Eine Zahl (3 statt "3") lässt das Badge ausgeblendet: Verwenden Sie text().
• Eine separat ausgewertete Funktion
  Ninext entnimmt der Formel nur die Funktion onUpdate und wertet sie dann separat aus, im Kontext des Datensatzes. Sie sieht also weder die Variablen noch die anderen Funktionen, die an anderer Stelle in „Display field only, if“ deklariert sind: Deklarieren Sie innerhalb von onUpdate alles, was sie benötigt. Sie kann die Felder des Datensatzes lesen (this.Count) und die globalen Funktionen der Datenbank aufrufen.