Startseite / Vorlagenentwicklung / JavaScript-APIs / ContentCreator / Allgemeine Funktionen

JavaScript-API: Allgemeine Funktionalität

Inhaltsverzeichnis

JavaScript-Objekt: top.WE_API.Common
Developer-API-Dokumentation: Common

Das Common-Objekt der JavaScript-API ermöglicht allgemeine Interaktionen mit der Benutzeroberfläche des ContentCreators:

  • Anzeige von Informationen
  • Navigation in der Vorschau
  • Ausführen von Java-Code

Anzeige von Informationen

Message-Boxes

Eine einfache Message-Box

void showMessage(String text) zeigt eine simple Message-Box mit einem "OK"-Button.

Der Text der Message-Box ist konfigurierbar. Die Message-Box wird immer als Informationsnachricht dargestellt. Die Button-Konfiguration kann nicht verändert werden.

<script type="text/javascript">

top.WE_API.Common.showMessage("I am a sample message box.");

</script>

Verfügbar ab FirstSpirit-Version 5.2R15 Über void showMessage(String title, String text) kann zusätzlich zum Text der Message-Box auch der Titel des Dialogs konfiguriert werden:

<script type="text/javascript">

top.WE_API.Common.showMessage("Important message:", "I am a sample message box.");

</script>

Dialoge

Ein Dialog

Dialoge ermöglichen die Darstellung von frei definierbarem HTML und interaktiven Web-Applikationen und stellen so flexible Möglichkeiten zur Interaktion zur Verfügung.

Dialog createDialog() liefert ein konfigurierbares Dialog-Objekt, das standardmäßig versteckt ist.

<script type="text/javascript">

var myDialog = top.WE_API.Common.createDialog();

// The dialog is still hidden.
// Configuration and display is described in the section "Dialogs".

</script>

Das in diesem Code-Segment eingeholte Dialog-Objekt kann konfiguriert und letztendlich angezeigt werden. Eine weitere Beschreibung erfolgt im Abschnitt Dialoge.

Das aktuelle Vorschau-Element erfragen

 

FSID getPreviewElement() liefert das Store-Element zurück, das mit der aktuellen Vorschau assoziiert ist. Dieses Element ist zumeist ein Objekt vom Typ PageRef oder Dataset.

<script type="text/javascript">

var previewElement = top.WE_API.Common.getPreviewElement();

</script>

Sprachinformationen erfragen

String getLocale() liefert die aktuelle Locale der ContentCreator-Umgebung zurück. Diese entspricht der Sprache der Benutzeroberfläche.

String getDisplayLanguage() liefert die Abkürzung der aktuellen Anzeigesprache, d.h., der Sprache, in der Informationen über FirstSpirit-Elemente (z.B. Anzeigenamen) in der ContentCreator-Benutzeroberfläche angezeigt werden.

<script type="text/javascript">

var uiLocale = top.WE_API.Common.getLocale();
var displayLanguage = top.WE_API.Common.getDisplayLanguage();

</script>

Auf Seitenwechsel reagieren

Über die Methode addPreviewElementListener(PreviewElementListener listener) kann auf einen Seitenwechsel im ContentCreator reagiert werden.

Der Listener „hört“ auf Änderungen des aktuellen Vorschauelements im ContentCreator. Wird ein Seitenwechsel erkannt, wird onChanged(FSID) auf den Listenern aufgerufen. Dabei wird (abhängig vom aktuellen Vorschauelement) entweder die FSID der Seitenreferenz oder die FSID der Content-Projektion als Parameter übergeben.

Beispiel:

<script type="text/javascript">

function handlePageReload(fsid) {
if (fsid.getContentId() != -1) {
// Page is based on a dataset
console.log("This page is based on a dataset with contentID " + fsid.getContentId() + " and content2ID " + fsid.getContent2());
} else {
// Page is based on a "normal" Pageref
console.log("This page has the pagerefID " + fsid.getPageref());
}
}
// Register function "handlePageReload" as a page reload listener
top.WE_API.Common.addPreviewElementListener(handlePageReload);

</script>

Auf Änderungen der Navigation reagieren

Über die Methode addNavigationChangeListener(NavigationChangeListener listener) kann auf eine Änderungen in der Navigationsstruktur reagiert werden. Das schließt zum einen das Verschieben von Ordnern in der Struktur-Verwaltung über den Menüpunkt „Inhalte“/„Navigation bearbeiten“ ein. Außerdem wird das Event beim Anlegen einer neuen Seite und dem damit entstehenden neuen Einträgen in der Struktur-Verwaltung gefeuert.

