Crowdin Apps JS

Die Crowdin Apps JS ist eine JavaScript-Bibliothek, die die Kommunikation zwischen Ihrer App und der Crowdin-Benutzeroberfläche ermöglicht. Da alle Crowdin Apps in einem isolierten \<iframe> ausgeführt werden, sind sie isoliert und können nicht direkt auf den Inhalt oder Code der Crowdin-Hauptseite zugreifen.

Diese Bibliothek löst dieses Problem, indem sie eine sichere Cross-Window-Messaging-Brücke (postMessage()) bereitstellt. Nach dem Einbinden der Bibliothek steht dir ein globales AP-Objekt (App Project) zur Verfügung. Dieses Objekt ist Ihr zentraler Einstiegspunkt zum Aufrufen von Methoden (wie AP.getContext()) und zum Abonnieren von Ereignissen (wie AP.events.on()).

Hinweis

Serverless-Apps greifen über das Crowdin Serverless Apps SDK auf diese Methoden zu, das diese Bibliothek kapselt. In einer selbst gehosteten App ruft die von dir bereitgestellte Seite AP direkt auf.

Erste Schritte

Um das AP-Objekt zu verwenden, musst du das iframe.js-Skript im \<head> der HTML-Seite deiner App einbinden.

<script src="https://cdn.crowdin.com/apps/dist/iframe.js"></script>

Achtung

Lade die Datei iframe.js nicht herunter und hoste sie nicht selbst. Sie muss über die Domain https://cdn.crowdin.com/ bereitgestellt werden, um die domänenübergreifende Messaging-Brücke aufzubauen. Die Bibliothek funktioniert nicht, wenn du sie von deinem eigenen Server oder auf einer eigenständigen Webseite bereitstellst.

Globale Aktionen

Globale Aktionen sind in jedem Kontext verfügbar, in dem deine App geladen werden kann (z. B. in einem Modal, im Tab „Tools“ des Projekts oder in der Editor-Seitenleiste). Sie werden alle direkt über das Root-AP-Objekt aufgerufen.

Kontext und Theming

Diese Methoden ermöglichen es deiner App, essenzielle Informationen über ihre Umgebung zu erhalten, wie zum Beispiel das aktuelle Projekt, den Benutzer und das aktive UI-Theme.

AP.getContext(callback)

Ruf ein ContextDataObject ab, das Schlüsselinformationen über die Umgebung enthält, in der die App aktuell ausgeführt wird (z. B. Projekt-ID, Benutzer und Dateidaten).

Hinweis

• Der Payload dieser Methode ist dynamisch. Je nachdem, auf welcher Seite deine App geladen wird (z. B. im Editor oder in den Project Tools), kann er unterschiedliche Eigenschaften enthalten.
• Wenn ein Wert nicht verfügbar ist, wird sein Schlüssel im Kontextobjekt weggelassen, statt auf null gesetzt zu werden.
• Die Angaben zu user, project und permissions sind nicht Bestandteil des von AP.getJwtToken zurückgegebenen JWT-Tokens und stehen der App daher nur im Browser zur Verfügung.

Beispiel:

AP.getContext(function(contextData) {
  if (contextData) {
    console.log("Current project ID:", contextData.project_id);
    if(contextData.editor) {
      console.log("Current file name:", contextData.editor.fileData.name);
    }
  }
});

Parameter

callback

Typ: Funktion Erforderlich: ja Beschreibung: Eine Callback-Funktion, die die Antwort verarbeitet. Sie erhält ein Argument: das ContextDataObject oder null.

Beispiel für den Response-Payload

{
  "user_id": 15,
  "user_login": "john.smith",
  "project_id": 123,
  "project_identifier": "docs-portal",
  "organization_id": 100001,
  "organization_domain": "acme",
  "user": {
    "id": 15,
    "username": "john.smith",
    "fullname": "John Smith",
    "isAdmin": false
  },
  "project": {
    "id": 123,
    "name": "Docs Portal",
    "identifier": "docs-portal",
    "type": "file-based",
    "sourceLanguage": "en",
    "targetLanguages": ["fr", "uk"],
    "description": "Public documentation portal"
  },
  "permissions": [
    {
      "name": "translator",
      "allLanguages": false,
      "languages": ["fr"]
    },
    {
      "name": "proofreader",
      "allLanguages": true,
      "languages": []
    }
  ],
  "editor": {
    "mode": "translate",
    "theme": "dark",
    "source_language_id": "en",
    "target_language_id": "fr",          // Present in "translate" and "proofread"
    "target_language_ids": ["fr", "uk"], // Present only in "multilingual"
    "active_target_language_id": "fr",   // The currently active target language in the Editor
    "task_id": 327,                      // Present only if Task-based access control is enabled
    "task": {
      "id": 327,
      "type": 2,
      "status": 0,
      "title": "New task",
      "description": "Task description",
      "created": "2025-01-01 10:30:00",
      "to_language": "French",
      "workflow_step_id": 0,
      "workflow_step_title": "",
      "language_id": "fr"
    },
    "file": 987,
    "fileData": {
      "id": "987",
      "is_plain_text": true,
      "type": "android",
      "status": "1",
      "parent_id": "0",
      "node_type": "1",
      "created": "2025-01-01 10:30:00",
      "extension": "xml",
      "priority": "1",
      "name": "example_file.xml",
      "upload_ready": 1,
      "export_ready": 1,
      "export_xliff_ready": 1,
      "can_change": 1,
      "plural_support": 1,
      "excluded_languages": [],
      "html_preview": 0,
      "identifier_required": 1,
      "total": 50,
      "translated": 10,
      "approved": 5,
      "preTranslated": 0,
      "translated_percent": 20,
      "approved_percent": 10,
      "progress": {
          "total": 50,
          "translated": 10,
          "approved": 5,
          "translated_percent": 20,
          "approved_percent": 10,
          "pre_translated": 0,
          "file_id": 987,
          "language_id": 2,
          "translation_link": "/editor/project-name/987/en-fr"
      }
    },
    "workflow_step": {
      "id": 7777,
      "title": "Translation",
      "type": "Translate"
    }
  }
}

Struktur des Antwortobjekts

user_id	Typ: integer Beschreibung: Die eindeutige numerische ID des Benutzers, dem die App derzeit angezeigt wird. Nur für authentifizierte Benutzer verfügbar.
user_login	Typ: string Beschreibung: Der Benutzername des Benutzers, für den die App derzeit angezeigt wird. Nur für authentifizierte Benutzer verfügbar.
project_id	Typ: integer Beschreibung: Die eindeutige numerische ID des aktuellen Projekts.
project_identifier	Typ: string Beschreibung: Der Bezeichner des Projekts, in dem das Modul geöffnet ist. Wird angezeigt, wenn das Modul in einem Projektkontext ausgeführt wird und der Bezeichner verfügbar ist.
organization_id	Typ: integer Beschreibung: Die eindeutige numerische ID der Organisation (nur Crowdin Enterprise).
organization_domain	Typ: string Beschreibung: Die Domain der Organisation, in der die App installiert ist (nur Crowdin Enterprise).
user	Typ: object Beschreibung: Ein Objekt mit Angaben zu dem Benutzer, dem die App angezeigt wird.
user.id	Typ: integer Beschreibung: Die eindeutige numerische ID des Benutzers.
user.username	Typ: string Beschreibung: Der Benutzername des Benutzers.
user.fullname	Typ: string Beschreibung: Der vollständige Name des Benutzers.
user.isAdmin	Typ: boolean Beschreibung: Crowdin Enterprise only. Gibt an, ob der Benutzer über Administratorzugriff auf die Organisation verfügt.
project	Typ: object Beschreibung: Ein Objekt mit Angaben zu dem Projekt, in dem die App ausgeführt wird. Wird angezeigt, wenn die App in einem Projektkontext ausgeführt wird.
project.id	Typ: Ganzzahl Beschreibung: Die eindeutige numerische ID des Projekts.
project.name	Typ: string Beschreibung: Der Anzeigename des Projekts.
project.identifier	Typ: string Beschreibung: Der Bezeichner des Projekts.
project.type	Typ: string Zulässige Werte: file-based, string-based
project.sourceLanguage	Typ: string | null Beschreibung: Der Sprachcode der Ausgangssprache des Projekts.
project.targetLanguages	Typ: array Beschreibung: Die Sprachcodes der Zielsprachen des Projekts.
project.description	Typ: Zeichenkette Beschreibung: Die Projektbeschreibung.
permissions	Typ: array Beschreibung: Die Rollen, die der Benutzer im aktuellen Projekt innehat. Es wird nur die höchste Zugriffsebene aufgeführt, sodass ein Benutzer mit der Rolle admin, owner, manager oder developer keinen Eintrag für translator, proofreader oder language_coordinator hat. Wird angezeigt, wenn die App in einem Projektkontext ausgeführt wird, und bleibt leer für einen Benutzer, der keine Rolle im Projekt hat.
permissions[].name	Typ: Zeichenkette Zulässige Werte: admin (nur Crowdin Enterprise), owner, manager, developer, language_coordinator, translator, proofreader
permissions[].allLanguages	Typ: boolean Beschreibung: Gibt an, ob die Rolle jede Zielsprache des Projekts abdeckt.
permissions[].languages	Typ: Array Beschreibung: Die Sprachcodes, auf die die Rolle beschränkt ist. Leer, wenn allLanguages den Wert true hat.
editor	Typ: object | null Beschreibung: Ein Objekt mit dem Editor-Kontext. null, wenn sich die App nicht im Editor befindet.
editor.mode	Typ: string Zulässige Werte: translate, proofread, multilingual Beschreibung: Der aktuelle Modus des Editors.
editor.theme	Typ: string Zulässige Werte: translate, proofread, multilingual Beschreibung: Der aktuelle Modus des Editors.
editor.source_language_id	Typ: string Beschreibung: Die ID der Ausgangssprache (z. B. “en”).
editor.target_language_id	Typ: string Beschreibung: Die ID der aktuellen Zielsprache (z. B. “fr”).
editor.target_language_ids	Typ: array Beschreibung: Ein Array mit den IDs der Zielsprachen. Hinweis Dieses Feld ersetzt editor.target_language_id wenn editor.mode auf multilingual gesetzt ist.
editor.active_target_language_id	Typ: string Beschreibung: Die ID der aktuell aktiven Zielsprache im Editor (z. B. “fr”). Im Modus multilingual wird der Wert dynamisch anhand der Cursorposition aktualisiert.
editor.task_id	Typ: integer Beschreibung: Die numerische ID der aktuellen Aufgabe. Hinweis Dieses Feld ist nur vorhanden, wenn die aufgabenbasierte Zugriffskontrolle in den Projekteinstellungen aktiviert ist.
editor.task	Typ: object Beschreibung: Ein detailliertes Objekt mit Metadaten zur aktuellen Aufgabe (e.g., title, status, description). Nur zusammen mit editor.task_id vorhanden.
editor.file	Typ: integer Beschreibung: Die numerische ID der Datei, die derzeit im Editor geöffnet ist.
editor.fileData	Typ: object Beschreibung: Ein detailliertes Objekt mit Daten zur geöffneten Datei. (Dieses Objekt entspricht dem Objekt, das von AP.editor.getSelectedFiles zurückgegeben wird.)
editor.fileData.id	Typ: string Beschreibung: Die Datei-ID (als Zeichenkette).
editor.fileData.name	Typ: string Beschreibung: Der Name der Datei.
editor.fileData.node_type	Typ: string Beschreibung: Der Typ des Knotens (“1” für Datei, “0” für Ordner).
editor.fileData.total	Typ: integer Beschreibung: Die Gesamtzahl der Strings in der Datei.
editor.fileData.progress	Typ: object Beschreibung: Ein Objekt mit Daten zum Übersetzungsfortschritt für die aktuelle Sprache.
editor.fileData.progress.translation_link	Typ: string Beschreibung: Ein relativer URL-Pfad zu der Datei im Editor.
editor.workflow_step	Typ: object | null Beschreibung: nur für Crowdin Enterprise. Details des aktuellen Workflow-Schritts. null, wenn kein Workflow aktiv ist.
editor.workflow_step.id	Typ: integer Beschreibung: Die numerische ID des Workflow-Schritts.
editor.workflow_step.title	Typ: string Beschreibung: Der Anzeigename des Workflow-Schritts.
editor.workflow_step.type	Typ: string Beschreibung: Der Typ des Workflow-Schritts (z. B. „Übersetzen“, „Korrekturlesen“).

AP.getPageState(callback)

Ruft ein PageStateObject mit einer Momentaufnahme des aktuellen Editor-Zustands ab: alles, was AP.getContext() zurückgibt, sowie der aktuelle String, die Stringliste, Übersetzungen, Filter und die Dateiauswahl. Verwende es, wenn deine App mehrere Zustände gleichzeitig benötigt, anstatt separate AP.editor.get*-Aufrufe aneinanderzureihen.

Hinweis

Diese Methode ist nur im Editor verfügbar. Der Callback wird ausgeführt, sobald das Laden der Stringliste abgeschlossen ist.

Beispiel:

AP.getPageState(function(pageState) {
  if (pageState) {
    console.log("Current string:", pageState.currentString);
    console.log("Current page:", pageState.page);
  }
});

Parameter

callback

Typ: Funktion Erforderlich: ja Beschreibung: Eine Callback-Funktion, die die Antwort verarbeitet. Sie erhält ein Argument: das PageStateObject oder null.

Beispiel für den Response-Payload

