Vorherige

Nächste

Übung – Arbeiten mit Arbeitsblättern und Add-In-Befehlen

Abgeschlossen

In dieser Übung lernen Sie, wie Sie die Kopfzeile der Tabelle, die Sie zuvor erstellt haben, fixieren, damit diese auch dann sichtbar bleibt, wenn der Benutzer in dem Arbeitsblatt einen Bildlauf nach unten ausführt. Außerdem erfahren Sie, wie Sie den Arbeitsblattschutz ein- und ausschalten.

Fixieren einer Tabellenkopfzeile

Wenn eine Tabelle so lang ist, dass der Benutzer einen Bildlauf durchführen muss, um einige Zeilen anzuzeigen, kann es sein, dass die Kopfzeile nicht mehr sichtbar ist. In diesem Abschnitt fixieren Sie die Kopfzeile der Tabelle, die Sie zuvor erstellt haben, damit diese auch dann sichtbar bleibt, wenn der Benutzer in dem Arbeitsblatt einen Bildlauf nach unten ausführt.

Fixieren der Kopfzeile der Tabelle

1. Öffnen Sie die Datei ./src/taskpane/taskpane.html.

2. Suchen Sie das <button>-Element für die Schaltfläche create-chart, und fügen Sie nach dieser Zeile das folgende Markup hinzu:

   <button class="ms-Button" id="freeze-header">Freeze Header</button><br/><br/>
   

3. Öffnen Sie die Datei ./src/taskpane/taskpane.js.

4. Suchen Sie im Office.onReady()-Methodenaufruf die folgende Zeile:

   document.getElementById("create-chart").onclick = createChart;
   

   Fügen Sie unmittelbar nach der Zeile den folgenden Code hinzu:

   document.getElementById("freeze-header").onclick = freezeHeader;
   

5. Fügen Sie die folgende Funktion am Ende der Datei hinzu:

   async function freezeHeader() {
     await Excel.run(async (context) => {
   
       // TODO1: Queue commands to keep the header visible when the user scrolls.
   
       await context.sync();
     })
     .catch(function (error) {
       console.log("Error: " + error);
       if (error instanceof OfficeExtension.Error) {
         console.log("Debug info: " + JSON.stringify(error.debugInfo));
       }
     });
   }
   

6. Ersetzen Sie in der freezeHeader()-Funktion TODO1 durch den folgenden Code:

   const currentWorksheet = context.workbook.worksheets.getActiveWorksheet();
   currentWorksheet.freezePanes.freezeRows(1);
   

   Hinweis

   • Die Worksheet.freezePanes-Auflistung ist eine Reihe von Bereichen im Arbeitsblatt, die angeheftet bzw. fixiert sind, wenn im Arbeitsblatt ein Bildlauf ausgeführt wird.
   • Die freezeRows()-Methode verwendet die Anzahl von Zeilen vom oberen Rand, die fixiert werden sollen, als Parameter. Wir übergeben 1, um die erste Reihe zu fixieren.

7. Überprüfen Sie, ob Ihre Änderungen im Projekt gespeichert wurden.

Testen des Add-Ins

1. Wenn der lokale Webserver bereits läuft und Ihr Add-In bereits in Excel geladen ist, fahren Sie mit Schritt 2 fort. Starten Sie andernfalls den lokalen Webserver, und laden Sie das Add-In quer:

   • Führen Sie zum Testen Ihres Add-Ins in Excel den folgenden Befehl im Stammverzeichnis Ihres Projekts aus. Damit wird der lokale Webserver gestartet (sofern er noch nicht ausgeführt wird), Excel wird geöffnet, und das Add-In wird in Excel geladen.

     npm start
     

   • Führen Sie den folgenden Befehl im Stammverzeichnis Ihres Projekts aus, um Ihr Add-In in Excel im Web zu testen. Wenn Sie diesen Befehl ausführen, wird der lokale Webserver gestartet (sofern er nicht bereits ausgeführt wird).

     npm run start:web
     

     Um das Add-In zu verwenden, öffnen Sie ein neues Dokument in Excel im Web, und laden Sie dann das Add-In quer, indem Sie den Anweisungen in Querladen von Office-Add-ins in Office im Web folgen.

2. Wenn der Add-In-Aufgabenbereich noch nicht geöffnet ist, wählen Sie auf der Registerkarte StartAufgabenbereich anzeigen aus.