Die Callback-Funktion bekommt im Falle eines Events ein Objekt vom Typ FSID übergeben:

  • Bei einer neu angelegten Seite entspricht diese FSID der PageRef zur neu angelegten Seite.
  • Bei einem verschobenen Navigationsordner wird die FSID des verschobenen PageRefFolder übergeben.

Beispiel:

<script type="text/javascript">
top.WE_API.Common.addNavigationChangeListener(function(fsid) {
console.log("navigationChanged: " + (fsid ? fsid.getStoreType() + ":" + fsid.getId() : "all"));
});
</script>

Auf Workflow-Ereignisse reagieren

Über die Methode addWorkflowTransitionListener(final WorkflowTransitionListener listener) kann auf das Schalten von Workflow-Schritten in der aktuellen ContentCreator-Session reagiert werden.

Im Fall eines Workflow-Ereignisses bekommt die Callback-Funktion eine Liste vom Informationen in Form einer WorkflowTransitionInfo übergeben.

Beispiel:

 <script type="text/javascript">
top.WE_API.Common.addWorkflowTransitionListener(function(){
console.log("WorkflowTransition:\n"
+ "getWorkflowTarget: " + (workflowInfo.getWorkflowTarget() ? workflowInfo.getWorkflowTarget().getId() : "-") + "\n"
+ "isDeleted: " + workflowInfo.isDeleted() + "\n"
+ "isReleased: " + workflowInfo.isReleased() + "\n"
+ "isFirstTransition: " + workflowInfo.isFirstTransition() + "\n"
+ "getTransitionId: " + workflowInfo.getTransitionId() + "\n"
+ "getWorkflowId: " + workflowInfo.getWorkflowId() + "\n"
+ "isEndState: " + workflowInfo.isEndState() + "\n");
})
<script>

Navigation in der Vorschau

Zwei Funktionen erlauben das Auslösen einer Navigation in der Vorschau:

void jumpTo(FSID fsid) erlaubt anhand eines FSID-Objekts (welches mit der Funktion getPreviewElement() erfragt werden kann) die Navigation zu diesem Objekt.

void jumpTo(JavaScriptObject fsid) akzeptiert ein Objekt im JSON-Format, um zum gewünschten Element zu navigieren:

<script type="text/javascript">

// Jump to a store element, in this case, a site store element with ID 47.
top.WE_API.Common.jumpTo({"id":47, "store":"SITESTORE"});

// Jump to a dataset with the content ID 128, using a page reference with ID 47.
top.WE_API.Common.jumpTo({"contentId":128, "pageref":47});

// Jump to a dataset with the content ID 128, using the preview page reference of a Content2 node with ID 243.
top.WE_API.Common.jumpTo({"contentId":128, "content2":243});

// Jump to a dataset with the content ID 128, using the preview page reference of a template with ID 17.
top.WE_API.Common.jumpTo({"contentId":128, "template":17});

</script>

void jumpTo(JavaScriptObject fsid, String language) akzeptiert ebenfalls ein Objekt im JSON-Format, um zum gewünschten Element zu navigieren. Der Parameter language enthält die Abkürzung der Projektsprache, die zur Anzeige des Zielelements genutzt werden soll.

Der JavaScriptObject-Parameter spezifiziert immer zwei Schlüssel/Wert-Paare.

Diese Kombination definiert entweder das Store-Element oder den Datensatz, das/der in der Vorschau angezeigt werden soll. Ist dieses Element ein Datensatz, so muss die ID der Seitenreferenz angegeben werden, in dessen Vorschau der Datensatz dargestellt werden soll.

Store-Elemente

Benötigte Schlüssel:

  • id gibt die ID des Ziel-Elements als long-Wert an
  • store gibt die Verwaltung des Ziel-Elements in Großbuchstaben an (siehe Store.Type)

Datensätze

Benötigter Schlüssel:

  • contentId gibt die ID des Datensatzes an

Zusätzlich muss einer der folgenden Schlüssel angegeben werden:

  • content2 definiert eine Datenquelle, von der die Vorschauseitenreferenz ermittelt wird
  • pageref gibt die ID einer Seitenreferenz an, auf der der Datensatz angezeigt werden soll
  • template gibt die ID einer Tabellenvorlage an, deren Vorschauseite zur Anzeige des Datensatzes verwendet werden soll