Die folgenden Objekte und Arrays sind verkürzt dargestellt. Die vollständige Struktur findest du in den in der Tabelle verlinkten Methoden.

{
  // Every field returned by AP.getContext(), plus the fields below
  "currentString": {
    "id": 1568759,
    "text": "Welcome!",
    "context": "Main screen"
  },
  "stringsList": [
    {
      "id": 1568759,
      "text": "Welcome!"
    }
  ],
  "selectedStrings": null,
  "translations": [],
  "topTranslation": null,
  "filter": 3,
  "customFilter": {
    "translations": "untranslated",
    "croql_expression": ""
  },
  "croqlFilter": "",
  "filtersList": [
    {
      "name": "Show All",
      "value": 3
    }
  ],
  "page": 1,
  "workflowStepStatusFilter": null,
  "selectedFiles": [],
  "isMultipleFilesSelected": false,
  "unsavedSourceStrings": null
}

Struktur des Antwortobjekts

Der Snapshot wiederholt jedes Feld der Antwort von AP.getContext und ergänzt die folgenden Felder.

currentString	Typ: object | null Beschreibung: Die derzeit aktive Quellzeichenfolge. Informationen zur Objektstruktur finden Sie unter AP.editor.getString. null bei vermögensbasierten Projekten.
stringsList	Typ: array | null Beschreibung: Die derzeit in der Zeichenfolgenliste angezeigten Zeichenfolgen. Informationen zur Objektstruktur finden Sie unter AP.editor.getStringsList. null bei vermögensbasierten Projekten.
selectedStrings	Typ: object | null Beschreibung: Die derzeit in der Editor-Liste ausgewählten Zeichenfolgen. Informationen zur Objektstruktur finden Sie unter AP.editor.getSelectedStrings. null, wenn keine Zeichenfolgen ausgewählt sind, sowie im Übersetzungsmodus, in dem keine Mehrfachauswahl möglich ist.
translations	Type: array | null Description: The translations and suggestions for the current string. Informationen zur Objektstruktur finden Sie unter AP.editor.getTranslations. null bei vermögensbasierten Projekten.
topTranslation	Typ: object | null Beschreibung: Die oberste Übersetzung des aktuellen Strings. Siehe AP.editor.getTopTranslation für die Struktur des Objekts. null bei Asset-basierten Projekten und wenn für den String noch keine Übersetzungen vorhanden sind.
filter	Typ: integer Beschreibung: Die numerische ID des aktiven Basisfilters. Siehe AP.editor.getFilter.
customFilter	Typ: object Beschreibung: Der aktuelle Zustand des erweiterten Filters. Siehe AP.editor.getCustomFilter für die Struktur des Objekts.
croqlFilter	Typ: Zeichenkette Beschreibung: Die aktive CroQL-Filterabfrage oder eine leere Zeichenkette, wenn kein Filter festgelegt ist. Siehe AP.editor.getCroqlFilter.
filtersList	Typ: Array Beschreibung: Die verfügbaren Standardfilter mit ihren Namen und numerischen IDs. Siehe AP.editor.getFiltersList für die Objektstruktur.
page	Typ: Ganzzahl Beschreibung: Die aktuelle Seitenzahl der Zeichenfolgenliste. Siehe AP.editor.getPage.
workflowStepStatusFilter	Typ: Zeichenkette | null Beschreibung: Nur Crowdin Enterprise. Der aktive Filter für den Status des Workflow-Schritts am aktuellen Workflow-Schritt oder ALL, wenn kein Status ausgewählt ist. Die zulässigen Werte finden Sie unter AP.editor.getWorkflowStepStatusFilter.
selectedFiles	Typ: Array | null Beschreibung: Die in der Dateistruktur ausgewählten Dateien. Die Objektstruktur finden Sie unter AP.editor.getSelectedFiles. null, wenn der Editor keine Dateistruktur anzeigt.
isMultipleFilesSelected	Typ: boolean Beschreibung: Gibt an, ob mehr als eine Datei im Dateibaum ausgewählt ist. Siehe AP.editor.isMultipleFilesSelected.
unsavedSourceStrings	Typ: object | null Beschreibung: Die Quellstrings mit ungespeicherten Änderungen. Siehe AP.editor.getUnsavedSourceStrings für die Struktur des Objekts. null außerhalb des Modus multilingual.

AP.getTheme(callback)

Ruft den Namen des aktuell aktiven Benutzeroberflächen-Designs (UI-Theme) ab.

Beispiel:

AP.getTheme(function(themeName) {
  console.log("Current theme:", themeName);
  // e.g., 'light', 'dark', or 'auto'
});

Parameter

callback

Typ: function Erforderlich: ja Beschreibung: Eine Callback-Funktion, die die Antwort verarbeitet. Sie nimmt ein Argument entgegen: eine Zeichenkette (den Namen des Themes).

Beispiel für den Response-Payload

Diese Methode gibt einen einfachen string zurück.

"light"

Struktur des Antwortobjekts

Typ: Zeichenkette

Zulässige Werte: hell, dunkel, auto

AP.getCssVariables(callback)

Ruft ein Objekt mit allen aktiven Crowdin-CSS-Variablen ab. Damit kann deine App ihre Elemente so gestalten, dass sie zum UI-Theme des Benutzers passen und sich nahtlos einfügen.

Beispiel:

AP.getCssVariables(function(variables) {
  if (variables) {
    // Set our app's text color to match Crowdin's
    document.body.style.color = variables['--crowdin-body-color'];
  }
});

Parameter

callback

Typ: function Erforderlich: ja Beschreibung: Eine Callback-Funktion, die die Antwort verarbeitet. Sie erhält ein Argument: ein object.

Beispiel für den Response-Payload

{
  "--crowdin-level-1-bg": "#f5f7f8",
  "--crowdin-level-2-bg": "#ffffff",
  "--crowdin-body-bg": "#f5f7f8",
  "--crowdin-title-color": "rgba(38, 50, 56, 1)",
  "--crowdin-body-color": "rgba(38, 50, 56, 0.87)",
  "--crowdin-text-muted": "rgba(38, 50, 56, 0.54)",
  "--crowdin-primary": "rgba(67, 160, 71, 1)",
  "..." : "..."
}

Struktur des Antwortobjekts

Gibt ein Objekt zurück, bei dem jeder Schlüssel den Namen einer CSS-Variablen (z. B. "--crowdin-primary") und der Wert ihren aktuell berechneten Wert (z. B. "rgba(67, 160, 71, 1)") enthält.

AP.getJwtToken(callback)

Ruft den Authentifizierungs-JWT-Token des aktuellen Benutzers ab. Mit diesem Token können im Namen des Benutzers Anfragen an die Crowdin API v2 gestellt werden.

Beispiel:

AP.getJwtToken(function(token) {
  if (token) {
    console.log("My JWT:", token);
  } else {
    console.log("Token is not available in this context.");
  }
});

Parameter

callback

Typ: Funktion Erforderlich: ja Beschreibung: Eine Callback-Funktion, die die Antwort verarbeitet. Sie nimmt ein Argument entgegen: eine Zeichenkette (das JWT-Token) oder null.

Beispiel für den Response-Payload

Diese Methode gibt einen einfachen string zurück, der den JWT-Token enthält, oder null.

"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkw...SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c"

API-Anfragen stellen

Du kannst aus deiner App im Namen des aktuellen Benutzers die Crowdin REST API aufrufen, entweder direkt oder über den offiziellen API-Client.

AP.apiRequest(payload, callback)

Deine App kann die Crowdin REST API direkt aus dem iframe aufrufen. Crowdin führt jede Anfrage im Namen des aktuellen Benutzers aus und beschränkt sie auf die im App-Manifest angegebenen Scopes, sodass in deinem Code keine Tokens benötigt werden.

Beispiel:

AP.apiRequest(
  { method: "get", path: "projects?limit=25", headers: {} },
  (res) => {
    if (res.status >= 200 && res.status < 300) {
      console.log(res.body.data);
    }
  },
);

Parameter

payload	Typ: object Erforderlich: ja Beschreibung: Die Definition der Anfrage. Siehe die folgenden Payload-Felder.
callback	Typ: function Erforderlich: ja Beschreibung: Eine Funktion, die den Antwort-Payload mit den Eigenschaften status, statusText und body erhält.

Payload-Felder

method	Typ: Zeichenkette Erforderlich: ja Beschreibung: HTTP-Methode: get, post, put, patch, delete oder head.
path	Typ: Zeichenkette Erforderlich: ja Beschreibung: Pfad relativ zu /api/v2, einschließlich der Abfragezeichenfolge. Zum Beispiel projects?limit=25.
headers	Typ: object Erforderlich: ja Beschreibung: Zusätzliche Anfrage-Header. Übergib ein leeres Objekt, wenn keine benötigt werden.
body	Typ: Objekt | Zeichenfolge | ArrayBuffer Erforderlich: nein Beschreibung: Request-Body: ein JSON-serialisierbarer Wert, eine Zeichenfolge oder ein ArrayBuffer für Binärdaten. FormData wird nicht unterstützt (kein API-v2-Endpunkt erfordert „multipart“). Um eine Datei hochzuladen, lesen Sie diese zunächst in einen ArrayBuffer ein.

Antwort

Der Callback erhält einen Antwort-Payload mit drei Eigenschaften: status, statusText und body. Crowdin gibt diesen Payload für jede abgeschlossene Anfrage zurück, unabhängig davon, ob sie erfolgreich war. Eine Nicht-2xx-Antwort löst daher keinen Fehler aus. Ein status von 0 weist auf einen Netzwerkfehler hin.

Der body ist bei JSON-Antworten ein geparster JSON-Wert, bei Textantworten ein String und bei binären Antworten ein ArrayBuffer. Er fehlt, wenn die Antwort keinen Body enthält.

Datei hochladen

const buffer = await file.arrayBuffer();

AP.apiRequest(
  {
    method: "post",
    path: "storages",
    headers: { "Crowdin-API-FileName": file.name },
    body: buffer,
  },
  (res) => console.log(res.body.data),
);

Offiziellen API-Client verwenden

Statt AP.apiRequest direkt aufzurufen, kannst du den offiziellen @crowdin/crowdin-api-client zusammen mit dem Paket @crowdin/apps-api-adapter verwenden. The adapter implements the client’s HTTP layer on top of AP.apiRequest, so you get the full typed API surface while every request still runs under the current user’s session and manifest scopes.

npm install @crowdin/apps-api-adapter @crowdin/crowdin-api-client

import { AppsApiAdapter } from "@crowdin/apps-api-adapter";
import { Client } from "@crowdin/crowdin-api-client";

const crowdin = new Client(
  { token: "unused" },
  { httpClient: new AppsApiAdapter() },
);

const { data: projects } = await crowdin.projectsGroupsApi.listProjects();

const file = document.querySelector("#file").files[0];
await crowdin.uploadStorageApi.addStorage(file.name, file);

Hinweis

Der token ist für den Konstruktor des Clients erforderlich, wird aber nie verwendet. Der Host authentifiziert jede Anfrage mit der Sitzung des aktuellen Benutzers.

• Binäre Uploads akzeptieren ein Blob, File, ArrayBuffer oder typisiertes Array; der Adapter konvertiert diese automatisch.
• Fehlgeschlagene Anfragen werden mit dem üblichen CrowdinError / CrowdinValidationError des Clients abgewiesen.
• GraphQL ist über die Bridge nicht verfügbar; verfügbar ist nur die REST API (/api/v2).

Viewport und Größenanpassung

Mit dieser Methodengruppe kann deine App Informationen über Größe und Position ihres iframe abrufen und Größenänderungen anfordern.

AP.getViewportSize(callback)

Ruft die aktuell sichtbaren Abmessungen des iframe deiner App ab. Das ist hilfreich, um zu erkennen, wie viel von deiner App beim Scrollen für den Benutzer tatsächlich sichtbar ist.

Beispiel:

AP.getViewportSize(function(viewport) {
  console.log("Visible iframe width:", viewport.width);
  console.log("Visible iframe height:", viewport.height);
});

Parameter

callback

Typ: function Erforderlich: ja Beschreibung: Eine Callback-Funktion, die die Antwort verarbeitet. Sie erhält ein ViewportObject.

Beispiel für den Response-Payload

{
  "width": 800,
  "height": 250
}

Struktur des Antwortobjekts

width	Typ: Ganzzahl Beschreibung: Die sichtbare Breite des iframe in Pixeln.
height	Typ: Ganzzahl Beschreibung: Die sichtbare Höhe des iframes in Pixeln, angepasst an die Crowdin-Hauptkopfzeile und den Bildlauf.

AP.getWindowSize(callback)

Ruft die Abmessungen des gesamten Browserfensters (des top-Fensters) ab, nicht nur die des iframe der App.

Hinweis

Diese Methode ist nur für Crowdin verfügbar.

Beispiel:

AP.getWindowSize(function(windowSize) {
  console.log("Browser window width:", windowSize.width);
  console.log("Browser window height:", windowSize.height);
});

Parameter

callback

Typ: function Erforderlich: ja Beschreibung: Eine Callback-Funktion, die die Antwort verarbeitet. Sie erhält ein WindowSizeObject.

Beispiel für den Response-Payload

{
  "width": 1440,
  "height": 900
}

Struktur des Antwortobjekts

width	Typ: Ganzzahl Beschreibung: Die Gesamtbreite des Browserfensters in Pixeln.
height	Typ: Ganzzahl Beschreibung: Die Gesamthöhe des Browserfensters in Pixeln.

AP.getScrollPosition(callback)