3. Wenn die Tabelle, die Sie zuvor in diesem Lernprogramm hinzugefügt haben, im Arbeitsblatt vorhanden ist, löschen Sie sie.

4. Wählen Sie im Aufgabenbereich Tabelle erstellen aus.

5. Wählen Sie im Aufgabenbereich Kopfzeile fixieren aus.

6. Führen Sie im Arbeitsblatt einen Bildlauf nach unten aus, um zu sehen, dass die Kopfzeile der Tabelle oben sichtbar bleibt, wenn die oberen Zellen verschwinden.

Schützen eines Arbeitsblatts

In diesem Abschnitt fügen Sie eine weitere Schaltfläche zum Menüband hinzu, durch die, wenn sie ausgewählt wird, eine Funktion ausgeführt wird, die Sie zum Ein- und Ausschalten des Arbeitsblattschutzes definieren.

Konfigurieren Sie das Manifest, um eine zweite Menübandschaltfläche hinzuzufügen.

1. Öffnen Sie die Manifestdatei ./manifest.xml.

2. Suchen Sie das <Control>-Element. Dieses Element definiert die Schaltfläche Aufgabenbereich anzeigen auf dem Menüband Start, das Sie zum Starten des Add-Ins verwendet haben. Wir fügen eine zweite Schaltfläche zu der gleichen Gruppe auf dem Menüband Start hinzu.

   Fügen Sie das folgende Markup zwischen dem End-Steuerelementtag (</Control>) und dem End-Gruppentag (</Group>) hinzu.

   <Control xsi:type="Button" id="<!--TODO1: Unique (in manifest) name for button -->">
       <Label resid="<!--TODO2: Button label -->" />
       <Supertip>
         <Title resid="<!-- TODO3: Button tool tip title -->" />
         <Description resid="<!-- TODO4: Button tool tip description -->" />
       </Supertip>
       <Icon>
         <bt:Image size="16" resid="Icon.16x16"/>
         <bt:Image size="32" resid="Icon.32x32"/>
         <bt:Image size="80" resid="Icon.80x80"/>
       </Icon>
       <Action xsi:type="<!-- TODO5: Specify the type of action-->">
         <!-- TODO6: Identify the function.-->
       </Action>
   </Control>
   

3. Ersetzen Sie in der XML-Datei, die Sie gerade zur Manifestdatei hinzugefügt haben, TODO1 durch eine Zeichenfolge, die der Schaltfläche eine ID gibt, die innerhalb der Manifestdatei eindeutig ist. Da die Schaltfläche den Schutz des Arbeitsblattes ein- und ausschaltet, verwenden Sie ToggleProtection. Wenn Sie damit fertig sind, sollte das Starttag für das Control-Element wie folgt aussehen:

   <Control xsi:type="Button" id="ToggleProtection">
   

4. Die nächsten drei TODOs legen resid-Eigenschaften fest, die Abkürzungen für Ressourcen-IDs sind. Eine Ressource ist eine Zeichenfolge, und Sie erstellen diese drei Zeichenfolgen in einem späteren Schritt. Jetzt müssen Sie den Ressourcen IDs geben. Die Schaltfläche label sollte Toggle Protection heißen, aber die ID dieser Zeichenfolge sollte ProtectionButtonLabel sein, damit das Label-Element wie folgt aussieht:

   <Label resid="ProtectionButtonLabel" />
   

5. Das SuperTip-Element definiert die QuickInfo für die Schaltfläche. Der QuickInfo-Titel sollte derselbe wie die Bezeichnung der Schaltfläche sein, daher verwenden wir die gleiche Ressourcen-ID: ProtectionButtonLabel. Die QuickInfo-Beschreibung wird Click to turn protection of the worksheet on and off. Die ID sollte jedoch ProtectionButtonToolTip sein. Wenn Sie damit fertig sind, sollte das SuperTip-Element wie folgt aussehen:

   <Supertip>
     <Title resid="ProtectionButtonLabel" />
     <Description resid="ProtectionButtonToolTip" />
   </Supertip>
   

   Hinweis

   In einem Produktions-Add-In würden Sie nicht dasselbe Symbol für zwei unterschiedliche Schaltflächen verwenden. Zur Vereinfachung dieses Lernprogramms werden wir dies aber tun. Das Icon-Markup in dem neuen Control ist nur eine Kopie des Icon-Elements aus dem vorhandenen Control.

