Freigeben über


Binden an Formen in einer PowerPoint-Präsentation

Ihr PowerPoint-Add-In kann an Shapes gebunden werden, um über einen Bezeichner konsistent darauf zuzugreifen. Das Add-In richtet eine Bindung durch Aufrufen von BindingCollection.add und Zuweisen eines eindeutigen Bezeichners ein. Verwenden Sie den Bezeichner jederzeit, um auf das Shape zu verweisen und auf dessen Eigenschaften zuzugreifen. Das Erstellen von Bindungen bietet dem Add-In den folgenden Wert.

  • Stellt eine Beziehung zwischen dem Add-In und der Form im Dokument her. Bindungen werden im Dokument beibehalten und können zu einem späteren Zeitpunkt aufgerufen werden.
  • Ermöglicht den Zugriff auf Shape-Eigenschaften, die gelesen oder aktualisiert werden können, ohne dass der Benutzer Shapes auswählen muss.

Die folgende Abbildung zeigt, wie ein Add-In an zwei Formen auf einer Folie gebunden werden kann. Jede Form verfügt über eine Bindungs-ID, die vom Add-In erstellt wurde: star und pie. Mithilfe der Bindungs-ID kann das Add-In auf die gewünschte Form zugreifen, um Eigenschaften zu aktualisieren.

Binden an ein star Shape mit der ID

Szenario: Verwenden von Bindungen zum Synchronisieren mit einer Datenquelle

Ein gängiges Szenario für die Verwendung von Bindungen besteht darin, Shapes mit einer Datenquelle auf dem neuesten Stand zu halten. Häufig kopieren Benutzer beim Erstellen einer Präsentation Bilder aus der Datenquelle und fügen sie in die Präsentation ein. Um die Bilder im Laufe der Zeit auf dem neuesten Stand zu halten, werden die neuesten Bilder aus der Datenquelle manuell kopiert und eingefügt. Ein Add-In kann diesen Prozess automatisieren, indem im Namen des Benutzers aktuelle Bilder aus der Datenquelle abgerufen werden. Wenn eine Shape-Füllung aktualisiert werden muss, verwendet das Add-In die Bindung, um die richtige Form zu finden und die Shape-Füllung mit dem neueren Bild zu aktualisieren.

In einer allgemeinen Implementierung müssen zwei Komponenten berücksichtigt werden, um eine Form in PowerPoint zu binden und mit einem neuen Bild aus einer Datenquelle zu aktualisieren.

  1. Die Datenquelle. Dies ist eine beliebige Datenquelle oder Objektbibliothek wie Microsoft SharePoint oder Microsoft OneDrive.
  2. Das PowerPoint-Add-In. Das Add-In ruft Daten aus der Datenquelle basierend auf den Anforderungen des Benutzers ab. Die Daten werden in ein Base64-codiertes Bild konvertiert. Dies ist der einzige Fülltyp, den die gebundene Form akzeptieren kann. Es fügt ein Shape auf Anforderung des Benutzers ein und bindet es an einen eindeutigen Bezeichner. Anschließend wird das Shape mit dem Base64-Bild basierend auf der ursprünglichen Datenquelle gefüllt. Shapes werden auf Anforderung des Benutzers aktualisiert, und das Add-In verwendet den Bindungsbezeichner, um die Form zu finden und das Bild mit dem zuletzt gespeicherten Base64-Bild zu aktualisieren.

Hinweis

Sie entscheiden die Implementierungsdetails zum Synchronisieren von Updates aus der Datenquelle und zum Abrufen oder Erstellen von Images. In diesem Artikel wird nur beschrieben, wie Sie die Office JS-APIs in Ihrem Add-In verwenden, um eine Form zu binden und mit den neuesten Images zu aktualisieren.

Erstellen einer gebundenen Form in PowerPoint

Verwenden Sie die PowerPoint.BindingCollection.add() -Methode für die Präsentation, um eine Bindung zu erstellen, die auf eine bestimmte Form verweist.

Das Add-In erstellt ein Base64-codiertes Bild aus der Datenquelle, erstellt dann die Form aus dem Bild und fügt eine eindeutige ID hinzu.

Das folgende Beispiel zeigt, wie Sie eine Form auf der ersten ausgewählten Folie erstellen.