Ruft die vertikale Scrollposition des iframe deiner App relativ zum oberen Rand des Viewports des Hauptfensters ab.

Gibt 0 zurück, wenn der obere Bereich der App sichtbar ist. Wenn der Benutzer die Seite nach unten scrollt, ist der Wert eine positive Zahl, die angibt, wie viele Pixel der App außerhalb des sichtbaren Bereichs liegen.

Beispiel:

AP.getScrollPosition(function(scrollPosition) {
  console.log("App is scrolled by:", scrollPosition, "pixels");
  // Example output: 150
});

Parameter

callback

Typ: function Erforderlich: ja Beschreibung: Eine Callback-Funktion, die die Antwort verarbeitet. Sie erhält ein integer-Argument.

Beispiel für den Response-Payload

Diese Methode gibt einen einfachen integer zurück, der die Anzahl der Pixel darstellt.

150

AP.resize(width, height)

Aktualisiert die Abmessungen des iframe deiner App. Dies ist die wichtigste Methode zur Steuerung der Größe deiner App-Ansicht.

Hinweis

Wenn die angeforderte Größe die maximal zulässige Breite oder Höhe des Host-Panels überschreitet, stellt Crowdin Bildlaufleisten bereit, um den überstehenden Inhalt zugänglich zu machen.

Beispiel:

// Request to resize the iframe to 400px wide and 500px tall
AP.resize('400px', '500px');

// You can also use percentages
AP.resize('100%', '300px');

Parameter

width	Typ: Zeichenkette Erforderlich: Ja Beschreibung: Die gewünschte Breite (z. B. 500px, 80 %).
height	Typ: Zeichenkette Erforderlich: Ja Beschreibung: Die gewünschte Höhe (z. B. 300px, 100vh).

AP.size()

Ruft die aktuellen Abmessungen des iframe der App ab.

Beispiel:

const currentSize = AP.size();
console.log("Current width:", currentSize.w);
console.log("Current height:", currentSize.h);

Beispiel für den Response-Payload

{
  "w": "100%",
  "h": 926
}

Struktur des Antwortobjekts

w	Typ: Zeichenkette | Ganzzahl Beschreibung: Die aktuelle Breite des iframe (z. B. „100 %“ oder 800).
h	Typ: Ganzzahl Beschreibung: Die aktuelle Höhe des iframe in Pixeln.

AP.registerIntersectionObserver(elementId, callback)

Registriert einen Intersection Observer für ein Element innerhalb des iframe deiner App. Damit kannst du erkennen, wann ein Element beim Scrollen des Benutzers sichtbar oder ausgeblendet wird.

Hinweis

Diese Methode funktioniert nur im Editor.

Beispiel:

// Assuming you have an element: <div id="my-element"></div>
AP.registerIntersectionObserver('my-element', function(entry) {
  if (entry.isIntersecting) {
    console.log('Element is now visible!');
  } else {
    console.log('Element is hidden.');
  }
});

Parameter

elementId	Typ: Zeichenkette Erforderlich: Ja Beschreibung: Die ID des DOM-Elements, das Sie beobachten möchten.
callback	Typ: function Erforderlich: ja Beschreibung: Ein Callback, der ausgelöst wird, wenn sich die Sichtbarkeit des Elements ändert. Sie erhält ein IntersectionObserverEntry-Objekt.

Navigation

Mit diesen Methoden kann deine App die Navigation innerhalb von Crowdin steuern, etwa indem der Benutzer auf eine neue Seite weitergeleitet oder die App-Ansicht geschlossen wird.

AP.redirect(path, queryParams)

Leitet das gesamte Browserfenster des Benutzers auf eine andere Seite innerhalb von Crowdin weiter.

Hinweis

Die Pfadstrukturen unterscheiden sich zwischen Crowdin und Crowdin Enterprise.

Beispiel (Crowdin):

// Redirects to the user's account settings
AP.redirect('/settings#account');

// Redirects to a project's Activity tab
AP.redirect('/project/my-project/activity-stream');

// Redirects to the Store with queryParams
AP.redirect('/store/apps', {'a': 123});

Beispiel (Crowdin Enterprise):

// Redirects to the user's account settings
AP.redirect('/u/user_settings');

// Redirects to a project's Activity tab
AP.redirect('/u/projects/15/activity');

// Redirects to the Store with queryParams
AP.redirect('u/marketplace/apps', {'a': 123});

Parameter

path	Typ: Zeichenkette Erforderlich: Ja Beschreibung: Der relative Pfad innerhalb von Crowdin, zu dem weitergeleitet werden soll. Dieser Pfad unterscheidet sich bei Crowdin und Crowdin Enterprise.
queryParams	Typ: object Erforderlich: nein Beschreibung: Ein optionales Objekt mit Schlüssel-Wert-Paaren, die als URL-Suchparameter hinzugefügt werden.

AP.closeAppModal()

Schließt das Modal-Fenster, in dem die App aktuell ausgeführt wird.

Beispiel:

// Close the modal this app is running in
AP.closeAppModal();

AP.closeNavbarExtension()

Schließt die Ansicht der App, wenn sie über die obere Navigationsleiste (die „Navbar“) geöffnet wurde.

Hinweis

Diese Methode ist nur für Crowdin verfügbar.

Beispiel:

// Close the app's panel
AP.closeNavbarExtension();

Formular und Daten

Diese Methoden werden von Apps verwendet, die benutzerdefinierte Formulare darstellen oder schemabasierte Daten benötigen, etwa benutzerdefinierte Workflow-Schritte in Crowdin Enterprise.

AP.getFormData(callback)

Ruft die aktuellen Daten aus dem Formular der App ab. Diese Methode wird typischerweise von Crowdin aufgerufen, wenn ein Benutzer versucht, von einem benutzerdefinierten App-Bildschirm fortzufahren.

Beispiel:

AP.getFormData(function(formData) {
  if (formData) {
    console.log("Current form data:", formData);
  }
});

Parameter

callback

Typ: function Erforderlich: ja Beschreibung: Eine Callback-Funktion, die die Antwort verarbeitet. Sie erhält das Formular-Datenobjekt oder undefined/null.

Beispiel für den Response-Payload

Der Payload hängt vollständig von den Formulardaten der App ab.

{
  "custom_field": "some-value",
  "another_setting": true
}

Struktur des Antwortobjekts

Die Struktur dieses Objekts wird von deiner App definiert.

AP.formDataUpdated(detail)

Benachrichtigt Crowdin darüber, dass sich die Daten im Formular deiner App geändert haben.

Hinweis

Diese Methode ist nur für Crowdin Enterprise verfügbar.

Beispiel:

// Call this inside your app when a form field changes
const myFormData = { custom_field: "new-value" };
AP.formDataUpdated(myFormData);

Parameter

detail

Typ: object Erforderlich: ja Beschreibung: Das Objekt mit dem neuen Zustand deiner Formulardaten.

AP.getRenderData(callback)

Ruft die von Crowdin bereitgestellten Anfangsdaten zum Darstellen der Benutzeroberfläche deiner App ab. Dies wird häufig bei benutzerdefinierten Workflow-Schritten verwendet, die aufgabenspezifische Daten benötigen.

Hinweis

Diese Methode ist nur für Crowdin Enterprise verfügbar.

Beispiel:

AP.getRenderData(function(renderData) {
  if (renderData) {
    console.log("Initial data for rendering:", renderData);
  }
});

Parameter

callback

Typ: function Erforderlich: ja Beschreibung: Eine Callback-Funktion, die die Antwort verarbeitet. Sie erhält das Renderdatenobjekt oder ein leeres Objekt .

Beispiel für den Response-Payload

Der Payload ist dynamisch und hängt vom Kontext der App ab.

{
  "task_id": 123,
  "file_ids": [10, 11, 12]
}

Struktur des Antwortobjekts

Die Struktur dieses Objekts ist dynamisch und wird durch den Kontext definiert, in dem die App gestartet wird.

AP.getSchema(callback)

Ruft das für die App definierte Formularschema ab. Dies wird typischerweise von Apps verwendet, die eine Benutzeroberfläche auf Grundlage eines von Crowdin bereitgestellten Schemas darstellen.

Hinweis

Diese Methode ist nur für Crowdin Enterprise verfügbar.

Beispiel:

AP.getSchema(function(schema) {
  if (schema) {
    console.log("Form schema:", schema);
  }
});

Parameter

callback

Typ: function Erforderlich: ja Beschreibung: Eine Callback-Funktion, die die Antwort verarbeitet. Sie erhält das Schemaobjekt oder undefined/null.

Beispiel für den Response-Payload

Der Payload ist ein Formularschemaobjekt, häufig im JSON-Schema-Format.

{
  "type": "object",
  "properties": {
    "custom_field": {
      "type": "string",
      "title": "Custom Field"
    }
  }
}

Struktur des Antwortobjekts

Die Struktur dieses Objekts ist dynamisch und wird durch die Konfiguration der App definiert.

Editor-Aktionen

Mit diesen Methoden kann deine App Informationen aus der Editor-Benutzeroberfläche abrufen und dort Aktionen ausführen. They are available only when your app is loaded within the Crowdin Editor (e.g., in the side panel) and are all called via the AP.editor object.

Datenabruf (Strings und Dateien)

Mit dieser Methodengruppe kann deine App Informationen über die im Editor aktuell angezeigten Strings und Dateien abrufen und die Dateiauswahl ändern. Um mehrere Teile des Editorstatus mit einem einzigen Aufruf abzurufen, verwende AP.getPageState.

AP.editor.getString(callback)

Ruft ein Datenobjekt für den aktuell aktiven (hervorgehobenen) Quellstring im Editor ab.

Beispiel:

AP.editor.getString(function(stringData) {
  if (stringData) {
    console.log("Active string ID:", stringData.id);
  } else {
    console.log("No string is currently active.");
  }
});

Parameter

callback

Typ: function Erforderlich: ja Beschreibung: Eine Callback-Funktion, die die Antwort verarbeitet. Sie erhält ein StringDataObject oder null, wenn kein String aktiv ist.

Beispiel für den Response-Payload

{
  "id": 1568759,
  "identifier": "welcome.key",
  "text": "Welcome!",
  "context": "Main screen welcome message",
  "max_length": 0,
  "file": {
    "id": 15385,
    "name": "google_play.xml"
  }
}

Struktur des Antwortobjekts

id	Typ: Ganzzahl Beschreibung: Die eindeutige numerische ID der Quellzeichenfolge.
identifier	Typ: Zeichenkette Beschreibung: Der Schlüssel oder die Kennung der Zeichenkette (z. B. „app.title“). Kann leer sein.
text	Typ: Zeichenkette Beschreibung: Der vollständige Text der Quellzeichenkette.
Kontext	Typ: Zeichenkette | null Beschreibung: Der mit der Zeichenkette verknüpfte Kontext.
max_length	Typ: Ganzzahl Beschreibung: Die maximal zulässige Länge der Übersetzung (0 bedeutet keine Begrenzung).
file	Typ: object Beschreibung: Ein Objekt mit Informationen über die Datei, zu der dieser String gehört.
file.id	Typ: Ganzzahl Beschreibung: Die eindeutige ID der Datei.
file.name	Typ: string Beschreibung: Der Name der Datei.

AP.editor.getStringsList(callback)

Ruft ein Array von Datenobjekten für alle derzeit in der Stringliste sichtbaren Strings ab (unter Berücksichtigung der aktuellen Datei, des Filters und der Seite).

Beispiel:

AP.editor.getStringsList(function(strings) {
  if (strings && strings.length > 0) {
    console.log("Total strings in list:", strings.length);
    console.log("First string:", strings[0]);
  }
});

Parameter

callback

Typ: function Erforderlich: ja Beschreibung: Eine Callback-Funktion, die die Antwort verarbeitet. Sie erhält ein Array mit StringListObject-Elementen.

Beispiel für den Response-Payload

[
  {
    "id": 1569759,
    "project_id": "844514",
    "text": "Welcome!",
    "key": "welcome",
    "file_id": 15411
  },
  {
    "id": 1569761,
    "project_id": "844514",
    "text": "Save as...",
    "key": "save_as",
    "file_id": 15411
  }
]

Struktur des Antwortobjekts

id	Typ: Ganzzahl Beschreibung: Die eindeutige numerische ID der Quellzeichenfolge.
project_id	Typ: Zeichenkette Beschreibung: Die ID des Projekts, zu dem diese Zeichenkette gehört.
text	Typ: Zeichenkette Beschreibung: Der Text der Quellzeichenkette.
key	Typ: Zeichenkette Beschreibung: Der Schlüssel oder die Kennung der Zeichenkette.
file_id	Typ: Ganzzahl Beschreibung: Die eindeutige ID der Datei, zu der diese Zeichenfolge gehört.

AP.editor.getSelectedStrings(callback)

Ruft Informationen zu den Strings ab, die der Benutzer aktuell in der Editor-Liste ausgewählt (markiert) hat.

Hinweis

Diese Methode ist nur in Editoransichten verfügbar, die die Auswahl mehrerer Strings unterstützen (z. B. Side-by-Side und Multilingual).

Beispiel:

AP.editor.getSelectedStrings(function(selectedData, selectedCount) {
  if (selectedData === 'all') {
    console.log(`All ${selectedCount} strings are selected.`);
  } else {
    console.log(`Selected ${selectedCount} individual strings:`, selectedData);
  }
});

Parameter

callback

Typ: function Erforderlich: ja Beschreibung: Eine Callback-Funktion, die die Antwort verarbeitet. Sie erhält zwei Argumente (in dieser Reihenfolge): selectedData (Array|String): Ein Array mit SelectedStringObject-Elementen ODER der String “all”. selectedCount (Integer): Die Gesamtzahl der ausgewählten Strings.

