Hervorheben von Inhalten und Erweitern der Funktionen in von SharePoint gehosteten SharePoint-Add-Ins mithilfe des Popupsteuerelements

Artikel
04/08/2023

Das Popupsteuerelement von SharePoint ermöglicht eine flexible Interaktion mit dem Benutzer sowie die Präsentation der Funktionen Ihres von SharePoint gehosteten Add-Ins. Sie können es auf vielfältige Weise konfigurieren, um es an die Benutzeroberfläche Ihres Add-Ins anzupassen. Sie können dieses Steuerelement erstellen, Ihrer Seite hinzufügen und sein Aussehen und Verhalten anpassen.

Bei jeder Suche auf einer SharePoint-Website sehen Sie Beispiele für das Popupsteuerelement in Aktion, da es immer angezeigt wird, wenn Sie auf ein Suchergebnis zeigen.

Die folgende Abbildung zeigt das Popup für ein einzelnes Suchergebnis und einige der typischen Elemente eines Inhaltssteuerelements: einen Titel, einige Informationen zu dem Element auf der Seite sowie Aktionen (Öffnen und Senden), die Sie für das Element ausführen können.

In diesem Fall sind die Informationen und Aktionen relativ einfach, doch Sie können bereits zwei Vorteile der Verwendung erkennen. Erstens können Sie ggf. zusätzliche Informationen zu Elementen auf einer Seite anzeigen, und zweitens erhalten Sie eine elegante Möglichkeit, der Seite Funktionalität hinzuzufügen.

Beispiel für das Popupsteuerelement auf einer SharePoint-Suchergebnisseite

Beispiel für das Popupsteuerelement auf einer SharePoint-Suchergebnisseite

Verfügbarmachen des Steuerelements für die HTML-Seite durch Einbeziehen der Datei „callout.js“

In diesem Beispiel wird mithilfe der Methode SP.SOD.executeFunc sichergestellt, dass die Skriptdatei geladen wird, bevor Sie davon abhängigen Code ausführen.

SP.SOD.executeFunc("callout.js", "Callout", function () {
    });

Die Funktion, die Sie an die SP.SOD.executeFunc-Funktion übergeben, enthält den Code, den Sie nach dem Laden der Datei „callout.js“ ausführen möchten. Nachdem Sie diese Dateien geladen haben, erstellen Sie mithilfe des CalloutManager-Objekts ein Callout-Objekt für jedes Seitenelement, dem ein Popupsteuerelement zugeordnet werden muss.

CalloutManager ist ein Singleton, das Verweise auf jedes Callout-Objekt auf einer Seite in einem assoziativen Array enthält.

Das Callout-Objekt hat nur zwei erforderliche Member: ID und launchPoint. Der ID-Member ist der Schlüssel, der dem Callout-Objekt im CalloutManager zugeordnet ist: CalloutManager["value of the callout's ID member"]. Der launchPoint-Member ist ein HTML-Seitenelement.

Sie können z. B. ein div-Element auf der Seite erstellen oder abrufen und als Member des Callout-Objekts übergeben. Standardmäßig wird das Popupsteuerelement angezeigt, wenn ein Benutzer das launchPoint-Element auswählt.

Dieses Beispiel zeigt, wie Sie das einfachste mögliche Popupsteuerelement mit nur zwei erforderlichen Membern und einer Titelzeichenfolge erstellen.

var calloutPageElement = document.createElement("div");
var callout = CalloutManager.createNew({
   ID: "unique identifier",
   launchPoint: calloutPageElement,
   title: "callout title"
});

Dieses bestimmte Popup wird eingeblendet und zeigt einen Titel am oberen Rand des Steuerelements an, sobald ein Benutzer das Seitenelement auswählt. Mit den optionalen Membern können Sie Darstellung, Verhalten, Position und Aktionen des Popups sehr wirkungsvoll anpassen. Das Popupsteuerelement verfügt auch über eine set-Methode, mit der Sie nach Erstellung einer Instanz des Steuerelements einen Wert für einen beliebigen Parameter festlegen können.

callout.set({openOptions:{event: "hover"}});

Sie können auch Werte für alle Popupelemente in einem CalloutOptions-Objekt festlegen und dieses Objekt dann an die createNew-Methode übergeben.

