• Deutsch

      • JS Action

      Einführung

      JS Action wird verwendet, um JavaScript auszuführen, wenn ein Button geklickt wird, und ermöglicht es Ihnen, beliebige Geschäftslogik anzupassen. Sie können es in Formular-Toolbars, Tabellen-Toolbars (auf Sammlungsebene), Tabellenzeilen (auf Datensatzebene) und an ähnlichen Orten einsetzen. Damit können Sie Operationen wie Validierungen, Benachrichtigungen, API-Aufrufe, das Öffnen von Pop-ups/Drawern und das Aktualisieren von Daten durchführen.

      jsaction-add-20251029

      Laufzeit-Kontext-API (Häufig verwendet)

      • ctx.api.request(options): Sendet eine HTTP-Anfrage.

      • ctx.openView(viewUid, options): Öffnet eine konfigurierte Ansicht (Drawer/Dialog/Seite).

      • ctx.message / ctx.notification: Globale Meldungen und Benachrichtigungen.

      • ctx.t() / ctx.i18n.t(): Internationalisierung.

      • ctx.resource: Die Datenressource für den Kontext auf Sammlungsebene (z. B. Tabellen-Toolbar), einschließlich Methoden wie getSelectedRows() und refresh().

      • ctx.record: Der aktuelle Datensatz der Zeile für den Kontext auf Datensatzebene (z. B. Tabellenzeilen-Button).

      • ctx.form: Die AntD Form-Instanz für den Kontext auf Formularebene (z. B. Formular-Toolbar-Button).

      • ctx.collection: Metainformationen der aktuellen Sammlung.

      • Der Code-Editor unterstützt Snippets und die Run-Funktion zur Vorab-Ausführung (siehe unten).

      • ctx.requireAsync(url): Lädt eine AMD/UMD-Bibliothek asynchron über eine URL.

      • ctx.importAsync(url): Importiert ein ESM-Modul dynamisch über eine URL.

      • ctx.libs.React / ctx.libs.ReactDOM / ctx.libs.antd / ctx.libs.antdIcons / ctx.libs.dayjs / ctx.libs.lodash / ctx.libs.math / ctx.libs.formula: Integrierte Bibliotheken wie React / ReactDOM / Ant Design / Ant Design Icons / dayjs / lodash / math.js / formula.js für JSX-Rendering, Zeitverarbeitung, Datenmanipulation und mathematische Berechnungen.

      Die tatsächlich verfügbaren Variablen können je nach Position des Buttons variieren. Die obige Liste bietet einen Überblick über die gängigsten Funktionen.

      Editor und Snippets

      • Snippets: Öffnet eine Liste integrierter Code-Snippets, die Sie durchsuchen und mit einem Klick an der aktuellen Cursorposition einfügen können.
      • Run: Führt den aktuellen Code direkt aus und gibt die Ausführungsprotokolle im unteren Logs-Panel aus. Es unterstützt console.log/info/warn/error und hebt Fehler zur einfachen Lokalisierung hervor.

      jsaction-toolbars-20251029

      Häufige Anwendungsfälle (Vereinfachte Beispiele)

      1) API-Anfrage und Benachrichtigung

      const resp = await ctx.api.request({ url: 'users:list', method: 'get', params: { pageSize: 10 } });
ctx.message.success(ctx.t('Request finished'));
console.log(ctx.t('Response data:'), resp?.data);

      2) Sammlung-Button: Auswahl validieren und verarbeiten

      const rows = ctx.resource?.getSelectedRows?.() || [];
if (!rows.length) {
  ctx.message.warning(ctx.t('Please select records'));
  return;
}
// TODO: Geschäftslogik implementieren…
ctx.message.success(ctx.t('Selected {n} items', { n: rows.length }));

      3) Datensatz-Button: Aktuellen Zeilendatensatz lesen

      if (!ctx.record) {
  ctx.message.error(ctx.t('No record'));
} else {
  ctx.message.success(ctx.t('Record ID: {id}', { id: ctx.record.id }))
}

      4) Ansicht öffnen (Drawer/Dialog)

      const popupUid = ctx.model.uid + '-open'; // Für Stabilität an den aktuellen Button binden
await ctx.openView(popupUid, { mode: 'drawer', title: ctx.t('Details'), size: 'large' });

      5) Daten nach dem Absenden aktualisieren

      // Allgemeine Aktualisierung: Priorisiert Tabellen-/Listenressourcen, dann die Ressource des Blocks, der das Formular enthält
if (ctx.resource?.refresh) await ctx.resource.refresh();
else if (ctx.blockModel?.resource?.refresh) await ctx.blockModel.resource.refresh();

      Hinweise

      • Idempotente Aktionen: Um mehrfache Übermittlungen durch wiederholtes Klicken zu vermeiden, können Sie in Ihrer Logik einen Status-Schalter hinzufügen oder den Button deaktivieren.
      • Fehlerbehandlung: Fügen Sie try/catch-Blöcke für API-Aufrufe hinzu und geben Sie benutzerfreundliche Rückmeldungen.
      • Ansichtsinteraktion: Beim Öffnen eines Pop-ups/Drawers mit ctx.openView wird empfohlen, Parameter explizit zu übergeben und bei Bedarf die übergeordnete Ressource nach erfolgreicher Übermittlung aktiv zu aktualisieren.

      Verwandte Dokumente