Beispiel für den Antwort-Payload (bestimmte Strings ausgewählt)

[
  {
    "string": {
      "id": 1569759,
      "identifier": "welcome",
      "text": "Welcome!",
      "context": "welcome",
      "max_length": 0,
      "file": {
        "id": 15411,
        "name": "crowdin_sample_android.xml"
      }
    },
    "translations": {
      "fr": []
    }
  },
  {
    "string": {
      "id": 1569761,
      "identifier": "save_as",
      "text": "Save as...",
      "context": "save_as",
      "max_length": 0,
      "file": {
        "id": 15411,
        "name": "crowdin_sample_android.xml"
      }
    },
    "translations": {
      "fr": [
        {
          "id": 690949,
          "text": "Sauvegarder sous..."
        }
      ]
    }
  }
]

Beispiel für den Antwort-Payload (alle Strings ausgewählt)

Wenn alle Strings im Projekt ausgewählt sind, gibt das erste Argument des Callbacks Folgendes zurück:

"all"

Struktur des Antwortobjekts

Die folgenden Felder gelten für die SelectedStringObject-Elemente, die zurückgegeben werden, wenn selectedData ein Array ist:

Zeichenkette	Typ: object Beschreibung: Das Quellstring-Objekt. Siehe die Struktur von AP.editor.getString.
translations	Typ: object Beschreibung: Ein Objekt mit Übersetzungen für den String, nach Sprach-ID als Schlüssel.
translations.[language_id]	Typ: Array Beschreibung: Ein Array von Übersetzungsobjekten für die angegebene Zielsprache (z. B. „fr“). Siehe AP.editor.getTranslations für die TranslationObject-Struktur.

Achtung

Prüfe immer den Typ von selectedData. Wenn der Benutzer alle Strings auswählt, gibt die Methode anstelle eines Arrays den String “all” zurück.

AP.editor.getSelectedFiles(callback)

Ruft ein Array von Datenobjekten für alle Dateien ab, die aktuell im Dateibaum ausgewählt (markiert) sind.

Beispiel:

AP.editor.getSelectedFiles(function(files) {
  if (files && files.length > 0) {
    console.log("Selected files count:", files.length);
    console.log("First selected file:", files[0].name);
  }
});

Parameter

callback

Typ: function Erforderlich: ja Beschreibung: Eine Callback-Funktion, die die Antwort verarbeitet. Sie erhält ein Array mit FileObject-Elementen.

Beispiel für den Response-Payload

[
  {
    "id": "15411",
    "is_plain_text": true,
    "type": "android10",
    "status": "1",
    "parent_id": "0",
    "node_type": "1",
    "created": "2025-11-07 14:53:28",
    "extension": "xml",
    "priority": "1",
    "name": "crowdin_sample_android.xml",
    "upload_ready": 1,
    "export_ready": 1,
    "export_xliff_ready": 1,
    "can_change": 1,
    "plural_support": 1,
    "excluded_languages": [],
    "html_preview": false,
    "identifier_required": 1,
    "total": 45,
    "translated": 0,
    "approved": 0,
    "preTranslated": 0,
    "translated_percent": 0,
    "approved_percent": 0
  }
]

Struktur des Antwortobjekts

id	Typ: Zeichenkette Beschreibung: Die eindeutige ID der Datei.
name	Typ: string Beschreibung: Der Name der Datei.
type	Typ: Zeichenkette Beschreibung: Die Dateityp-Kennung (z. B. „android10“, „html32“).
node_type	Typ: Zeichenkette Beschreibung: Der Typ des Knotens in der Dateistruktur (z. B. „1“ für eine Datei, „0“ für einen Ordner).
total	Typ: Ganzzahl Beschreibung: Die Gesamtzahl der Zeichenfolgen in der Datei.
translated	Typ: Ganzzahl Beschreibung: Die Anzahl der übersetzten Zeichenfolgen in der Datei (für die aktuelle Sprache).
approved	Typ: Ganzzahl Beschreibung: Die Anzahl der freigegebenen Zeichenfolgen in der Datei (für die aktuelle Sprache).

Hinweis

Dieses Objekt enthält viele weitere Eigenschaften im Zusammenhang mit Dateistatus, Priorität usw., wie im Beispiel zu sehen.

AP.editor.isMultipleFilesSelected(callback)

Prüft, ob aktuell mehr als eine Datei im Dateibaum ausgewählt (markiert) ist.

Beispiel:

AP.editor.isMultipleFilesSelected(function(isMultiple) {
  if (isMultiple) {
    console.log("Multiple files are selected.");
  } else {
    console.log("Only one file (or no files) is selected.");
  }
});

Parameter

callback

Typ: function Erforderlich: ja Beschreibung: Eine Callback-Funktion, die die Antwort verarbeitet. Sie erhält einen boolean (true oder false).

Beispiel für den Response-Payload

Diese Methode gibt einen einfachen boolean zurück.

true

AP.editor.changeFile(fileId)

Ändert die Editoransicht, sodass eine einzelne andere Datei fokussiert wird.

Beispiel:

// Switch the Editor to show strings from file with ID 15409
AP.editor.changeFile('15409');

Parameter

fileId

Typ: Zeichenkette | Ganzzahl Erforderlich: Ja Beschreibung: Die ID der Datei, zu der Sie wechseln möchten.

AP.editor.changeFiles(fileIds)

Wählt mehrere Dateien im Dateibaum aus. Dies entspricht programmgesteuert dem Auswählen mehrerer Dateiauswahl-Kontrollkästchen durch einen Benutzer.

Hinweis

Diese Methode funktioniert nur in Editoransichten, die die Auswahl mehrerer Dateien unterstützen (z. B. Side-by-Side).

Beispiel:

// Select two specific files in the file list
AP.editor.changeFiles(['15409', '15411']);

Parameter

fileIds

Typ: Array Erforderlich: Ja Beschreibung: Ein Array mit Datei-IDs (als Zeichenfolgen oder Ganzzahlen), die ausgewählt werden sollen.

AP.editor.getUnsavedSourceStrings(callback)

Ruft eine Liste von Quellstrings ab, die ungespeicherte Änderungen enthalten.

Hinweis

Diese Methode ist nur in der Multilingual-Editoransicht verfügbar.

Beispiel:

AP.editor.getUnsavedSourceStrings(function(unsavedStrings) {
  if (unsavedStrings) {
    console.log("Unsaved strings:", unsavedStrings);
  }
});

Parameter

callback

Typ: function Erforderlich: ja Beschreibung: Eine Callback-Funktion zur Verarbeitung der Antwort. Sie erhält ein Array von Objekten mit ungespeicherten Strings oder null.

Übersetzung

Mit dieser Methodengruppe kann deine App Übersetzungsvorschläge abrufen sowie Text im Übersetzungsbereich des Editors schreiben oder ändern.

AP.editor.getTranslations(callback)

Ruft ein Array aller Übersetzungen und Vorschläge (von Benutzern, TM und MT) für den aktuell aktiven Quellstring ab.

Beispiel:

AP.editor.getTranslations(function(translations) {
  if (translations && translations.length > 0) {
    console.log("Total translations/suggestions:", translations.length);
    console.log("First translation author:", translations[0].author.login);
  }
});

Parameter

callback

Typ: function Erforderlich: ja Beschreibung: Eine Callback-Funktion, die die Antwort verarbeitet. Sie erhält ein Array mit TranslationObject-Elementen.

Beispiel für den Response-Payload

[
  {
    "id": 690949,
    "string_id": 1569689,
    "text": "Translation text",
    "target_language_id": "fr",
    "votes_rating": 0,
    "approved": false,
    "author": {
      "id": "12729493",
      "login": "example_user",
      "name": "Example User",
      "avatar_url": "https://.../avatar.png"
    },
    "created_at": "2025-11-07T08:19:10-05:00"
  }
]

Struktur des Antwortobjekts

id	Typ: Ganzzahl Beschreibung: Die eindeutige numerische ID der Übersetzung.
string_id	Typ: Ganzzahl Beschreibung: Die ID der Quellzeichenfolge, zu der diese Übersetzung gehört.
text	Typ: Zeichenkette Beschreibung: Der Übersetzungstext.
target_language_id	Typ: Zeichenkette Beschreibung: Die ID der Sprache, für die diese Übersetzung bestimmt ist (z. B. „fr“).
votes_rating	Typ: Ganzzahl Beschreibung: Die aktuelle Punktzahl für diese Übersetzung.
approved	Typ: boolean Beschreibung: true if the translation is approved, otherwise false.
author	Typ: object Beschreibung: Ein Objekt mit Informationen über den Benutzer, der die Übersetzung erstellt hat.
author.id	Typ: Zeichenkette Beschreibung: Die eindeutige ID des Autors.
author.login	Typ: Zeichenkette Beschreibung: Der Anmeldename des Autors.
created_at	Typ: Zeichenkette Beschreibung: Der Zeitstempel nach ISO 8601, der angibt, wann die Übersetzung erstellt wurde.

AP.editor.getTopTranslation(callback)

Ruft ein einzelnes TranslationObject für die „oberste“ Übersetzung des aktuell aktiven Strings ab (z. B. die genehmigte Übersetzung oder die mit den meisten Stimmen).

Beispiel:

AP.editor.getTopTranslation(function(topTranslation) {
  if (topTranslation) {
    console.log("Top translation text:", topTranslation.text);
  } else {
    console.log("No translations exist for this string yet.");
  }
});

Parameter

callback

Typ: function Erforderlich: ja Beschreibung: Eine Callback-Funktion, die die Antwort verarbeitet. Sie erhält ein TranslationObject oder null.

Beispiel für den Response-Payload

{
  "id": 690949,
  "string_id": 1569689,
  "text": "This is the top translation.",
  "target_language_id": "fr",
  "votes_rating": 1,
  "approved": true,
  "author": {
    "id": "12729493",
    "login": "example_user"
  },
  "created_at": "2025-11-07T08:19:10-05:00"
}

Struktur des Antwortobjekts

Diese Methode gibt ein einzelnes TranslationObject zurück. Eine vollständige Liste der Eigenschaften findest du in der Strukturtabelle für AP.editor.getTranslations.

AP.editor.setTranslation(text)

Setzt den Text im Haupt-Übersetzungstextfeld des Editors für den aktiven String oder überschreibt ihn.

Beispiel:

// Set the translation text to "Hello world"
AP.editor.setTranslation("Hello world");

Parameter

text	Typ: Zeichenkette Erforderlich: Ja Beschreibung: Der Text, der in den Übersetzungsbereich eingefügt werden soll.

AP.editor.appendTranslation(text)

Hängt Text an das Ende des vorhandenen Textes im Übersetzungstextfeld des Editors an.

Beispiel:

// If the text area contains "Hello", this will change it to "Hello world"
AP.editor.appendTranslation(" world");

Parameter

text	Typ: Zeichenkette Erforderlich: Ja Beschreibung: Der anzuhängende Text.

AP.editor.clearTranslation()

Löscht den gesamten Text aus dem Übersetzungstextfeld des Editors für den aktiven String.

Beispiel:

AP.editor.clearTranslation();

AP.editor.setFocus()

Setzt den Fokus des Browsers auf das Übersetzungstextfeld des Editors.

Beispiel:

AP.editor.setFocus();

AP.editor.setUnsavedSuggestion(suggestion)

Setzt einen „ungespeicherten Vorschlag“ für einen bestimmten String. Dies wird verwendet, um programmgesteuert eine Übersetzung hinzuzufügen, ohne sie zu speichern, und wird häufig in der Multilingual-Ansicht genutzt.

Beispiel:

AP.editor.setUnsavedSuggestion({
  id: 1569759,                   // The numeric or string ID of the phrase
  text: 'My unsaved suggestion', // The translation text
  languageId: 'fr',              // Target language code
  pluralId: 1,                   // Optional: Specific plural form ID
  translationId: 45678           // Optional: ID if editing an existing translation
});

Parameter

suggestion

Typ: object Erforderlich: ja Beschreibung: Ein Objekt mit den Details des Vorschlags. Siehe unten die Input Object Structure.

Struktur des Eingabeobjekts

id	Typ: Ganzzahl | Zeichenkette Erforderlich: Ja Beschreibung: Die numerische oder als Zeichenkette angegebene ID der Quellzeichenkette (Phrase).
text	Typ: Zeichenkette Erforderlich: Ja Beschreibung: Der Übersetzungstext.
languageId	Type: string Required: Yes Description: The ID of the target language (e.g., “fr”).
pluralId	Typ: Ganzzahl | null Erforderlich: Nein Beschreibung: Die ID der Pluralform (z. B. 1) oder null für Strings ohne Pluralform.
translationId	Typ: Ganzzahl Erforderlich: Nein Beschreibung: Die ID einer vorhandenen Übersetzung, falls Sie diese bearbeiten.

AP.editor.setUnsavedSuggestions(suggestions)

Setzt mehrere „ungespeicherte Vorschläge“ gleichzeitig.

Beispiel:

AP.editor.setUnsavedSuggestions([
  {
    id: 1569759,
    text: 'Suggestion 1',
    languageId: 'fr',
    pluralId: '1'
  },
  {
    id: 1569761,
    text: 'Suggestion 2',
    languageId: 'fr',
    pluralId: null
  }
]);

Parameter

suggestions

Typ: Array Erforderlich: Ja Beschreibung: Ein Array von Vorschlagsobjekten. Siehe Struktur des Eingabeobjekts aus setUnsavedSuggestion.