6. Der Typ des Action-Elements innerhalb des ursprünglichen Control-Elements, das bereits im Manifest vorhanden war, ist auf ShowTaskpane festgelegt, durch unsere neue Schaltfläche wird aber nicht der Aufgabenbereich geöffnet; es wird eine benutzerdefinierte Funktion ausgeführt, die Sie in einem späteren Schritt erstellen. Ersetzen Sie daher TODO5 durch den Aktionstyp für Schaltflächen, die benutzerdefinierte Funktionen auslösen. Das Starttag für das Action-Element sollte wie folgt aussehen:

   <Action xsi:type="ExecuteFunction">
   

7. Das ursprüngliche Action-Element weist untergeordnete Elemente auf, die eine Aufgabenbereich-ID und eine URL der Seite angeben, die im Aufgabenbereich geöffnet werden sollte. Ein Action-Element vom Typ ExecuteFunction weist aber ein einziges untergeordnetes Element auf, das den Namen der Funktion angibt, die das Steuerelement ausführt. Sie werden diese Funktion in einem späteren Schritt erstellen und diese toggleProtection nennen. Ersetzen Sie daher TODO6 durch das folgende Markup.

   <FunctionName>toggleProtection</FunctionName>
   

   Das gesamte Control-Markup sollte jetzt wie folgt aussehen:

   <Control xsi:type="Button" id="ToggleProtection">
       <Label resid="ProtectionButtonLabel" />
       <Supertip>
         <Title resid="ProtectionButtonLabel" />
         <Description resid="ProtectionButtonToolTip" />
       </Supertip>
       <Icon>
         <bt:Image size="16" resid="Icon.16x16"/>
         <bt:Image size="32" resid="Icon.32x32"/>
         <bt:Image size="80" resid="Icon.80x80"/>
       </Icon>
       <Action xsi:type="ExecuteFunction">
         <FunctionName>toggleProtection</FunctionName>
       </Action>
   </Control>
   

8. Führen Sie einen Bildlauf nach unten zum Abschnitt Resources des Manifests aus.

9. Fügen Sie das folgende Markup als untergeordnetes Element des bt:ShortStrings-Elements hinzu.

   <bt:String id="ProtectionButtonLabel" DefaultValue="Toggle Worksheet Protection" />
   

10. Fügen Sie das folgende Markup als untergeordnetes Element des bt:LongStrings-Elements hinzu.

    <bt:String id="ProtectionButtonToolTip" DefaultValue="Click to protect or unprotect the current worksheet." />
    

11. Speichern Sie die Datei.

Erstellen der Funktion, die das Blatt schützt

1. Öffnen Sie die Datei .\commands\commands.js.

2. Fügen Sie die folgende Funktion direkt nach der Funktion action() hinzu. Wir geben einen args-Parameter für die Funktion an, und die allerletzte Zeile der Funktion ruft args.completed auf. Dies ist eine Voraussetzung für alle Add-In-Befehle vom Typ ExecuteFunction. Dadurch wird der Office-Hostanwendung signalisiert, dass die Funktion abgeschlossen ist und dass die Benutzeroberfläche wieder reagieren kann.

   async function toggleProtection(args) {
     await Excel.run(async (context) => {
   
       // TODO1: Queue commands to reverse the protection status of the current worksheet.
   
       await context.sync();
     })
     .catch(function (error) {
       console.log("Error: " + error);
       if (error instanceof OfficeExtension.Error) {
         console.log("Debug info: " + JSON.stringify(error.debugInfo));
       }
     });
     args.completed();
   }
   

3. Fügen Sie die folgende Zeile am Ende der Datei ein:

   Office.actions.associate("toggleProtection", toggleProtection);
   

4. Ersetzen Sie in der toggleProtection()-Funktion TODO1 durch den folgenden Code. Dieser Code verwendet die Schutzeigenschaft des Arbeitsblattobjekts in einem standardmäßigen Umschaltmuster. TODO2 wird im nächsten Abschnitt erläutert.

   const sheet = context.workbook.worksheets.getActiveWorksheet();
   
   // TODO2: Queue command to load the sheet's "protection.protected" property from
   //        the document and re-synchronize the document and task pane.
   
   if (sheet.protection.protected) {
     sheet.protection.unprotect();
   } else {
     sheet.protection.protect();
   }
   

Hinzufügen von Code zum Abrufen von Dokumenteigenschaften in die Skriptobjekte des Aufgabenbereichs