var calloutPageElement = document.createElement("div");
var calloutOptions = new CalloutOptions();
calloutOptions.ID = unique identifier;
calloutOptions.launchPoint = calloutPageElement;
calloutOptions.title = callout title;
var callout = CalloutManager.createNew(calloutOptions);

Anpassen der Darstellung des Popupsteuerelements

Die folgenden Elemente können zum Steuern der Anzeige des Popups verwendet werden.

Element	Zweck	Gültige Werte (Standardwert in Fettformatierung)
title	Dient zum Anzeigen eines Titels am oberen Rand des Steuerelements.	Zeichenfolge, NULL, Zeichenfolge mit HTML
content	Zeigt HTML innerhalb des Steuerelements an, wenn kein Wert für das `contentElement` Element vorhanden ist.	Zeichenfolge mit HTML, NULL, muss NULL sein, wenn `contentElement` einen Wert besitzt
contentElement	Zeigt ein HTML-Element innerhalb des Steuerelements an, wenn kein Wert für das `content` Element vorhanden ist.	Beliebiges HTML-Element, NULL, muss NULL sein, wenn `content` einen Wert besitzt
contentWidth	Dient zum Angeben der Breite (in Pixel) des Popuptextcontainers. Dieser Container besitzt einen Rand mit einer Breite von 1 Pixel sowie einen Abstand mit einer Breite von 15 Pixeln an jeder Seite, wodurch die Breite des Steuerelements die angegebene Textbreite um 32 Pixel übersteigt. Die CSS-Eigenschaft `overflow` des Steuerelements ist auf `hidden`festgelegt, sodass Ihr Inhalt abgeschnitten wird, wenn er nicht in die von Ihnen angegebene Breite passt. Falls Sie dieses Element für ein geöffnetes Popup festlegen, wird die Änderung umgehend wirksam. Bei den anderen Elementen ist dies nicht der Fall.	Beliebige Zahl zwischen 240 und 610, 350 (wodurch die Breite des Steuerelements standardmäßig 382 Pixel beträgt)
beakOrientation	Gibt die Ausrichtung der Spitze oder des Zeigers des Popupsteuerelements an.	topBottom-Ausrichtung leftRight-Ausrichtung

Anpassen des Verhaltens des Popupsteuerelements

Mit den folgenden Elementen können Sie das Popupverhalten steuern. Beginnen Sie mit dem wichtigen openOptions-Element, da Sie damit angeben können, wie das Steuerelement geöffnet und geschlossen werden soll, wenn der Benutzer auf der Seite damit interagiert.

Werte für das Element `openOptions`	Zweck
`{event: "click", closeCalloutOnBlur: true}`	Das Popup erscheint, wenn der Benutzer mit einer Maus auf das `launchPoint`-Element zeigt, und wird geschlossen, wenn der Benutzer die Maus vom `launchPoint`-Element wegbewegt. Da `event` den Wert `click` hat, lautet der Wert der Option `showCloseButton` standardmäßig true und kann nicht geändert werden. Dies ist die standardmäßige Kombination der Werte.
`{event: "hover", showCloseButton: true}`	Das Popup erscheint, wenn der Benutzer mit der Maus auf das `launchPoint`-Element zeigt, und wird geschlossen, wenn der Benutzer auf ein X in der rechten oberen Ecke des Steuerelements klickt. Da `event` den Wert `hover` hat, ist der Wert von `closeCalloutOnBlur` nicht anwendbar und kann auch nicht festgelegt werden.
`{event: "click", closeCalloutOnBlur: false}`	Das Popup erscheint, wenn der Benutzer mit der Maus auf das `launchPoint`-Element zeigt, und wird nur geschlossen, wenn der Benutzer auf ein X in der rechten oberen Ecke des Steuerelements klickt. Da `event` den Wert `click` hat, lautet der Wert der Option `showClosebutton` standardmäßig true und kann nicht geändert werden.

Im Anschluss finden Sie die anderen Elemente, die Sie zum Steuern des Popupverhaltens festlegen können.