AP.editor.removeUnsavedSuggestions(suggestions)

Entfernt einen oder mehrere „ungespeicherte Vorschläge“.

Beispiel:

// Remove a specific unsaved suggestion
AP.editor.removeUnsavedSuggestions([
  {
    id: 1569759,
    text: 'Suggestion 1',
    languageId: 'fr',
    pluralId: '1'
  }
]);

Parameter

suggestions

Typ: Array Erforderlich: Ja Beschreibung: Ein Array mit Vorschlagsobjekten, die entfernt werden sollen. Das Format entspricht dem von setUnsavedSuggestions.

AP.editor.applyUnsavedTranslations(method, data)

Wendet alle ungespeicherten Übersetzungen anhand der angegebenen Methode an (und speichert sie).

Beispiel:

// Apply unsaved translations only for the selected strings
AP.editor.applyUnsavedTranslations('selectedStrings', null);

// Apply unsaved translations for a specific list of string IDs
AP.editor.applyUnsavedTranslations('providedStrings', [1569759, 1569761]);

Parameter

method	Typ: Zeichenkette Erforderlich: Ja Beschreibung: Die Methode, die zum Anwenden von Übersetzungen verwendet werden soll. Zulässige Werte: all (alle ungespeicherten Übersetzungen auf der Seite), selectedStrings (nur ausgewählte Strings), providedStrings (für die im Parameter data angegebenen String-IDs).
data	Typ: array | null Erforderlich: ja Beschreibung: Ein Array mit numerischen String-IDs. Dies wird nur verwendet, wenn method auf providedStrings gesetzt ist. Andernfalls übergib null.

Filterverwaltung

Mit dieser Methodengruppe kann deine App die im Editor verwendeten Stringfilter abrufen und steuern, einschließlich grundlegender Filter, des erweiterten Filters und von CroQL-Abfragen.

AP.editor.getFiltersList(callback)

Ruft eine vollständige Liste aller verfügbaren grundlegenden Filter einschließlich ihrer Namen und numerischen IDs ab.

Beispiel:

AP.editor.getFiltersList(function(filters) {
  console.log("Available filters:", filters);
});

Parameter

callback

Typ: function Erforderlich: ja Beschreibung: Eine Callback-Funktion, die die Antwort verarbeitet. Sie erhält ein Array mit FilterObject-Elementen.

Beispiel für den Response-Payload

[
  {
    "name": "Show All",
    "value": 3
  },
  {
    "name": "Untranslated",
    "value": 2
  },
  {
    "name": "Not Approved",
    "value": 5
  },
  {
    "name": "Approved",
    "value": 4
  },
  {
    "name": "Machine Translations"
  },
  {
    "name": "All",
    "value": 10
  },
  {
    "name": "All, Untranslated First",
    "value": 0
  }
]

Struktur des Antwortobjekts

name	Typ: Zeichenkette Beschreibung: Der Anzeigename des Filters (z. B. „Unübersetzt“).
value	Typ: Ganzzahl Beschreibung: Die numerische ID des Filters. Dieser Wert wird von AP.editor.setFilter verwendet. Einige Einträge sind Abschnittsüberschriften und haben keinen Wert.

AP.editor.getFilter(callback)

Ruft die numerische ID des aktuell aktiven grundlegenden Filters ab (z. B. „Untranslated“, „Approved“).

Beispiel:

AP.editor.getFilter(function(filterId) {
  console.log("Current filter ID:", filterId);
  // Example output: 0 (for "All, Untranslated First")
});

Parameter

callback

Typ: function Erforderlich: ja Beschreibung: Eine Callback-Funktion, die die Antwort verarbeitet. Sie erhält ein Argument: einen integer (die Filter-ID).

Beispiel für den Response-Payload

Diese Methode gibt einen einfachen integer zurück.

0

AP.editor.setFilter(filterNumber)

Wendet mithilfe der numerischen ID einen grundlegenden Filter auf die Stringliste an.

Beispiel:

// Filter the list to show only "Untranslated" strings (ID 2)
AP.editor.setFilter(2);

Parameter

filterNumber

Typ: Ganzzahl Erforderlich: Ja Beschreibung: Die numerische ID des anzuwendenden Filters. Siehe AP.editor.getFiltersList für alle verfügbaren IDs.

Häufig verwendete Filter-IDs

Hier sind einige der häufigsten Standard-Filter-IDs:

• 0: Alle, nicht übersetzte zuerst
• 2: Nicht übersetzt
• 3: Alle anzeigen
• 4: Genehmigt
• 5: Übersetzt, nicht genehmigt
• 7: Mit Kommentaren
• 10: Durch TM oder MT übersetzt
• 12: Erweiterter Filter
• 30: Durch TM übersetzt
• 31: Durch MT übersetzt

Achtung

Diese Liste ist möglicherweise nicht vollständig, da benutzerdefinierte QA-Prüffilter oder von anderen Apps hinzugefügte Filter nicht enthalten sind. Verwende AP.editor.getFiltersList, um alle im aktuellen Kontext verfügbaren Filter abzurufen.

AP.editor.getCustomFilter(callback)

Ruft ein Objekt ab, das den aktuellen Zustand des „Erweiterten Filters“ darstellt.

Beispiel:

AP.editor.getCustomFilter(function(customFilter) {
  if (customFilter) {
    console.log("Current advanced filter settings:", customFilter);
    console.log("Filtering by translation status:", customFilter.translations);
  }
});

Parameter

callback

Typ: function Erforderlich: ja Beschreibung: Eine Callback-Funktion, die die Antwort verarbeitet. Sie erhält ein CustomFilterObject oder null.

Beispiel für den Response-Payload

{
  "translations": "untranslated",
  "labels": [123, 456],
  "label_match_rule": "any",
  "comments": "have_comments",
  "croql_expression": "",
  "ai_query": ""
}

Struktur des Antwortobjekts

Das CustomFilterObject enthält alle im Dialog des erweiterten Filters des Editors verfügbaren Felder. Nachfolgend sind einige wichtige Eigenschaften aufgeführt:

translations	Typ: Zeichenkette Zulässige Werte: „translated“, „untranslated“, „“ Beschreibung: Filtert Zeichenketten anhand ihres Übersetzungsstatus.
comments	Typ: Zeichenkette Zulässige Werte: „have_comments“, ‚no_comments‘, „“ Beschreibung: Filtert Zeichenketten danach, ob sie Kommentare enthalten.
labels	Typ: array Beschreibung: Ein Array von Label-IDs, nach denen gefiltert werden soll.
croql_expression	Typ: Zeichenkette Beschreibung: Ein benutzerdefinierter CroQL-Ausdruck für erweiterte Filterung.

AP.editor.setCustomFilter(customFilter)

Wendet einen „Erweiterten Filter“ auf die Stringliste an, indem ein Filterobjekt übergeben wird.

Beispiel:

// Filter for untranslated strings with specific labels
AP.editor.setCustomFilter({
  translations: 'untranslated',
  labels: [123, 456],
  label_match_rule: 'any'
});

Parameter

customFilter

Typ: object Erforderlich: ja Beschreibung: Ein CustomFilterObject mit den Filterkriterien. Siehe AP.editor.getCustomFilter für die vollständige Liste der verfügbaren Eigenschaften.

Vollständige Payload-Referenz

Klicken, um alle verfügbaren Filtereigenschaften anzuzeigen

{
  added_from: '',
  added_to: '',
  updated_from: '',
  updated_to: '',
  translations: '', // 'translated', 'untranslated'
  duplicates: '',
  tm_and_mt: '',
  pre_translation: '',
  approvals: '',
  comments: '', // 'have_comments', 'no_comments'
  screenshots: '',
  visibility: '',
  qa_issues: '',
  labels: [],
  label_match_rule: 'any', // 'all', 'any'
  exclude_labels: [],
  exclude_label_match_rule: 'all',
  string_type: '',
  votes: '',
  votes_count: null,
  approvals_count_select: '',
  approvals_count: null,
  translated_by_user: '',
  not_translated_by_user: '',
  approved_by_user: '',
  not_approved_by_user: '',
  sort_method: 0,
  sort_ascending: 1,
  croql_expression: '',
  ai_query: ''
}

AP.editor.resetCustomFilter()

Setzt den „Erweiterten Filter“ auf seinen Standardzustand (leer) zurück.

Beispiel:

AP.editor.resetCustomFilter();

AP.editor.getCroqlFilter(callback)

Ruft die aktuell aktive CroQL-Filterabfrage als String ab.

Beispiel:

AP.editor.getCroqlFilter(function(croqlQuery) {
  if (croqlQuery) {
    console.log("Current CroQL query:", croqlQuery);
  }
});

Parameter

callback

Typ: function Erforderlich: ja Beschreibung: Eine Callback-Funktion, die die Antwort verarbeitet. Es nimmt einen Zeichenfolgenwert (die CroQL-Abfrage) oder null entgegen.

Beispiel für den Response-Payload

Diese Methode gibt einen einfachen string zurück.

"text = "Welcome!""

AP.editor.setCroqlFilter(croql)

Wendet einen CroQL-Filter auf die Stringliste an.

Beispiel:

// Filter strings where the text is "Welcome!"
AP.editor.setCroqlFilter("text = 'Welcome!'");

Parameter

croql

Typ: Zeichenkette Erforderlich: Ja Beschreibung: Eine gültige CroQL-Abfragezeichenkette.

AP.editor.resetCroqlFilter()

Setzt den CroQL-Filter auf seinen Standardzustand (leer) zurück.

Beispiel:

AP.editor.resetCroqlFilter();

Editorstatusverwaltung

Mit dieser Methodengruppe kann deine App den Status des Editors abrufen und steuern, z. B. den aktuellen Ansichtsmodus, die Seite, die ausgewählte Sprache oder die Suchabfrage.

AP.editor.getMode(callback)

Ruft den Namen des aktuell aktiven Editor-Modus ab.

Beispiel:

AP.editor.getMode(function(modeName) {
  console.log("Current mode:", modeName);
  // Example output: "translate"
});

Parameter

callback

Typ: function Erforderlich: ja Beschreibung: Eine Callback-Funktion, die die Antwort verarbeitet. Sie nimmt ein Argument entgegen: eine Zeichenkette (den Modusnamen).

Beispiel für den Response-Payload

Diese Methode gibt einen einfachen string zurück.

"translate"

Struktur des Antwortobjekts

Typ: Zeichenkette

Zulässige Werte: übersetzen, korrigieren, überprüfen, mehrsprachig

AP.editor.setMode(modeName)

Wechselt den Editor in einen anderen Modus.

Beispiel:

// Switch the Editor to Proofreading mode
AP.editor.setMode('proofread');

Parameter

modeName

Typ: Zeichenkette Erforderlich: Ja Beschreibung: Der Name des Modus, zu dem gewechselt werden soll. Zulässige Werte: translate, proofread, review, multilingual.

AP.editor.getPage(callback)

Ruft die aktuelle Seitennummer der Stringliste ab.

Beispiel:

AP.editor.getPage(function(pageNumber) {
  console.log("Current page:", pageNumber);
  // Example output: 1
});

Parameter

callback

Typ: function Erforderlich: ja Beschreibung: Eine Callback-Funktion, die die Antwort verarbeitet. Sie erhält ein Argument: einen integer (die Seitennummer).

Beispiel für den Response-Payload

Diese Methode gibt einen einfachen integer zurück.

1

AP.editor.setPage(pageNumber)

Wechselt die Stringliste auf eine bestimmte Seite.

Beispiel:

// Go to the second page of strings
AP.editor.setPage(2);

Parameter

pageNumber

Typ: Ganzzahl Erforderlich: Ja Beschreibung: Die Seitenzahl, zu der navigiert werden soll.

AP.editor.getProjectTargetLanguages(callback)

Ruft eine Liste der Zielsprache des Projekts ab, die dem aktuellen Benutzer im Editor zur Verfügung stehen.

Beispiel:

AP.editor.getProjectTargetLanguages(function(languages) {
  if (languages && languages.length > 0) {
    console.log("Available languages:", languages);
  }
});

Parameter

callback

Typ: function Erforderlich: ja Beschreibung: Eine Callback-Funktion, die die Antwort verarbeitet. Sie erhält ein Array mit LanguageObject-Elementen.

Beispiel für den Response-Payload

[
  {
    "id": "2",
    "name": "French",
    "internal_code": "fr",
    "code": "fr",
    "preferred": false
  },
  {
    "id": "3",
    "name": "German",
    "internal_code": "de",
    "code": "de",
    "preferred": true
  }
]

Struktur des Antwortobjekts

id	Typ: Zeichenkette Beschreibung: Die eindeutige ID der Sprache (z. B. „2“).
name	Typ: Zeichenkette Beschreibung: Der Anzeigename der Sprache (z. B. „Französisch“).
code	Typ: Zeichenkette Beschreibung: Der Sprachcode (z. B. „fr“).

AP.editor.setTargetLanguage(languageIds, [callback])

Wechselt den Editor in Side-by-Side- und Comfortable-Modi in eine andere Zielsprache oder legt im Multilingual-Modus die aktiven Sprachen fest.

Hinweis

Diese Methode benötigt die Sprach-id (z. B. “11”), nicht den Sprachcode (z. B. “de”). Die Liste der verfügbaren IDs erhältst du mit getProjectTargetLanguages.

Beispiel (Side-by-Side- und Comfortable-Modi):

// Switch the Editor to German (ID "11")
AP.editor.setTargetLanguage('11');