In jeder Funktion, die Sie bisher in diesem Lernprogramm erstellt haben, haben Sie Befehle in die Warteschlange gestellt, um in das Office-Dokument zu schreiben. Jede Funktion endete mit einem Aufruf der context.sync()-Methode, die die Befehle in der Warteschlange zur Ausführung an das Dokument sendet. Der Code, den Sie im letzten Schritt hinzugefügt haben, ruft die sheet.protection.protected-Eigenschaft auf. Dies ist ein wesentlicher Unterschied zu den früheren Funktionen, die Sie geschrieben haben, da das sheet-Objekt nur ein Proxyobjekt ist, das im Skript Ihres Aufgabenbereichs vorhanden ist. Dieses weiß nicht, wie der tatsächliche Schutzstatus des Dokuments lautet, seine protection.protected-Eigenschaft kann daher keinen wirklichen Wert aufweisen. Sie müssen zuerst den Schutzstatus vom Dokument abrufen und diesen verwenden, um den Wert von sheet.protection.protected festzulegen. Nur dann kann sheet.protection.protected aufgerufen werden, ohne dass eine Ausnahme ausgelöst wird. Der Prozess des Abrufens besteht aus drei Schritten:

1. Einen Befehl zum Laden der Eigenschaften, die Ihr Code lesen muss, in der Warteschlange einreihen (d.h. abrufen).
2. Aufrufen der sync()-Methode des Kontextobjekts, um den Befehl in der Warteschlange zur Ausführung an das Dokument zu senden und die angeforderten Informationen zurückzugeben.
3. Da die sync()-Methode asynchron ist, müssen Sie sicherstellen, dass sie abgeschlossen ist, bevor Ihr Code die Eigenschaften aufruft, die abgerufen wurden.

Diese Schritte müssen immer dann abgeschlossen werden, wenn Ihr Code Informationen aus dem Office-Dokument lesen muss.

1. Ersetzen Sie in der toggleProtection()-Funktion TODO2 durch den folgenden Code:

   sheet.load('protection/protected');
   await context.sync();
   

   Hinweis

   • Jedes Excel-Objekt weist eine load()-Methode auf. Sie geben die Eigenschaften des Objekts an, das Sie als im Parameter als Zeichenfolge aus durch Kommas getrennten Namen lesen möchten. In diesem Fall ist die Eigenschaft, die Sie benötigen, eine Untereigenschaft der protection-Eigenschaft. Auf die Untereigenschaft wird fast genauso wie an anderer Stelle in Ihrem Code verwiesen, mit der Ausnahme, dass Sie einen Schrägstrich („/“) anstelle eines „.“ verwenden.
   • Um sicherzustellen, dass die Umschaltlogik, die liest sheet.protection.protected, erst ausgeführt wird, nachdem abgeschlossen sync ist und dem sheet.protection.protected der richtige Wert zugewiesen wurde, der aus dem Dokument abgerufen wird, muss sie nach dem await Operator kommen.

   Wenn Sie fertig sind, sollte die gesamte Funktion wie folgt aussehen:

   async function toggleProtection(args) {
       await Excel.run(async (context) => {
         const sheet = context.workbook.worksheets.getActiveWorksheet();
         sheet.load('protection/protected');
   
         await context.sync();
   
         if (sheet.protection.protected) {
             sheet.protection.unprotect();
         } else {
             sheet.protection.protect();
         }
   
         await context.sync();
       })
       .catch(function (error) {
         console.log("Error: " + error);
         if (error instanceof OfficeExtension.Error) {
           console.log("Debug info: " + JSON.stringify(error.debugInfo));
         }
       });
       args.completed();
   }
   

2. Vergewissern Sie sich, dass Sie alle am Projekt vorgenommen Änderungen gespeichert haben.

Testen des Add-Ins

1. Schließen Sie alle Office-Programme, einschließlich Excel.

2. Löschen Sie den Office-Zwischenspeicher, indem Sie den Inhalt des Zwischenspeicherordners löschen. Dies ist erforderlich, um die alte Version des Add-Ins vollständig vom Host zu entfernen.

   • Für Windows: %LOCALAPPDATA%\Microsoft\Office\16.0\Wef\.

   • Für macOS: ~/Library/Containers/com.Microsoft.OsfWebHost/Data/.

     Hinweis

     Wenn der Ordner nicht vorhanden ist, überprüfen Sie, ob die folgenden Ordner vorhanden sind, und löschen Sie den Inhalt des Ordners, wenn er gefunden wurde:

     • ~/Library/Containers/com.microsoft.{host}/Data/Library/Caches/, wobei {host} der Office-Host ist (z. B. Excel)
     • ~/Library/Containers/com.microsoft.{host}/Data/Library/Application Support/Microsoft/Office/16.0/Wef/, wobei {host} der Office-Host ist (z. B. Excel)
     • com.microsoft.Office365ServiceV2/Data/Caches/com.microsoft.Office365ServiceV2/