await PowerPoint.run(async (context) => {
    const slides = context.presentation.getSelectedSlides();

    // Insert new shape on first selected slide. 
    const myShape = slides
        .getItemAt(0)
        .shapes.addGeometricShape(PowerPoint.GeometricShapeType.rectangle, {
            top: 100,
            left: 30,
            width: 200,
            height: 200
        });

    // Fill shape with a Base64-encoded image. 
    // Note: The image is typically created from a data source request. 
    const productsImage = "...Base64 image data...";
    myShape.fill.setImage(productsImage);
});

Rufen Sie auf BindingCollection.add , um die Bindung der Bindings-Auflistung in PowerPoint hinzuzufügen. Im folgenden Beispiel wird gezeigt, wie Sie der Bindings-Auflistung eine neue Bindung für eine Form hinzufügen.

// Create a binding ID to track the shape for later updates. 
const bindingId = "productChart"; 
// Create binding by adding the new shape to the bindings collection. 
context.presentation.bindings.add(myShape, PowerPoint.BindingType.shape, bindingId); 

Aktualisieren einer gebundenen Form mit aktualisierten Daten

Nachdem die Bilddaten aktualisiert wurden, aktualisieren Sie das Shape-Bild, indem Sie es über den Bindungsbezeichner suchen. Im folgenden Codebeispiel wird gezeigt, wie Sie eine gebundene Form mit dem Bezeichner finden und mit einem aktualisierten Bild füllen. Das Image wird vom Add-In basierend auf der Datenquellenanforderung aktualisiert oder direkt von der Datenquelle bereitgestellt.

async function updateBinding(bindingId, image) {
    await PowerPoint.run(async (context) => {
        try {
            // Get the shape based on binding ID. 
            const myShape = context.presentation.bindings
                .getItem(bindingId)
                .getShape();

            // Update the shape to latest image. 
            myShape.fill.setImage(image);
            await context.sync();

        } catch (err) {
            console.error(err);
        }
    });
} 

Löschen einer Bindung

Im folgenden Beispiel wird gezeigt, wie Sie eine Bindung löschen, indem Sie sie aus der bindings-Auflistung löschen.

async function deleteBinding(bindingId) {
    await PowerPoint.run(async (context) => {
        context.presentation.bindings.getItemAt(bindingId).delete();
        await context.sync();
    });
}

Laden von Bindungen

Wenn ein Benutzer eine Präsentation öffnet und das Add-In zum ersten Mal geladen wird, können Sie alle Bindungen laden, um weiterhin mit ihnen zu arbeiten. Der folgende Code zeigt, wie alle Bindungen in einer Präsentation geladen und in der Konsole angezeigt werden.

async function loadBindings() {
    await PowerPoint.run(async (context) => {
        try {
            let myBindings = context.presentation.bindings;
            myBindings.load("items");
            await context.sync();

            // Log all binding IDs to console.
            if (myBindings.items.length > 0) {
                myBindings.items.forEach(async (binding) => {
                    console.log(binding.id);
                });
            }
        } catch (err) {
            console.error(err);
        }
    });
}

Fehlerbehandlung beim Löschen einer Bindung oder Form

Wenn ein Shape gelöscht wird, wird die zugehörige Bindung ebenfalls aus der PowerPoint-Bindungsauflistung entfernt. Alle Objektverweise auf die Bindung oder Form geben Fehler zurück, wenn Sie auf Eigenschaften oder Methoden für diese Objekte zugreifen. Achten Sie darauf, potenzielle Fehlerszenarien für ein gelöschtes Shape zu behandeln, wenn Das Add-In Bindungs- oder Shape-Objekte beibehält.

Der folgende Code zeigt einen Ansatz zur Fehlerbehandlung, wenn ein Bindungsobjekt auf eine gelöschte Bindung verweist. Verwenden Sie eine try/catch-Anweisung, und rufen Sie dann eine Funktion auf, um alle Bindungs- und Formverweise erneut zu laden, wenn ein Fehler auftritt.

async function getShapeFromBindingID(id) {
    await PowerPoint.run(async (context) => {
        try {
            const binding = context.presentation.bindings.getItemAt(id);
            const shape = binding.getShape();

            await context.sync();
            return shape;
        } catch (err) {
            console.log(err);
            return undefined;
        }
    });
}

Siehe auch

Wenn Sie die Aktualität von Shapes beibehalten, sollten Sie auch zOrder überprüfen. Weitere Informationen finden Sie unter der zOrderPosition-Eigenschaft .