Beispiel (Multilingual-Modus):

// Set the active languages to German (ID "11") and French (ID "2")
AP.editor.setTargetLanguage(['11', '2']);

Parameter

languageIds	Typ: Zeichenkette | Array Erforderlich: Ja Beschreibung: Die Zeichenfolgen-ID (z. B. „11“) zum Festlegen einer einzelnen Sprache oder ein Array von Zeichenfolgen-IDs (z. B. [„11“, „2“]) zum Festlegen mehrerer Sprachen im mehrsprachigen Modus.
callback	Typ: function Erforderlich: nein Beschreibung: Ein optionaler Callback, der eine Fehlermeldung zurückgibt, wenn eine der angeforderten language IDs were not found.

AP.editor.search(text, [options])

Führt im Editor eine Suche nach dem angegebenen Text durch.

Beispiel:

// Perform a simple search for the word "Welcome"
AP.editor.search("Welcome");

// Perform a case-sensitive search
AP.editor.search("Welcome", { caseSensitive: true, search_option: 1 });

Parameter

text	Typ: Zeichenkette Erforderlich: Ja Beschreibung: Der zu suchende Text.
options	Typ: object Erforderlich: nein Beschreibung: Ein Objekt mit Suchoptionen. Siehe unten die Input Object Structure.

Struktur des Eingabeobjekts

searchStrict	Typ: boolean Beschreibung: Wenn true, wird eine strikte Suche durchgeführt. Der Standardwert ist false.
searchFullMatch	Typ: boolean Beschreibung: Wenn true, wird nach einer vollständigen Übereinstimmung gesucht. Der Standardwert ist false.
caseSensitive	Typ: boolean Beschreibung: Wenn true, wird bei der Suche zwischen Groß- und Kleinschreibung unterschieden. Der Standardwert ist false.
search_option	Typ: Ganzzahl Beschreibung: Legt den Suchbereich fest. 0: Alles, 1: Zeichenfolgen, 2: Kontext, 3: Übersetzungen, 4: Bezeichner (Schlüssel).

Benachrichtigungen

Mit dieser Methodengruppe kann deine App dem Benutzer Feedbackmeldungen (z. B. Hinweise, Erfolgsmeldungen oder Fehler) anzeigen und Benachrichtigungs-Badges auf dem App-Symbol verwalten.

AP.editor.noticeMessage(message)

Zeigt oben im Editor eine gelbe „notice“-Meldungsleiste an.

Beispiel:

AP.editor.noticeMessage("This is a test notification.");

Parameter

message

Typ: Zeichenkette Erforderlich: Ja Beschreibung: Der Text, der in der Meldungsleiste angezeigt werden soll.

AP.editor.successMessage(message)

Zeigt oben im Editor eine grüne „success“-Meldungsleiste an.

Beispiel:

AP.editor.successMessage("The operation was successful!");

Parameter

message

Typ: Zeichenkette Erforderlich: Ja Beschreibung: Der Text, der in der Meldungsleiste angezeigt werden soll.

AP.editor.errorMessage(message)

Zeigt oben im Editor eine rote „error“-Meldungsleiste an.

Beispiel:

AP.editor.errorMessage("An error occurred. Please try again.");

Parameter

message

Typ: Zeichenkette Erforderlich: Ja Beschreibung: Der Text, der in der Meldungsleiste angezeigt werden soll.

AP.editor.setApplicationNotification(count)

Setzt im Seitenbereich des Editors ein blaues Benachrichtigungs-Badge mit einer Zahl auf dem App-Symbol.

Beispiel:

AP.editor.setApplicationNotification(2);

Parameter

count

Typ: Ganzzahl Erforderlich: Ja Beschreibung: Die Zahl, die im Benachrichtigungssymbol angezeigt werden soll.

AP.editor.clearApplicationNotification()

Entfernt das Benachrichtigungs-Badge vom App-Symbol deiner App.

Beispiel:

AP.editor.clearApplicationNotification();

Workflow-Aktionen (Enterprise)

Mit dieser Methodengruppe kann deine App Informationen über den Workflow des Projekts abrufen und den Status des Benutzers innerhalb dieses Workflows steuern.

Hinweis

Diese Methoden sind nur für Crowdin Enterprise im Editor verfügbar, wenn ein Projekt-Workflow konfiguriert ist.

AP.editor.getWorkflowSteps(callback)

Ruft eine Liste aller Workflow-Schritte ab, die dem Benutzer im aktuellen Projekt zur Verfügung stehen.

Beispiel:

AP.editor.getWorkflowSteps(function(steps) {
  if (steps && steps.length > 0) {
    console.log("Available workflow steps:", steps);
  }
});

Parameter

callback

Typ: function Erforderlich: ja Beschreibung: Eine Callback-Funktion, die die Antwort verarbeitet. Sie erhält ein Array mit WorkflowStepObject-Elementen oder undefined, wenn kein Workflow konfiguriert ist.

Beispiel für den Response-Payload

[
  {
    "id": 752,
    "title": "Translation",
    "type": "Translate",
    "editor_mode": "translate",
    "approving_available": true,
    "source_language": {
      "id": 52,
      "name": "English",
      "code": "en"
    }
  },
  {
    "id": 753,
    "title": "Proofreading",
    "type": "Proofread",
    "editor_mode": "proofread",
    "approving_available": true,
    "source_language": {
      "id": 52,
      "name": "English",
      "code": "en"
    }
  }
]

Struktur des Antwortobjekts

id	Typ: integer Beschreibung: Die eindeutige numerische ID des Workflow-Schritts.
title	Typ: Zeichenkette Beschreibung: Der Anzeigename des Workflow-Schritts (z. B. „Übersetzung“).
type	Typ: Zeichenkette Beschreibung: Der Typ des Arbeitsschritts (z. B. „Übersetzen“, „Korrekturlesen“).
editor_mode	Typ: Zeichenkette Beschreibung: Der entsprechende Editor-Modus für diesen Schritt.
approving_available	Typ: boolean Beschreibung: true if translations can be approved at this step.
source_language	Typ: object Beschreibung: Ein Objekt mit Angaben zur Quellsprache.

AP.editor.getWorkflowStepStatusFilter(callback)

Ruft den aktuell aktiven Filter für den Workflow-Schrittstatus des aktuellen Workflow-Schritts ab.

Hinweis

In Projekten mit einem Workflow haben Strings drei Status: ToDo, Pending und Done. Diese Methode ruft den aktuellen Filter für diese Statuswerte ab.

Beispiel:

AP.editor.getWorkflowStepStatusFilter(function(status) {
  console.log("Current step status filter:", status);
  // Example output: "ALL"
});

Parameter

callback

Typ: function Erforderlich: ja Beschreibung: Eine Callback-Funktion, die die Antwort verarbeitet. Sie nimmt ein string-Argument entgegen.

Beispiel für den Response-Payload

Diese Methode gibt einen einfachen string zurück.

"ALL"

Struktur des Antwortobjekts

Typ: Zeichenkette

Zulässige Werte: ALL, TODO, PENDING, INCOMPLETE, DONE

PENDING gilt für den Modus review, und INCOMPLETE für die Modi translate, proofread und multilingual. Der Editor zeigt beide als Pending im Menü Workflow step status an.

AP.editor.setWorkflowStep(stepId)

Wechselt den Editor zu einem anderen Workflow-Schritt.

Beispiel:

// Switch the Editor to workflow step with ID 753
AP.editor.setWorkflowStep(753);

Parameter

stepId

Typ: Ganzzahl Erforderlich: Ja Beschreibung: Die ID des Workflow-Schritts, zu dem gewechselt werden soll. Siehe AP.editor.getWorkflowSteps für die verfügbaren IDs.

AP.editor.setWorkflowStepStatusFilter(status)

Legt den Filter für den Workflow-Schrittstatus des aktuellen Workflow-Schritts fest.

Beispiel:

// Filter to show only strings that are "DONE"
AP.editor.setWorkflowStepStatusFilter('DONE');

Parameter

status

Typ: Zeichenkette Erforderlich: Ja Beschreibung: Der Status, nach dem gefiltert werden soll. Zulässige Werte: ALL, TODO, PENDING, INCOMPLETE, DONE PENDING gilt für den Modus review, und INCOMPLETE für die Modi translate, proofread und multilingual. Der Editor zeigt beide als Pending im Menü Workflow step status an.

Textauswahl-Aktionen

Mit diesen Methoden kann deine App den Text abrufen, den der Benutzer mit dem Cursor im Quellstring- oder Übersetzungstextbereich ausgewählt hat.

AP.editor.source.getSelectedText(callback)

Ruft den Text ab, den der Benutzer aktuell mit dem Cursor im Quellstringbereich ausgewählt hat.

Beispiel:

AP.editor.source.getSelectedText(function(selectedText) {
  if (selectedText) {
    console.log("User selected this source text:", selectedText);
  }
});

Parameter

callback

Typ: function Erforderlich: ja Beschreibung: Eine Callback-Funktion, die die Antwort verarbeitet. Sie nimmt ein Argument entgegen: eine Zeichenkette (den ausgewählten Text) oder null.

Beispiel für den Response-Payload

Diese Methode gibt einen einfachen string mit dem ausgewählten Text zurück oder null, wenn kein Text ausgewählt ist.

"Selected source text"

AP.editor.textarea.getSelectedText(callback)

Ruft den Text ab, den der Benutzer aktuell mit dem Cursor im Übersetzungstextbereich ausgewählt hat.

Beispiel:

AP.editor.textarea.getSelectedText(function(selectedText) {
  if (selectedText) {
    console.log("User selected this translation text:", selectedText);
  }
});

Parameter

callback

Typ: function Erforderlich: ja Beschreibung: Eine Callback-Funktion, die die Antwort verarbeitet. Sie nimmt ein Argument entgegen: eine Zeichenkette (den ausgewählten Text) oder null.

Beispiel für den Response-Payload

Diese Methode gibt einen einfachen string mit dem ausgewählten Text zurück oder null, wenn kein Text ausgewählt ist.

"My selected translation"

Editor-Anpassung

Diese Methodengruppe bietet erweiterte Integrationspunkte zur Anpassung des nativen Editor-Verhaltens, z. B. zum Hinzufügen benutzerdefinierter Kontextmenüs, Verwalten von Tastenkürzeln und Anwenden benutzerdefinierter Stile.

AP.editor.registerContextMenuAction(action, callback)

Registriert einen benutzerdefinierten Eintrag im Kontextmenü des Editors (dem Menü, das per Rechtsklick angezeigt wird).

Du musst das action-Objekt definieren; der callback gibt dasselbe Objekt zurück, ergänzt um eine eventSubscriptionId. You then use AP.events.on to listen for clicks on that ID.

Beispiel:

// 1. Define and register the context menu item
AP.editor.registerContextMenuAction({
  type: 'textarea-context-menu',
  name: 'My Custom Action'
}, function(action) {

  // 2. Listen for clicks on this specific item
  AP.events.on(action.eventSubscriptionId, function() {
    console.log(`'${action.name}' was clicked!`);
    AP.editor.noticeMessage("Custom action triggered!");
  });
});

Parameter

action	Typ: object Erforderlich: ja Beschreibung: Das Konfigurationsobjekt für die Aktion. Siehe unten die Input Object Structure.
callback	Typ: function Erforderlich: ja Beschreibung: Ein Callback, der das Aktionsobjekt zurückerhält, das nun eine eventSubscriptionId for event handling.

Struktur des Eingabeobjekts

type	Typ: Zeichenkette Erforderlich: Ja Beschreibung: Der Typ des Kontextmenüs, in dem die Aktion angezeigt wird. Mögliche Werte: textarea-context-menu: Das Kontextmenü für den Übersetzungseingabebereich. source-string-context-menu: Das Kontextmenü für einen Quellstring. source-string-selected-text-context-menu: Das Kontextmenü für ausgewählten Text innerhalb eines Quellstrings.
name	Typ: Zeichenkette Erforderlich: Ja Beschreibung: Die Textbezeichnung, die im Kontextmenü angezeigt wird.
children	Typ: array Erforderlich: nein Beschreibung: Ein optionales Array untergeordneter ActionObject-Elemente zum Erstellen eines verschachtelten Untermenüs.

Beispiel für den Antwort-Payload (im Callback)

Der Callback gibt das action-Objekt zusammen mit einer ergänzten eventSubscriptionId zurück.

{
  "type": "textarea-context-menu",
  "name": "My Test Action",
  "eventSubscriptionId": "context.menu.click:GGChNhE"
}

Struktur des Antwortobjekts

eventSubscriptionId	Typ: Zeichenkette Beschreibung: Die eindeutige ID für diesen Menüpunkt. Verwende diese ID zusammen mit AP.events.on, um auf Klickereignisse zu reagieren.
…plus alle Eigenschaften aus der von dir angegebenen Input Object Structure.

Hinweis

To register multiple, separate context menu items, call AP.editor.registerContextMenuAction for each item individually.

Weitere Beispiele

Einfache Aktion für das Kontextmenü des Quellstrings

AP.editor.registerContextMenuAction({
  type: 'source-string-context-menu',
  name: 'Run custom action'
}, function(action) {
  AP.events.on(action.eventSubscriptionId, () => {
    // Run custom logic when clicked
    console.log('Custom action triggered.');
  });
});

Aktion mit einem Untermenü