3. Wenn der lokale Webserver bereits ausgeführt wird, beenden Sie ihn, indem Sie den folgenden Befehl in der Eingabeaufforderung eingeben.

   npm stop
   

4. Da Ihre Manifestdatei bereits aktualisiert wurde, müssen Sie das Add-In unter Verwendung der aktualisierten Manifestdatei erneut querladen. Starten Sie den lokalen Webserver, und laden Sie das Add-In quer:

   • Führen Sie zum Testen Ihres Add-Ins in Excel den folgenden Befehl im Stammverzeichnis Ihres Projekts aus. Damit wird der lokale Webserver gestartet (sofern er noch nicht ausgeführt wird), Excel wird geöffnet, und das Add-In wird in Excel geladen.

     npm start
     

   • Führen Sie den folgenden Befehl im Stammverzeichnis Ihres Projekts aus, um Ihr Add-In in Excel im Web zu testen. Wenn Sie diesen Befehl ausführen, wird der lokale Webserver gestartet (sofern er nicht bereits ausgeführt wird).

     npm run start:web
     

     Um das Add-In zu verwenden, öffnen Sie ein neues Dokument in Excel im Web, und laden Sie dann das Add-In quer, indem Sie den Anweisungen in Querladen von Office-Add-ins in Office im Web folgen.

5. Wählen Sie auf der Registerkarte Start in Excel die Schaltfläche Arbeitsblattschutz umschalten aus. Die meisten Steuerelemente auf dem Menüband sind deaktiviert (und ausgegraut), wie im folgenden Screenshot dargestellt.

   

6. Wählen Sie eine Zelle so aus, als wollten Sie deren Inhalt ändern. In Excel wird eine Fehlermeldung angezeigt, die besagt, dass das Arbeitsblatt geschützt ist.

7. Wählen Sie erneut die Schaltfläche Arbeitsblattschutz umschalten aus, sodass die Steuerelemente erneut aktiviert werden und Sie die Zellenwerte wieder ändern können.

Zusammenfassung

In dieser Übung haben Sie gelernt, wie Sie die Kopfzeile der Tabelle, die Sie zuvor erstellt haben, fixieren, damit diese auch dann sichtbar bleibt, wenn der Benutzer in dem Arbeitsblatt einen Bildlauf nach unten ausführt. Außerdem haben Sie erfahren, wie Sie den Arbeitsblattschutz ein- und ausschalten.

Testen Sie Ihr Wissen

1.

Mit welcher der folgenden Optionen wird das nächste Arbeitsblatt in einer Arbeitsmappe angezeigt?

context.workbook.worksheets.getActiveWorksheet().getNext().activate()

context.workbook.worksheets.getCurrent().getNext().activate()

context.workbook.worksheets.getActiveWorksheet().activateNextWorksheet()

2.

Welche der folgenden Aktionen müssen Sie ausführen, um eine JavaScript-Funktion über eine Schaltfläche in der Menüleiste der Office-Anwendung aufzurufen, die im Manifest des Add-Ins definiert ist

Fügen Sie die JavaScript-Funktion in die JavaScript-Datei des Add-Ins ein. Diese Funktion muss sich im globalen Bereich befinden, damit sie von der Office.js-API direkt über das Menüband aufgerufen werden kann.

Erstellen Sie zunächst eine HTML-Datei, die Office.initialize implementiert und eine globale JavaScript-Funktion enthält. Verweisen Sie als nächstes im Abschnitt <Resources> des Manifests auf die Datei. Rufen Sie schließlich die Funktion mit dem <Action>-Typ ExecuteFunction auf, und geben Sie die Funktion anhand ihres Namens an.

Erstellen Sie zunächst eine HTML-Datei, die Office.initialize implementiert und eine globale JavaScript-Funktion enthält. Rufen Sie anschließend die Funktion mit dem <Action>-Typ ExecuteFunction auf, und geben Sie die Funktion anhand ihres Namens an.

Sie müssen alle Fragen beantworten, bevor Sie Ihre Arbeit überprüfen können.

Weiter