Button-Ereignis

Bild.png

Buttons mit Ninext anpassen

Mit Ninext können Sie das Erscheinungsbild von Ninox-Buttons verändern, indem Sie im Trigger „Nur anzeigen, wenn“ 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 über vordefinierte Klassen ändern.
  • Ein Badge anzeigen, um wichtige Informationen hervorzuheben.

Kurzüberblick über die JSON-Eigenschaften

EigenschaftBeschreibungBeispiel / Verwendung
captionDer auf dem Button angezeigte Text."Send" / "Cancel"
tooltip oder titleDer Text, der beim Überfahren als Tooltip erscheint."Click to send"
buttonColorDie Farbklasse, die auf den Button angewendet wird (z. B. "blue", "red", "grey")."blue"
badgeEin Objekt, das das auf dem Button anzuzeigende Badge beschreibt.Siehe Einzelheiten unten
badge.captionDer Text, die Zahl oder das Symbol im Badge."3" or "!"
badge.colorDie Farbe des Badges (Standardfarbe oder eigene Farbe)."red" or "#4970ff"

Allgemeiner Ablauf

  1. Die Funktion onUpdate definieren
    Deklarieren Sie im Code des Triggers „Nur anzeigen, wenn“ des Buttons eine Funktion namens onUpdate. Diese Funktion gibt ein Objekt (im JSON-Format) zurück, das die zu ändernden Elemente beschreibt.
  2. Einen booleschen Wert für die Sichtbarkeit zurückgeben
    Der Trigger 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 im Trigger „Nur anzeigen, wenn“

"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.