Scripts und Executables ausführen

void execute(String executable, JavaScriptObject parameters, JavaScriptObject callback) löst die Ausführung des referenzierten FirstSpirit-Scripts (in der Vorlagenverwaltung) oder einer Klasse, die von einem FirstSpirit-Modul bereitgestellt wird und das FirstSpirit-Access-API-Interface Executable implementiert, aus und macht optional angegebene Parameter dem Script oder der Klasse zugänglich. Das Script oder die Klasse wird asynchron ausgeführt; ein etwaiger Rückgabewert des Scripts oder der Klasse wird einer JavaScript-Callback-Funktion zur Weiterverarbeitung übergeben.

Parameterreferenz

  • String executable referenziert ein FirstSpirit-Script oder eine ausführbare Klasse aus einem FirstSpirit-Modul.
    • Das Werteformat script:<SCRIPT_UID> referenziert ein Script, das in der Vorlagenverwaltung gespeichert ist, anhand seiner UID.
    • Das Werteformat class:<FULLY_QUALIFIED_CLASS_NAME> referenziert eine Klasse, die das Access-API-Interface Executable implementiert.
  • JavaScriptObject parameters definiert eine Map in JSON-Format mit einem oder mehreren Schlüssel-Wert-Paaren, z.B. {"param1":"value1", "param2":"value2"}. Diese Parameter werden dem Script oder dem Executable zur Verfügung gestellt.
  • JavaScriptObject callback gibt den Namen einer JavaScript-Funktion oder die Definition eines kompletten JavaScript-Funktionsobjektes an, die einen Parameter akzeptiert, um den Rückgabewert des Scripts oder der ausführbaren Klasse innerhalb des Vorschaudokuments weiterzuverarbeiten.

Hotspot für Aktionen an FS_INDEX-Einträgen

Es gibt die Möglichkeit, für Einträge aus FS_INDEX-Eingabekomponenten einen Hotspot mit Aktionen zu erstellen. Die Aktionen hierbei können per JavaScript clientseitig ermittelt werden.

Aktionen erstellen

Eine kontextbezogene Aktion besteht aus den folgenden Klassen und Methoden:

  • ClientItem: Kann über den ClientItemContext erzeugt werden.
    Beispiel:

var clientItem = context.createItem(
"ICON_URL",
"TITLE",
function clientItemPerformable() {}
);

  • ClientItemPerformable: Parameterlose Funktion in JavaScript, wird bei createItem als „Runnable“ übergeben. Siehe obiges Beispiel.
  • ClientItemConstants: Hier sind die zur Verfügung stehenden Eigenschaften sowie Kontexttypen (bei Verwendung im FS_INDEX-Kontext: index) verzeichnet.
  • ClientItemContext: Das ist der Kontext, für den Aktionen ermittelt werden sollen. Folgende Möglichkeiten stehen hier zur Verfügung:
    • ClientItemContext#createItem: Erzeugen eines ClientItem
    • ClientItemContext#getProperty: Zugriff auf die Kontexteigenschaften (siehe ClientItemConstants, oben)
    • ClientItemContext#refresh: optionales Neuladen der kontextuellen Sicht
  • ClientItemsPlugin: Kann als JavaScript-Funktion implementiert werden. Wird mit dem ClientItemContext und einem Callback für den Empfang der ClientItem(s) aufgerufen.
    Beispiel:

function(context, receiver) {
// context: de.espirit.firstspirit.webedit.client.api.ClientItemContext
// receiver: function(
// Array<de.espirit.firstspirit.webedit.client.api.ClientItem> items
// )
}

Die genannten Klassen befinden sich in der FirstSpirit Developer-API, Paket de.espirit.firstspirit.webedit.client.api.

Aktionen in der ContentCreator-Sitzung registrieren

Eine kontextbezogene Aktion wird in der ContentCreator-Session über die Funktion addItemsPlugin des WE_API-Objekts Common registriert:

  • Methode addItemsPlugin in der Klasse Common: Hier werden die Aktionen registriert.
    Beispiel:

WE_API.Common.addItemsPlugin(
"index",
function clientItemsPlugin(context, receiver) {
var items = [];
items.push(
context.createItem("ICON_URL", "TITLE", function clientItemPerformable() {})
);
receiver(items);
}
);

© 2005 - 2022 Crownpeak Technology GmbH | Alle Rechte vorbehalten. | FirstSpirit 2022.10 | Datenschutz