AP.editor.registerContextMenuAction({
  type: 'source-string-context-menu',
  name: 'My Actions',
  children: [
    {
      name: 'Explain selection'
    },
    {
      name: 'Check grammar'
    }
  ]
}, function(action) {
  // Handle the child menu items
  if (action.children) {
    action.children.forEach((childAction) => {
      AP.events.on(childAction.eventSubscriptionId, () => {
        // Add the logic that should happen on click
        console.log(`'${childAction.name}' was clicked.`);
      });
    });
  }
});

Aktion für ausgewählten Text im Übersetzungsbereich

AP.editor.registerContextMenuAction({
  type: 'textarea-context-menu',
  name: 'Log selected text'
}, function(action) {
  AP.events.on(action.eventSubscriptionId, () => {
    // Get the selected text and process it
    AP.editor.textarea.getSelectedText(function(text) {
      if (text) {
        console.log('Selected text:', text);
      }
    });
  });
});

AP.editor.getHotKeys(callback)

Ruft einen String ab, der alle derzeit im Editor aktiven Tastenkürzel enthält.

Beispiel:

AP.editor.getHotKeys(function(hotkeys) {
  console.log("Active hotkeys:", hotkeys);
});

Parameter

callback

Typ: function Erforderlich: ja Beschreibung: Eine Callback-Funktion, die die Antwort verarbeitet. Sie nimmt ein Argument entgegen: eine Zeichenkette.

Beispiel für den Response-Payload

Diese Methode gibt einen einfachen string zurück, in dem die Tastenkürzel durch Kommas getrennt sind.

"Command+Enter,Command+[,Command+],Control+Shift+C,..."

AP.editor.propagateHotKeyPress(hotKeyPressed)

Überträgt einen Tastendruck manuell vom iframe deiner App an den Haupteditor. Das ist nützlich, wenn deine App ein Tastenereignis (z. B. „Enter“) abfängt, auf das der Editor ebenfalls reagieren soll.

Beispiel:

// Tell the Editor that the "Command+Enter" hotkey was pressed
AP.editor.propagateHotKeyPress('Command+Enter');

Parameter

hotKeyPressed

Typ: Zeichenkette Erforderlich: Ja Beschreibung: Die Zeichenkette des gedrückten Tastenkombination (z. B. Befehlstaste+Eingabetaste).

AP.editor.applyCustomThemeStyle(theme, callback)

Wendet eine benutzerdefinierte Theme-Konfiguration auf die Benutzeroberfläche des Editors an. Damit lassen sich Farben, Hintergründe und Hervorhebungen von Elementen umfassend anpassen.

Beispiel:

AP.editor.applyCustomThemeStyle({
  themeMode: 'dark',                    // Context mode ('light' or 'dark')
  primaryAccent: '#35a1ff',
  base: {
    baseBackground: '#16191d',
    stringStatus: {
      translated: '#74bb02',
      approved: '#35a1ff'
    },
    highlights: {
      placeholderColor: '#35a1ff',
      placeholderBg: 'rgba(53, 161, 255, 0.1)',
      tagColor: '#74bb02',
      tagBg: 'rgba(116, 187, 2, 0.1)',
      nonePrintableCharacterColor: '#3eb17f',
      findAndReplaceHighlightBg: '#cc9a06',
      specialLightColor: '#35a1ff',
      specialLightBg: 'rgba(53, 161, 255, 0.05)'
    }
  },
  accents: {
    info: { accentColor: '#35a1ff' },
    danger: { accentColor: '#ff4444' },
    warning: { accentColor: '#cc9a06' },
    success: { accentColor: '#74bb02' }
  }
}, (result) => {
  if (result) {
    console.error('Error applying theme:', result);
  } else {
    console.log('Theme applied successfully');
  }
});

Parameter

theme	Typ: object Erforderlich: ja Beschreibung: Ein ThemeObject mit den Farb- und Stileinstellungen der Benutzeroberfläche. Siehe das obige Beispiel für die erforderliche Struktur.
callback	Typ: function Erforderlich: nein Beschreibung: Eine Callback-Funktion, die die Antwort verarbeitet. Sie erhält bei einem Fehler der Anwendung einen String mit der Fehlermeldung oder bei Erfolg null.

AP.editor.resetCustomThemeStyle()

Removes all custom CSS applied by AP.editor.applyCustomThemeStyle.

Beispiel:

AP.editor.resetCustomThemeStyle();

AP.editor.updateButton(moduleKey, patch, [callback])

Wendet zur Laufzeit einen Patch auf eines der eigenen Editor Buttons-Module der App an. Nicht angegebene Felder behalten ihren aktuellen Wert. Wenn icon, badge oder tooltip auf null gesetzt wird, wird der jeweilige Wert auf den im Manifest festgelegten Zustand zurückgesetzt. Dasselbe gilt, wenn enabled auf true gesetzt wird. Der Zustand bleibt erhalten, bis der Editor neu geladen oder die Module der App aktualisiert werden.

Beispiel:

AP.editor.updateButton(
  'attach-screenshot',
  { icon: '/icons/filled.svg', badge: 3 },
  function(applied) {
    console.log(applied); // true
  }
);

Parameter

moduleKey	Typ: Zeichenkette Erforderlich: Ja Beschreibung: Der Schlüssel des app-eigenen Editor-Button-Moduls.
patch	Typ: object Erforderlich: Ja Beschreibung: Die zu ändernden Felder des Buttons.
patch.icon	Typ: Zeichenkette Beschreibung: Ein Pfad, der mit / beginnt, eine absolute URL auf der eigenen Herkunftsdomain der App oder ein data:image/… URI mit einer Länge von bis zu 32 KB.
patch.badge	Typ: Ganzzahl | Boolescher Wert Beschreibung: Eine Zahl zwischen 1 und 99 zeigt einen Zähler auf der Schaltfläche an, höhere Zahlen werden als 99+ angezeigt, und 0 oder true zeigen einen Punkt an. false entfernt das Abzeichen.
patch.enabled	Typ: boolean Beschreibung: Setze den Wert auf false, um den Button zu deaktivieren, sodass Klicks und sein Tastenkürzel keine Wirkung haben.
patch.tooltip	Typ: Zeichenkette Beschreibung: Der Text, der anstelle des Namens des Moduls angezeigt wird, sowohl im Tooltip der Schaltfläche als auch als Bezeichnung des Eintrags in den Menüs.
callback	Typ: function Erforderlich: Nein Beschreibung: Erhält true, wenn mindestens ein Feld des Patches angewendet wurde.

AP.editor.resetButton(moduleKey, [callback])

Versetzt eines der eigenen Editor Buttons-Module der App in den im Manifest festgelegten Zustand.

Beispiel:

AP.editor.resetButton('attach-screenshot', function(cleared) {
  console.log(cleared); // true
});

Parameter

moduleKey	Typ: Zeichenkette Erforderlich: Ja Beschreibung: Der Schlüssel des app-eigenen Editor-Button-Moduls.
callback	Typ: function Erforderlich: Nein Beschreibung: Erhält true, wenn der Button Laufzeitänderungen hatte, die gelöscht werden sollen.

Editor-Modal-Aktionen

Mit diesen Methoden kann deine App innerhalb des Editors Modal-Fenster öffnen und schließen.

AP.editor.openModal(options, [callback])

Öffnet eines der in deiner App definierten „modal“-Module.

Hinweis

Diese Methode kann nur Modal-Module öffnen, die in der eigenen manifest.json-Datei deiner App definiert sind.

Beispiel:

// Open a modal module
AP.editor.openModal({
  resource: 'my-modal-key',
  size: 'medium'
}, function(success) {
  if (success) {
    console.log("Modal opened successfully.");
  }
});

Parameter

options	Typ: object Erforderlich: ja Beschreibung: Das Konfigurationsobjekt für das Modal. Siehe unten die Input Object Structure.
callback	Typ: function Erforderlich: nein Beschreibung: Eine optionale Callback-Funktion, die bei Erfolg einen boolean (true) on success.

Struktur des Eingabeobjekts

resource	Typ: Zeichenkette Erforderlich: Ja Beschreibung: Der Schlüssel des zu öffnenden Modal-Moduls (definiert in Ihrer manifest.json).
size	Typ: Zeichenkette Erforderlich: Nein Beschreibung: Die Größe des modalen Fensters. Zulässige Werte: small, medium, large, xlarge. Der Standardwert ist medium.
onClose	Typ: function Erforderlich: nein Beschreibung: Eine optionale Callback-Funktion, die beim Schließen des Modals ausgeführt wird.

AP.editor.closeModal()

Closes the currently open modal, but only if it was opened by your app using AP.editor.openModal.

Beispiel:

// Close the modal
AP.editor.closeModal();

Projekt-Aktionen

Mit dieser Methodengruppe kann deine App mit dem Crowdin-Projekt interagieren, z. B. zu verschiedenen Projektseiten navigieren oder den Editor öffnen. They are all called via the AP.project object.

Hinweis

Diese Methoden sind nur für Crowdin verfügbar.

AP.project.redirect(path, hardRedirect)

Leitet den Benutzer auf eine andere Seite innerhalb des aktuellen Projekts weiter.

Beispiel:

// Redirects to the project's Activity tab
AP.project.redirect('/activity-stream');

// Forces a full-page reload to the project's root
AP.project.redirect('/', true);

Parameter

path	Typ: Zeichenkette Erforderlich: Ja Beschreibung: Der relative Pfad innerhalb des Projekts, zu dem umgeleitet werden soll (z. B. /, /translations, /activity-stream).
hardRedirect	Typ: boolean Erforderlich: nein Beschreibung: Wenn auf true gesetzt, erzwingt dies das vollständige Laden der Browserseite. Wenn false (Standardwert) verwendet wird, kommt das interne Routing zum Einsatz.

AP.project.openModal(modalName)

Öffnet einen integrierten Crowdin-Modal-Dialog.

Beispiel:

// Open the "Pre-translation via MT" modal
AP.project.openModal('mt-pre-translation');

Parameter

modalName

Typ: Zeichenkette Erforderlich: Ja Beschreibung: Der Name des zu öffnenden integrierten Modals. Zulässige Werte: mt-pre-translation, ai-pre-translation, marketplace-store

AP.project.openEditor(fileId, [view], [languageCode])

Öffnet den Crowdin Editor für eine bestimmte Datei.

Beispiel:

// Open a specific file in the default view
AP.project.openEditor('15411');

// Open a file in Multilingual mode for a specific language
AP.project.openEditor('15411', 'multilingual', 'de');

Parameter

fileId	Typ: Zeichenkette | Ganzzahl Erforderlich: Ja Beschreibung: Die ID der zu öffnenden Datei.
view	Typ: Zeichenkette Erforderlich: Nein Beschreibung: Der zu öffnende Editor-Modus (z. B. „multilingual“).
languageCode	Typ: Zeichenkette Erforderlich: Nein Beschreibung: Der Sprachcode (z. B. „de“), der geöffnet werden soll. Wenn view multilingual ist, kann dies eine durch Kommas getrennte Liste sein.

AP.project.previewTranslations(action)

Navigiert je nach Projekttyp zum passenden Tab (Translations bei dateibasierten Projekten bzw. Download bei stringbasierten Projekten) und löst einen Vorschau-Download im CSV- oder XLSX-Format aus.

Beispiel:

// Trigger a preview download in CSV format
AP.project.previewTranslations('csv');

Parameter

action

Typ: Zeichenkette Erforderlich: Ja Beschreibung: Das Format der Vorschau, die heruntergeladen werden soll. Zulässige Werte: csv, xlsx

AP.project.getTabsConfiguration(callback)

Ruft das Konfigurationsobjekt für die Projekt-Tabs ab und gibt an, welche Tabs im Projektkontext derzeit sichtbar bzw. ausgeblendet sind.

Beispiel:

AP.project.getTabsConfiguration(function(config) {
  if (config) {
    console.log("Current tabs configuration:", config);
  }
});

Parameter

callback

Typ: function Erforderlich: ja Beschreibung: Eine Callback-Funktion, die die Antwort verarbeitet. Sie erhält ein array mit Tab-Konfigurationsobjekten.

Beispiel für den Response-Payload

Diese Methode gibt ein array mit Objekten zurück.

[
  {
    "identifier": "home",
    "visible": true
  },
  {
    "identifier": "sources",
    "visible": true
  },
  {
    "identifier": "translations",
    "visible": true
  },
  {
    "identifier": "screenshots",
    "visible": true
  },
  {
    "identifier": "tasks",
    "visible": true
  },
  {
    "identifier": "members",
    "visible": true
  },
  {
    "identifier": "integrations",
    "visible": true
  },
  {
    "identifier": "reports",
    "visible": false
  },
  {
    "identifier": "activity-stream",
    "visible": true
  },
  {
    "identifier": "discussions",
    "visible": true
  },
  {
    "identifier": "tools",
    "visible": true
  },
  {
    "identifier": "test_app¦test_app-project-menu",
    "visible": true
  },
  {
    "identifier": "settings",
    "visible": true
  }
]

AP.project.saveTabsConfiguration(params, callback)

Speichert eine neue Konfiguration für die Projekt-Tabs. Damit kannst du bestimmte Tabs im Projektkontext programmgesteuert ein- oder ausblenden.

Beispiel:

const newConfig = [
  {
    "identifier": "home",
    "visible": true
  },
  {
    "identifier": "sources",
    "visible": true
  },
  {
    "identifier": "translations",
    "visible": true
  },
  {
    "identifier": "screenshots",
    "visible": true
  },
  {
    "identifier": "tasks",
    "visible": false
  },
  {
    "identifier": "members",
    "visible": false
  },
  {
    "identifier": "integrations",
    "visible": true
  },
  {
    "identifier": "reports",
    "visible": false
  },
  {
    "identifier": "activity-stream",
    "visible": true
  },
  {
    "identifier": "discussions",
    "visible": true
  },
  {
    "identifier": "tools",
    "visible": true
  },
  {
    "identifier": "test_app¦test_app-project-menu",
    "visible": true
  },
  {
    "identifier": "settings",
    "visible": true
  }
];