Element	Zweck	Gültige Werte (Standardwert in Fettformatierung)
onOpeningCallback	Dient zum Ausführen von Aktionen, die vor dem Rendern des Popups auf der Seite ausgeführt werden müssen. Da das `Callout` -Objekt als Parameter an die von Ihnen bereitgestellte Funktion übergeben werden muss, können Sie diesen Member verwenden, um Werte für alle Eigenschaften des Steuerelements festzulegen, bevor das Steuerelement gerendert wird. Mit diesem Element können Sie auch asynchrone Aktionen starten, um dem Steuerelement Inhalte hinzuzufügen oder Inhalte des Steuerelements zu ändern. Für dieses Element kann nur einmal ein Wert festgelegt werden.	`function(callout /=Callout/) {...}` null
onOpenedCallback	Dient zum Ausführen von Aktionen, die ausgeführt werden müssen, nachdem das Popup auf der Seite gerendert und vollständig animiert wurde. Mit diesem Element können Sie beispielsweise das Dokumentobjektmodell (DOM) des Steuerelements ändern. Für dieses Element kann nur einmal ein Wert festgelegt werden.	`function(callout /=Callout/) {...}` null
onClosingCallback	Dient zum Ausführen von Aktionen, die ausgeführt werden müssen, während das Steuerelement geschlossen wird, aber bevor es vollständig von der Seite entfernt wurde. Für dieses Element kann nur einmal ein Wert festgelegt werden.	`function(callout /=Callout/) {...}` null
onClosedCallback	Dient zum Ausführen von Aktionen, die ausgeführt werden müssen, nachdem das Steuerelement geschlossen und von der Seite entfernt wurde. Für dieses Element kann nur einmal ein Wert festgelegt werden.	`function(callout /=Callout/) {...}` null

Verwenden der Methoden des Popupsteuerelements

Sie können das Verhalten des Popupsteuerelements mit den folgenden Methoden anpassen.

Methode	Zweck	Gültige Parameterwerte
set({member:value})	Dient zum Festlegen von Werten für Elemente, nachdem eine Instanz des Steuerelements erstellt wurde.	Ein Name-Wert-Paar zum Definieren eines Werts für ein beliebiges Element des Popupsteuerelements. `var callout = new Callout({openOptions:{event: "click"}});callout.set({openOptions:{event: "hover"}});`
getOrientation()	Gibt ein `CalloutOrientation` -Objekt zurück, das angibt, auf welche Weise das Legendensteuerelement zeigt. Dieses Objekt verfügt über vier boolesche Member: `up`, `down`, `left`und `right`. Während das Steuerelement geöffnet ist, sind zwei dieser Werte true und zwei false (beispielsweise `up` und `right`).	Keine Parameter
addEventCallback(string eventName, CalloutCallback callback	Registrieren Sie eine Rückruffunktion, die immer dann aufgerufen wird, wenn das Legendensteuerelement in den durch den `eventName` Parameter angegebenen Zustand wechselt.	Der `eventName` Parameter muss einen der folgenden Werte aufweisen: `opening`, `open`, `closing`, `closed`. Der `callback` Parameter muss eine Funktion sein, die eine Instanz des Legendensteuerelements als ersten Parameter akzeptiert.
open()	Dient zum Anzeigen des Steuerelements. Ist das Steuerelement bereits geöffnet, oder wird es gerade geöffnet, gibt diese Methode nur false zurück.	Keine Parameter
close(bool useAnimation)	Dient zum Ausblenden des Steuerelements. Ist das Steuerelement bereits geschlossen oder wird es gerade geschlossen, gibt diese Methode nur false zurück.	Ein boolescher Wert, der angibt, ob das Steuerelement mit Animation geschlossen wird. Die Animation ist standardmäßig deaktiviert.
toggle()	Dient zum Wechseln des Öffnungszustands des Steuerelements.	Keine Parameter
addAction(CallOutAction calloutAction)	Fügen Sie dem Objektarray des `CalloutAction` Popupsteuerelements ein neues `CalloutAction` hinzu. Mit diesen Objekten werden die Aktionen definiert, die in der Fußzeile des Steuerelements angezeigt werden sollen. Im Abschnitt Hinzufügen von Aktionen zum Popupsteuerelement erfahren Sie, wie Sie diese Objekte erstellen. Aktionen können erst nach dem Erstellen einer Instanz des Steuerelements hinzugefügt werden. Das Steuerelement kann mit maximal drei Aktionen versehen werden. Beim Versuch, noch mehr Aktionen hinzuzufügen, tritt ein Ausnahmefehler auf.	Ein `CalloutAction`-Objekt.
refreshActions()	Lädt alle Aktionen neu, die dem Steuerelement hinzugefügt wurden. Mithilfe dieser Methode können Sie Aktionen ändern, aktivieren oder deaktivieren, während das Steuerelement geöffnet ist.	Keine Parameter

Hinzufügen von Aktionen zum Popupsteuerelement

Sie fügen Aktionen nach Erstellung einer Instanz des Popupsteuerelements hinzu. Eine Popup-Aktion kann aus einer einzelnen Aktion oder einem Menü mit Aktionen bestehen. Sie können bis zu drei Aktionen zu einem Popupsteuerelement hinzufügen. Nachdem Sie eine Popupaktion erstellt haben, fügen Sie sie dem CalloutControl-Objekt mit der zugehörigen addAction-Methode hinzu. Diese Beispielaktion öffnet ein neues Fenster in Ihrem Browser, nachdem der Benutzer den Text ausgewählt hat.

//Create CalloutAction
var calloutAction = new CalloutAction({
            text: "Open window"
            onClickCallback: function() {                
                window.open(url);
            }
        });

//Add Action to an instance of the CalloutControl        
        myCalloutControl.addAction(calloutAction);

Sie können auch Werte für alle CalloutAction-Elemente in einem CalloutActionOptions-Objekt festlegen und dieses Objekt dann an den CalloutAction-Konstruktor übergeben.

//Create CalloutAction
var calloutActionOptions = new CalloutActionOptions();
calloutActionOptions.text = "Open window";
actionOptions.onClickCallback = function() {
    window.open(url);
};
var calloutAction = new CalloutAction(calloutActionOptions);

//Add Action to an instance of the CalloutControl        
        myCalloutControl.addAction(calloutAction);

Die folgenden Elemente dienen zum Definieren des Verhaltens einer Popupaktion.

Element	Zweck	Gültige Werte (Standardwert in Fettformatierung)
text (erforderlich)	Dient zum Anzeigen einer Beschriftung für die Aktion.	Zeichenfolge, NULL
onClickCallback	Definiert die Aktion, die auftritt, wenn der Benutzer die Aktionsbeschriftung des Popups auswählt.	`function(calloutAction /=CalloutAction/) {...}` null
isEnabledCallback	Dient zum Definieren einer Rückruffunktion, die vor der Anzeige des Popups ausgeführt wird und bestimmt, ob die Aktion aktiviert ist. Wenn diese Funktion true zurückgibt, zeigt das Popup zeigt die aktivierte Aktion an. Gibt sie false zurück, zeigt das Popup den Aktionstext an, aber deaktiviert die Aktion.	`function(calloutAction /=CalloutAction/) {...}` null
isVisibleCallback	Dient zum Definieren einer Rückruffunktion, die vor der Anzeige des Popups ausgeführt wird und bestimmt, ob der Aktionstext angezeigt wird. Gibt die Funktion true zurück, wird im Popup der Aktionstext angezeigt. Bei false zurück, wird der Aktionstext nicht angezeigt. Weitere Aktionen rücken nach links, um die Position der ausgeblendeten Aktion einzunehmen.	`function(calloutAction /=CalloutAction/) {...}` null
tooltip	Dient zum Anzeigen von Text, wenn der Benutzer auf den Aktionstext des Popups zeigt.	Zeichenfolge, NULL
disabledTooltip	Zeigt Text an, wenn der Benutzer die Maus über den Aktionstext des Popups bewegt und die Popupaktion deaktiviert wurde (wenn die `isEnabledCallback`-Funktion false zurückgibt).	Zeichenfolge, NULL
menuEntries	Dient zum Definieren eines Menüs mit Aktionen anstelle einer einzelnen Aktion.	`[ CalloutActionMenuEntry, ...]` null

Im nächsten Abschnitt wird erläutert, wie Sie ein CalloutActionMenuEntry-Element erstellen und einem CalloutAction-Objekt hinzufügen.

Hinzufügen von Aktionsmenüs zum Popupsteuerelement

Wenn eine Popupaktion anstelle einer einzelnen Aktion ein Menü enthält, wird dem Benutzer neben dem Aktionstext des Popups ein Abwärtspfeil angezeigt (siehe folgende Abbildung).

Eine Popupaktion zeigt ein Menü an, wenn ein Benutzer auf den Pfeil neben der Aktionsbeschriftung klickt

Eine Popupaktion zeigt ein Menü an, wenn ein Benutzer auf den Pfeil neben der Aktionsbeschriftung klickt.

Sie können beliebig viele Menüeinträge erstellen und der Popupaktion hinzufügen, indem Sie sie in einem Array als Wert des Elements menuEntries des Objekts CalloutAction übergeben.

//Create two menu entries.
var menuEntry1 = new CalloutActionMenuEntry("Entry One", calloutActionCallbackFunction, "/_layouts/images/DOC16.GIF");
var menuEntry2 = new CalloutActionMenuEntry("Some Other Entry", calloutActionCallbackFunction, "/_layouts/images/XLS16.GIF");

//Add the menu entries to the callout action.
var calloutAction = new CalloutAction({
   text: "MENU W/ ICONS",
   menuEntries: [menuEntry1, menuEntry2]
})

//Add the callout action to the callout control.
callout.addAction(calloutAction);

Der CalloutActionMenuEntry-Konstruktor akzeptiert drei Parameter. Die ersten beiden Parameter sind erforderlich. Der dritte ist optional, kann jedoch hilfreich sein, da Sie damit ein Symbol mit dem Text anzeigen können.

Übergeben Sie als ersten Parameter eine Zeichenfolge, um eine Beschriftung für die einzelnen Menüeinträge anzuzeigen.
Übergeben Sie als zweiten Parameter eine Funktion, um die Aktion zu definieren, die ausgeführt werden soll, wenn der Benutzer auf den Text des Menüeintrags klickt.
Übergeben Sie eine Zeichenfolge mit der URL für das Symbol, das links neben der Beschriftung angezeigt werden soll.

Erstellen und Verwalten von Instanzen des Popupsteuerelements mithilfe von CalloutManager

Das Singleton-Objekt CalloutManager dient zum Speichern von Verweisen auf die einzelnen Callout-Objekte auf einer Seite. Jede Instanz des Popupsteuerelements wird in einem assoziativen Array gespeichert, wobei der Wert ID der einzelnen Steuerelemente als Schlüssel fungiert. CalloutManager enthält Methoden, die Sie beim Erstellen und Verwalten der gespeicherten Callout-Objekte unterstützen.

Methode	Zweck	Gültige Parameterwerte
createNew(members)	Dient zum Erstellen eines neuen Objekts vom Typ `Callout`. Dabei fügt `CalloutManager` einen Eintrag für das Steuerelement im zugehörigen assoziativen Array hinzu. Der Wert des erforderlichen Elements `ID` fungiert dabei als Schlüssel.	Ein assoziatives Array, durch das jedem Element, das Sie verwenden möchten, Werte zugewiesen werden. Die `ID` Member und `launchPoint` sind erforderlich.
createNewIfNecessary (members)	Erstellen Sie ein `Callout` -Objekt, wenn dem , das `launchPoint` Sie als Parameter übergeben, noch kein Legendensteuerelement zugewiesen ist.	Ein assoziatives Array, durch das jedem Element, das Sie verwenden möchten, Werte zugewiesen werden. Die `ID` Member und `launchPoint` sind erforderlich.
getFromLaunchPoint: function (/@type(HTMLElement)/launchPoint)	Ruft das `Callout`-Objekt ab, das dem in der Funktion bereitgestellten `launchPoint` zugeordnet ist. Von dieser Methode wird eine Ausnahme ausgelöst, wenn `launchPoint` kein `Callout`-Objekt zugewiesen ist.	Keine Parameter
getFromLaunchPointIfExists: function (/@type(HTMLElement)/launchPoint)	Ruft das `Callout`-Objekt ab, das dem in der Funktion bereitgestellten `launchPoint` zugeordnet ist. Diese Methode gibt NULL zurück, wenn `launchPoint` kein `Callout`-Objekt zugewiesen ist.	Keine Parameter
getFromCalloutDescendant: function (/@type(HTMLElement)/descendant)	Dient zum Abrufen des `Callout`-Objekts, das dem HTML-Element zugeordnet ist, welches im durch die Funktion angegebenen Element angegeben ist. Bei diesem Element kann es sich um ein beliebiges untergeordnetes Element des Popupelements handeln. So können Sie beispielsweise den Wert des `contentElement`-Elements übergeben, das Sie beim Erstellen des `Callout`-Objekts zugewiesen haben. Diese Methode löst eine Ausnahme aus, wenn dem untergeordneten Element kein `Callout`-Objekt zugeordnet ist.	Keine Parameter
closeAll()	Schließt alle geöffneten `Callout` Objekte. Von dieser Methode wird "true" zurückgegeben, wenn damit mindestens ein Popup geschlossen wird.	Keine Parameter
isAtLeastOneCalloutOpen()	Dient zum Überprüfen, ob mindestens ein Popup geöffnet ist.	Keine Parameter

Positionieren des Popupsteuerelements auf der Seite

Element	Zweck	Gültige Werte (Standardwert in Fettformatierung)
boundingBox	Geben Sie das HTML-Element an, das als Äquivalent des `offsetParent` Legendensteuerelements dient. Standardmäßig wird hierfür der Wert `offsetParent` des Popupsteuerelements verwendet, Sie können mithilfe dieses Elements jedoch die korrekte Positionierung des Steuerelements sicherstellen. Es wird versucht, das Popupsteuerelement so zu positionieren, dass es innerhalb dieses Felds sichtbar ist. Gegebenenfalls wird die Ausrichtung (von oben nach unten oder von links nach rechts, je nach Ausrichtung der Spitze) geändert, damit es sichtbar bleibt.	Beliebiges HTML-Element, der offsetParent-Wert des HTML-Elements mit dem Popupsteuerelement
positionAlgorithm	Dient zum Überschreiben des standardmäßigen Positionierungsalgorithmus für das Popupsteuerelement.	CalloutOptions.prototype.defaultPositionAlgorithm `function(calloutPositioningProxy) { ... }`

Im folgenden Abschnitt erfahren Sie, wie Sie unter Verwendung des calloutPositioningProxy-Objekts Positionierungsalgorithmen für das Popupsteuerelement erstellen.

Erstellen von Positionierungsalgorithmen mit „calloutPositioningProxy“

Das calloutPositioningProxy-Objekt enthält Methoden und Eigenschaften zum Überschreiben der standardmäßigen Positionierungslogik des Popupsteuerelements. Soll das Steuerelement also beispielsweise immer unterhalb und rechts vom launchPoint-Element angezeigt werden, können Sie einen Positionierungsalgorithmus ähnlich dem folgenden erstellen.

function alwaysGoDownAndRight(calloutPositioningProxy)  {
    calloutPositioningProxy.moveDownAndRight();
}

Anschließend übergeben Sie diese Funktion als Wert des Callout Elements des positionAlgorithm Objekts. Sie können dies beim Erstellen von Calloutoder später tun, indem Sie den Wert festlegen.

callout.set({positionAlgorithm: alwaysGoDownAndRight});

Sie können sich jederzeit die standardmäßige Positionierungslogik ansehen, indem Sie die JavaScript-Konsole Ihres Browsers starten (beispielsweise die F12-Entwicklertools von Internet Explorer).

CalloutOptions.prototype.positionAlgorithm.toString()

Sie können diese Methoden im CalloutPositioningProxy -Objekt verwenden, um Ihre eigene Positionierungslogik zu schreiben.

Methode	Beschreibung
isCalloutTooFarTop()	Gibt einen booleschen Wert zurück.
isCalloutTooFarRight()	Gibt einen booleschen Wert zurück.
isCalloutTooFarBottom()	Gibt einen booleschen Wert zurück.
isCalloutTooFarLeft()	Gibt einen booleschen Wert zurück.
isCalloutLeftOfHardBoundingBox()	Gibt einen booleschen Wert zurück. Bei true befindet sich der linke Rand des Steuerelements außerhalb des zugehörigen Containerelements. Er ist nicht sichtbar, und der Benutzer kann keinen Bildlauf dorthin ausführen.
isCalloutRightOfHardBoundingBox()	Gibt einen booleschen Wert zurück. Bei true befindet sich der rechte Rand des Steuerelements außerhalb des zugehörigen Containerelements. Er ist nicht sichtbar, und der Benutzer kann keinen Bildlauf dorthin ausführen.
isCalloutAboveHardBoundingBox()	Gibt einen booleschen Wert zurück. Bei true befindet sich der obere Rand des Steuerelements außerhalb des zugehörigen Containerelements. Er ist nicht sichtbar, und der Benutzer kann keinen Bildlauf dorthin ausführen.
isCalloutBelowHardBoundingBox()	Gibt einen booleschen Wert zurück. Bei true befindet sich der untere Rand des Steuerelements außerhalb des zugehörigen Containerelements. Er ist nicht sichtbar, und der Benutzer kann keinen Bildlauf dorthin ausführen.
isOrientedUp()	Gibt einen booleschen Wert zurück.
isOrientedDown()	Gibt einen booleschen Wert zurück.
isOrientedLeft()	Gibt einen booleschen Wert zurück.
isOrientedRight()	Gibt einen booleschen Wert zurück.
moveUpAndRight()	Gibt nichts zurück. Dient zum Ändern der Richtung des Steuerelements.
moveUpAndLeft()	Gibt nichts zurück. Dient zum Ändern der Richtung des Steuerelements.
moveDownAndRight()	Gibt nichts zurück. Dient zum Ändern der Richtung des Steuerelements.
moveDownAndLeft()	Gibt nichts zurück. Dient zum Ändern der Richtung des Steuerelements.
moveTowardsOppositeQuadrant()	Gibt nichts zurück. Dient zum Ändern der Richtung des Steuerelements.
flipHorizontal()	Gibt nichts zurück. Dient zum Ändern der Richtung des Steuerelements.
flipVertical()	Gibt nichts zurück. Dient zum Ändern der Richtung des Steuerelements.
numberOfEdgesCollidingWithBoundingBox()	Gibt eine ganze Zahl zwischen 0 und 4 zurück. Diese Zahl steht für die Anzahl von Kanten, an denen das Popup mit dem sichtbaren Begrenzungsrahmen kollidiert. Beispiel: Wird der obere Teil des Steuerelements nach dem Aufrufen der `moveUpAndRight()`-Methode durch den oberen Teil des Dokumenttexts abgeschnitten, wird von der `numberOfEdgesCollidingWithBoundingBox()`-Methode eine Zahl größer 1 zurückgegeben.

Der Positionierungsalgorithmus sorgt dafür, dass das Steuerelement ober- oder unterhalb des Texts positioniert wird. Die isRTL -Eigenschaft des CalloutPositioningProxy gibt an, ob der Text eine Rechts-nach-links-Sprache anzeigt. Durch die Überprüfung dieser Eigenschaft wird sichergestellt, dass das Steuerelement stets korrekt in Relation zum Text auf der Seite positioniert wird.

function examplePositionAlgorithm(calloutPositioningProxy) {
    if (!calloutPositioningProxy.isRTL) {
        calloutPositioningProxy.moveDownAndRight();
        if (calloutPositioningProxy.isCalloutTooFarBottom()) {
            calloutPositioningProxy.moveUpAndRight();
        }
    }
    else {
        calloutPositioningProxy.moveDownAndLeft();
        if (calloutPositioningProxy.isCalloutTooFarBottom()) {
            calloutPositioningProxy.moveUpAndLeft();
        }
    }
}
callout.set({positionAlgorithm: examplePositionAlgorithm});

Der folgende Positionierungsalgorithmus ändert die Standardrichtung des Steuerelements von upAndRight in downAndRight, greift im Falle von Kollisionen aber auf den Standardalgorithmus zurück:

function tryDownAndRightThenGoDefault(calloutPositioningProxy) {
    if (!calloutPositioningProxy.isRTL)
        calloutPositioningProxy.moveDownAndRight();
    else
        calloutPositioningProxy.moveDownAndLeft();
    
    if (calloutPositioningProxy.numberOfEdgesCollidingWithBoundingBox() > 0)
        return CalloutOptions.prototype.positionAlgorithm.apply(this, arguments);
};
callout.set({positionAlgorithm: tryDownAndRightThenGoDefault});