AP.project.saveTabsConfiguration({ tabs_configuration: newConfig }, function(success) {
  if (success) {
    console.log("Configuration saved successfully.");
  }
});

Parameter

params	Typ: object Erforderlich: ja Beschreibung: Ein Objekt mit der neuen Konfiguration. Siehe unten die Input Object Structure.
callback	Typ: function Erforderlich: nein Beschreibung: Eine optionale Callback-Funktion, die bei Erfolg einen boolean (true) on success.

Struktur des Eingabeobjekts

tabs_configuration

Typ: Array Erforderlich: Ja Beschreibung: Ein Array von Objekten zur Registerkartenkonfiguration. Siehe AP.project.getTabsConfiguration für die Struktur der einzelnen Registerkartenobjekte.

Profil-Aktionen

Mit dieser Methodengruppe kann deine App mit den Profilseiten des Benutzerkontos außerhalb eines Projekts interagieren. They are all called via the AP.profile object.

Hinweis

Diese Methoden sind nur für Crowdin in den Profilbereichen des Benutzers verfügbar (z. B. Profileinstellungen, TM, MT, Meine Aufgaben).

AP.profile.redirect(path)

Leitet den Benutzer auf eine andere Seite innerhalb seines „Profils“ weiter.

Beispiel:

// Redirects the user to their "Tasks" page
AP.profile.redirect('/tasks');

Parameter

path	Typ: Zeichenkette Erforderlich: Ja Beschreibung: Der relative Pfad innerhalb des Benutzerprofils, zu dem die Weiterleitung erfolgen soll (z. B. /tasks, /managers, /glossaries).

Modal-Aktionen

Diese Methoden dienen zur Steuerung von Modal-Fenstern (z. B. zum Festlegen der Größe eines Modals aus dessen eigenem iframe).

AP.modal.setSize(options)

Aktualisiert die Abmessungen und das Scrollverhalten des Modal-Fensters, in dem deine App derzeit ausgeführt wird.

Hinweis

Diese Methode funktioniert nur, wenn deine App als Modal-Modul gestartet wird. Sie hat keinen Effekt, wenn sie aus anderen Kontexten aufgerufen wird, etwa aus dem Seitenbereich des Editors oder einem Projekt-Tab.

Beispiel:

// Update the modal size and scroll behavior
AP.modal.setSize({
  width: "600px",
  height: "600px",
  hideXScrolls: true,  // Optional, default: true
  hideYScrolls: false  // Optional, default: false
});

Parameter

options

Typ: object Erforderlich: ja Beschreibung: Ein Objekt mit den Größen- und Scroll-Einstellungen. Siehe unten die Input Object Structure.

Struktur des Eingabeobjekts

width	Typ: Zeichenkette Erforderlich: Ja Beschreibung: Die gewünschte Breite (z. B. 600px, 80 %).
height	Typ: Zeichenkette Erforderlich: Ja Beschreibung: Die gewünschte Höhe (z. B. 500px, 90vh).
hideXScrolls	Typ: boolean Erforderlich: nein Beschreibung: Gibt an, ob horizontale Bildlaufleisten ausgeblendet werden sollen. Der Standardwert ist true.
hideYScrolls	Typ: boolean Erforderlich: nein Beschreibung: Gibt an, ob vertikale Bildlaufleisten ausgeblendet werden sollen. Der Standardwert ist false.

Ereignisverarbeitung

Mit diesen Methoden kann deine App auf Ereignisse reagieren, die innerhalb der Crowdin-Benutzeroberfläche auftreten (z. B. wenn ein Benutzer einen String ändert oder eine Übersetzung speichert), und eigene benutzerdefinierte Ereignisse auslösen. They are all called via the AP.events object.

Weitere Informationen findest du unter Unterstützte Ereignisse.

AP.events.on(eventName, callback)

Abonniert einen Listener für ein Ereignis. Dies ist die wichtigste Methode, um sowohl auf Crowdin-UI-Ereignisse (z. B. string.change) als auch auf benutzerdefinierte interne Ereignisse zu reagieren, die von deiner App oder der Bibliothek ausgelöst werden.

Beispiel:

// Listen for the 'string.change' event from Crowdin
AP.events.on('string.change', function(stringData) {
  console.log("User switched to string ID:", stringData.id);
});

Parameter

eventName	Typ: string Erforderlich: Ja Beschreibung: Der Name des Ereignisses, auf das gewartet werden soll (z. B. string.change). Siehe den Abschnitt Unterstützte Ereignisse für eine vollständige Liste.
callback	Typ: function Erforderlich: ja Beschreibung: Die Funktion, die ausgeführt wird, wenn das Ereignis ausgelöst wird. Sie erhält ein für das Ereignis spezifisches Daten-Payload-Objekt.

AP.events.once(eventName, callback)

Abonniert einen Listener für ein Ereignis; der Listener wird jedoch automatisch entfernt, nachdem er einmal ausgeführt wurde.

Beispiel:

// Run this code only the next time a translation is added
AP.events.once('translation.added', function(translation) {
  console.log("A translation was added:", translation.text);
});

Parameter

eventName	Typ: string Erforderlich: Ja Beschreibung: Der Name des Ereignisses, auf das gewartet werden soll.
callback	Typ: function Erforderlich: ja Beschreibung: Die Funktion, die einmal ausgeführt wird, wenn das Ereignis ausgelöst wird.

AP.events.off(eventName, callback)

Removes a specific event listener that was previously registered with AP.events.on or AP.events.once.

Beispiel:

const myListener = function(data) { console.log(data); };

// Start listening
AP.events.on('string.change', myListener);

// Stop listening
AP.events.off('string.change', myListener);

Parameter

eventName	Typ: string Erforderlich: Ja Beschreibung: Der Name des Ereignisses, von dem die Abmeldung erfolgen soll.
callback	Typ: Funktion Erforderlich: Ja Beschreibung: Das genau gleiche Funktionsobjekt, das zur Registrierung des Listeners verwendet wurde.

AP.events.offAll(eventName)

Entfernt alle Event-Listener für ein bestimmtes Ereignis.

Beispiel:

// Stop all listeners for the 'string.change' event
AP.events.offAll('string.change');

Parameter

eventName

Typ: string Erforderlich: Ja Beschreibung: Der Name des Ereignisses, für das alle Listener entfernt werden sollen.

AP.events.onAny(callback)

Abonniert einen Listener, der bei jedem Ereignis ausgelöst wird. Dies ist nützlich zum Debuggen, um alle Ereignisse anzuzeigen, die das System durchlaufen.

Beispiel:

AP.events.onAny(function(eventName, eventData) {
  console.log("Event fired:", eventName, "with data:", eventData);
});

Parameter

callback

Typ: function Erforderlich: ja Beschreibung: Eine Callback-Funktion, die zwei Argumente erhält: eventName (string) and the eventData (object).

AP.events.offAny(callback)

Removes a specific listener that was registered with AP.events.onAny.

Beispiel:

const myDebugListener = function(eventName, eventData) { /* ... */ };
AP.events.onAny(myDebugListener);

// Later, to stop listening
AP.events.offAny(myDebugListener);

Parameter

callback

Typ: Funktion Erforderlich: Ja Beschreibung: Das genau gleiche Funktionsobjekt, das zur Registrierung des Listeners verwendet wurde.

AP.events.emit(eventName, [data])

Löst ein benutzerdefiniertes Ereignis innerhalb deiner App aus. Any listeners registered with AP.events.on will be triggered.

Beispiel:

// Fire a custom event with some data
AP.events.emit('my-custom-event', { status: 'updated' });

Parameter

eventName	Typ: string Erforderlich: Ja Beschreibung: Der Name des auszulösenden benutzerdefinierten Ereignisses.
data	Typ: any Erforderlich: nein Beschreibung: Ein optionaler Daten-Payload, der an die Event-Listener gesendet wird.

Unterstützte Ereignisse

Use these event names with the AP.events.on() method to listen for actions happening in the Crowdin UI.

Hinweis

Die meisten dieser Ereignisse sind spezifisch für den Editor-Kontext. Globale Ereignisse wie theme.changed können in jedem Kontext abgehört werden, in dem deine App ausgeführt wird.

Ereignis	Details & Payload
string.change	Wird ausgelöst, wenn ein Benutzer von einem Quellstring zu einem anderen wechselt. Payload: Ein StringDataObject (oder null, wenn kein String ausgewählt ist). Siehe AP.editor.getString für die Struktur des Objekts. { "id": 1568759, "text": "Welcome!", "context": "Main screen" }
string.selected	Wird ausgelöst, wenn ein Benutzer Strings auswählt oder die Auswahl aufhebt (über Kontrollkästchen in der Side-by-Side-Ansicht). Payload: Ein Array mit SelectedStringObject-Elementen. Siehe AP.editor.getSelectedStrings für die Struktur des Objekts. [ { "string": { "id": 1569759, "text": "Welcome!" }, "translations": { "fr": [] } } ]
editor.button.click	Wird ausgelöst, wenn ein Benutzer auf ein Editor-Schaltflächen Modul des Typs Ereignis klickt. Nur das im Button unter options.module angegebene Modul empfängt das Ereignis. Payload: Ein Objekt mit dem Schlüssel und dem Ort der Schaltfläche. Ein Übersetzungs-Toolbar-Button übermittelt außerdem stringId, languageIds und pluralId (-1, wenn der String keine Pluralformen hat); ein Button im String-Menü übermittelt stringIds und languageIds. { "key": "attach-screenshot", "location": "strings-menu", "stringIds": [1569759, 1569760], "languageIds": [18] }
textarea.edited	Wird ausgelöst, wenn ein Benutzer eine beliebige Änderung im Übersetzungstextfeld vornimmt (tippt, löscht oder einfügt). Payload: Ein Objekt mit den Stringdaten, oldText und newText. { "id": 1569759, "text": "Welcome!", "oldText": "Welcom", "newText": "Welcome" }
translation.added	Wird ausgelöst, wenn ein Benutzer eine neue Übersetzung speichert. Payload: Ein TranslationObject für die neu gespeicherte Übersetzung. Siehe AP.editor.getTranslations für die Struktur des Objekts. { "id": 690950, "string_id": 1569759, "text": "Bienvenue!", "author": { "id": "12729493", "login": "example_user" } }
translation.deleted	Wird ausgelöst, wenn ein Benutzer eine Übersetzung löscht. Payload: Ein Objekt mit der id der gelöschten Übersetzung und ihrer string_id. { "id": 690950, "string_id": 1569759 }
translation.restored	Wird ausgelöst, wenn ein Benutzer eine gelöschte Übersetzung wiederherstellt. Payload: Das wiederhergestellte TranslationObject. Siehe AP.editor.getTranslations für die Struktur des Objekts.
translation.vote	Wird ausgelöst, wenn ein Benutzer für eine Übersetzung abstimmt (nach oben oder unten). Payload: Das aktualisierte TranslationObject mit dem neuen votes_rating.
translation.approve	Wird ausgelöst, wenn ein Benutzer eine Übersetzung genehmigt. Payload: Das aktualisierte TranslationObject mit “approved”: true und den Angaben zum approver. { "id": 690950, "string_id": 1569759, "approved": true, "approver": { "id": "12729494", "login": "proofreader" } }
translation.disapprove	Wird ausgelöst, wenn ein Benutzer eine Genehmigung für eine Übersetzung entfernt. Payload: Das aktualisierte TranslationObject mit “approved”: false.
language.change	Wird ausgelöst, wenn der Benutzer die Zielsprache im Editor ändert. Payload: Das vollständige ContextDataObject. Siehe AP.getContext für die Struktur des Objekts.
file.change	Wird ausgelöst, wenn der Benutzer im Editor zu einer anderen Datei wechselt. Payload: Das vollständige ContextDataObject. Siehe AP.getContext für die Struktur des Objekts.
theme.changed	Wird ausgelöst, wenn der Benutzer das UI-Theme ändert. Nutzdaten: Eine Zeichenkette mit dem Namen des neuen Designs (z. B. „light“, „dark“).
asset.source.preview	Wird ausgelöst, wenn im Editor eine Quell-Asset-Datei ausgewählt wird (bei Asset-basierten Projekten). Payload: Das ContextDataObject. Siehe AP.getContext für die Struktur des Objekts.
asset.suggestion.preview	Wird ausgelöst, wenn im Editor eine Vorschlags-Asset-Datei ausgewählt wird (bei Asset-basierten Projekten). Payload: Ein Objekt mit editor-Kontext- und suggestion-Daten.
pageState.changed	Wird ausgelöst, wenn sich ein beliebiger Teil des Seitenstatus des Editors ändert. Änderungen, die innerhalb von 200 ms erfolgen, werden als ein einzelnes Ereignis gemeldet. Payload: Das vollständige PageStateObject sowie ein changed-Array mit den Feldern, die das Ereignis ausgelöst haben. Informationen zur Objektstruktur finden Sie unter AP.getPageState. Behandle changed als Hinweis darauf, was erneut gelesen werden muss: Der Payload enthält immer den neuesten Status. { "changed": ["currentString", "translations", "topTranslation"], "currentString": { "id": 1568759, "text": "Welcome!" }, "page": 1 }