Erstellen eines Mashups, das eine eingebettete Arbeitsmappe und Bing Maps verwendet

2023-03-21

Dieser Artikel führt Sie durch eine leistungsfähige webbasierten Mashup, die eine eingebettete Excel-Arbeitsmappe und Bing Maps kombiniert.

Informationen zu "Ziel-Explorer"

Der Ziel-Explorer ist ein Mashup, mit der Benutzer wählen Sie einen Bereich, einen Zieltyp (Ort oder Peters), ein bestimmtes Ziel innerhalb des Bereichs, und Lesen Sie Informationen zum Wetter oder die Anzahl der Besucher das Ziel nach Monat.

Wenn der Benutzer über die Benutzeroberfläche verschiedene Optionen auswählt, wird JavaScript Verarbeiten der Ereignisse und die Änderungen an der Arbeitsmappe auf OneDrive verwendet. Die Arbeitsmappe neu berechnet, basierend auf der die Änderungen, und die Ziel-Explorer benachrichtigt, wenn der Vorgang abgeschlossen ist Rückruffunktionen verwenden. Je nachdem, was der Benutzer geändert die Ziel-Explorer möglicherweise entweder rufen Sie weitere Daten in der Arbeitsmappe Reisen, aktualisieren die Ansicht der Bing-Karte, ausblenden die Diagramme oder Austauschen des Diagramms, die derzeit angezeigt wird.

Die Arbeitsmappe"Reise"

Die Ziel-Explorer hängt stark von einer eingebetteten Arbeitsmappe, die alle Zielnamen, statistische Daten für Wetter und Besucher Zahlen und zwei Diagramme zum Anzeigen von Wetterdaten für monatliche und monatliche Besucher Daten enthält.

JavaScript-API von Excel Services

Der Mashup verwendet der Excel Services-JavaScript-API, die Arbeitsmappe einbetten und damit interagieren. Wenn der Excel Services-JavaScript-API verwenden möchten, müssen Sie nur am Quellspeicherort API im Code verweisen. Nachdem Sie Zugriff auf die Excel Services-JavaScript-API haben, können Sie programmgesteuert einbetten und Arbeiten mit einer Excel-Arbeitsmappe.

Bing Maps-JavaScript-APIs

Auch mithilfe der Mashup der Bing Maps-API die jeweiligen Speicherorten auf die Arbeitsmappe innerhalb einer Bing-Karte ausgewählt angezeigt. Ebenso wie eine beliebige andere JavaScript-Bibliothek Sie müssen, lediglich Bezug der API-Bibliothek im Code müssen, um zu einer Bing-Karte in Ihre Mashup aufnehmen möchten.

Erstellen der Mashup "Ziel-Explorer"

Zum Erstellen dieses Mashup gefolgt wir 3 grundlegenden Schritte aus:

Speichern Sie die Arbeitsmappe auf OneDrive aus. Weitere Informationen finden Sie auf der OneDrive-Seite .
Einbetten der Arbeitsmappe klicken Sie auf der Seite an. Weitere Informationen zum Einbetten von Arbeitsmappen aus OneDrive finden Sie hier.
Kombinieren Sie es nach oben mit Bing Maps. Dieser Schritt wird in den folgenden Abschnitten ausführlicher behandelt.

Mashup Excel Services und Bing Maps

Nach dem Speichern der Arbeitsmappe in einem öffentlichen Ordner auf OneDrive und nach dem Einbetten der Arbeitsmappe auf der Hostwebseite wird die Bing Karten Funktionalität mit Interaktionen in der eingebetteten Arbeitsmappe kombiniert, um das Mashup des Ziel-Explorers zu erstellen.

Die Integration geschieht in den folgenden 3 Schritten:

Erstellen der Seitenstruktur für die mashup

Ein HTML-Auswahlsteuerelement auf der Webseite wird mit Daten aus der Travel-Arbeitsmappe aufgefüllt, wenn die Seite geladen wird oder wenn der Benutzer die aktuelle Region oder den Zieltyp ändert. Die Definition für dieses Auswahlsteuerelement ( Ziele ) wird in Codeausschnitt 1 angezeigt. 1 Codeausschnitt zeigt die Definition für die anderen Hauptelemente auch auf der Seite: ChartDiv, chartDiv2 und MapDiv. Div Diagrammelemente sind Container für die zwei Diagramme in der Arbeitsmappe Reisekosten definiert. Das Karte Div ist der Container für das Steuerelement Bing-Karte.

Codeausschnitt 1: Strukturieren der Webseite
```

    <select id="destinations" style="width: 150px" name="destinations"
      onchange="onDestinationChange()">
    </select>
    
    <div id="chartDiv" style="width: 483px; height: 318px"></div>
    <div id="chartDiv2" style="width: 483px; height: 318px; display: none"></div>
    
    <div id="mapDiv" style="position:relative; width:693px; height:400px;"></div>
    
```

Initialisierung die eingebettete Arbeitsmappe Diagramme und der Bing-Karte

Im nächsten Schritt wird die Excel-Komponenten und der Bing-Karte Initialisierung, wenn die Seite geladen. Um eine eingebettete Excel-Arbeitsmappe programmgesteuert zugreifen zu können, müssen Sie nach einer Dateitoken darauf verweisen. Informationen zum Abrufen des entsprechenden Dateitokens für Ihre Arbeitsmappe finden Sie https://msdn.microsoft.com/library/hh315812.aspx unter .

Abgeschlossener Ausführung des Codes in Codeausschnitt 2 drei Wichtigste Aufgaben im Page_Load -Ereignishandler aus. Zunächst wird ein Verweis auf die Travel-Arbeitsmappe eingerichtet, um das Diagramm mit dem Namen Chart 1 innerhalb des chartDiv-Elements auf der Webseite anzuzeigen. Zweites, ruft sie eine einfache Funktion mit dem Namen GetMap Initialisierung der Bing-Karte. Drittens wird ein zweiter Verweis auf die Travel-Arbeitsmappe erstellt, um das Diagramm mit dem Namen Chart 2 innerhalb des chartDiv2-Elements anzuzeigen.

Codeausschnitt 2: Initialisierung der Seite

// Use this file token to reference your OneDrive hosted workbook in Excel's APIs
var fileToken = "TOKEN TO YOUR WORKBOOK GOES HERE";
var map;
var ewaChart = null;
var ewaChart2 = null;

// Set the page event handlers for onload and unload.
if (window.attachEvent) {
  window.attachEvent("onload", Page_Load);
} else {
  // For some browsers window.attachEvent does not exist.
  window.addEventListener("DOMContentLoaded", Page_Load, false);
}

hideCharts();

// Page load event handler
function Page_Load() {
  // Load Excel Chart
  var props = {
  item: "Chart 1",
  uiOptions: {
    showParametersTaskPane: false
  },
  interactivityOptions: {
    allowTypingAndFormulaEntry: true,
    allowParameterModification: false,
    allowSorting: false,
    allowFiltering: false,
    allowPivotTableInteractivity: false
  }
  };
  Ewa.EwaControl.loadEwaAsync(fileToken, "chartDiv", props, onEwaChartLoaded);

  // Load the Bing map
  GetMap();

  // Load the 2nd Excel Chart
  var props = {
    item: "Chart 2",
    uiOptions: {
      showParametersTaskPane: false
    },
    interactivityOptions: {
      allowTypingAndFormulaEntry: true,
      allowParameterModification: false,
      allowSorting: false,
      allowFiltering: false,
      allowPivotTableInteractivity: false
    }
  };
  Ewa.EwaControl.loadEwaAsync(fileToken, "chartDiv2", props, onEwaChart2Loaded);
}

// Setup the Bing Map's initial view
function GetMap() {

map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{
  credentials: "YOUR CREDENTIALS",
  center: new Microsoft.Maps.Location(37.2802459560, -112.738963),
  mapTypeId: Microsoft.Maps.MapTypeId.road,
  zoom: 3
});

Erstellen Sie die entsprechenden Rückruffunktionen

Alle Aufrufe von Funktionen in der Excel Services-JavaScript-API nehmen in der Regel einen Rückruf als Parameter für die Funktion ein. Der Rückrufparameter ist der Name der Funktion in Ihrem JavaScript, die ausgeführt werden soll, wenn der Anruf an die JavaScript-API von Excel Services abgeschlossen ist. Sie können einen Rückruf, der in der Funktion EwaControl.loadEwaAsync in Codeausschnitt 2 verwendet finden Sie unter:
```
Ewa.EwaControl.loadEwaAsync(fileToken, "chartDiv", props, onEwaChartLoaded);
```
Der hier verwendete Rückruf ist onEwaChartLoaded. Dadurch wird die folgende Kette von Aufrufen der Excel Services JavaScript-API und Rückrufen im Ziel-Explorer gestartet. In dieser Kette werden folgende Rückrufe verwendet:
- onEwaChartLoaded() - speichert diese Funktion einen Verweis auf das Excel Web Access-Steuerelement, das im Diagramm zugeordnet. Nachdem das Steuerelement vorhanden ist, ruft sie die Methode getRangeA1Async() auf, um den Bereich abzurufen, der durch den Namen OutputTopFiveDetails dargestellt wird.
- onGotDetailRange() - gibt der Anruf an die getRangeA1Async() des Bereichs, nicht die Werte, damit Anrufe von dieser Rückruf die Methode getValuesAsync() zum Abrufen der Werte im Bereich zugeordnet.
- onGotDetailValues() - die Werte im Bereich zugeordnet werden in einer Variablen zur späteren Verwendung gespeichert und dann diese Methode ruft die folgenden Methoden innerhalb der Ziel-Explorer definiert:
- loadDestinations() - füllt das select-Element mit der Ziele im Bereich OutputTopFiveDetails
- updateMap() - Aktualisierungen die Karte, falls erforderlich
- updateChart() - aktualisiert das Diagramm bei Bedarf
Der Zweck der in Codeausschnitt 3 angezeigten Rückrufkette besteht darin, die auf der HTML-Seite angezeigten Daten zu aktualisieren. Es gibt eine weitere Kette von Rückruffunktionen, die zum Ändern von Daten in der Travel-Arbeitsmappe verwendet werden. Wenn Sie beispielsweise die Region von Nordamerika in Europa ändern, müssen einige Dinge geschehen, z. B. das Erneute Auffüllen der Liste der Ziele, das Aktualisieren der Karte und das Ausblenden der Diagramme. Das Erneute Auffüllen der Zielliste ist das erste, was geschehen muss, und dazu gehört das Ändern von Daten in Excel. Codeausschnitt 3 zeigt den Code für diese Aufgaben. Beachten Sie, dass die Funktion updateExcel() und ein zugeordneter Rückruf mit dem Namen onGotRange() die Aufgabe übernehmen, Werte auf dem Arbeitsblatt Eingabe der Travel-Arbeitsmappe zu ändern.

Codeausschnitt 3: Der Rückruf Kette zum Ändern von Eingaben in der Arbeitsmappe Reisen
```
// Event handler called when user selects a different region.
function onRegionChange() {
  currentDestination = '';
  var e = document.getElementById("regions");
  currentRegion = e.options[e.selectedIndex].text;
  updateExcel();
}

// Event handler called when user selects a different destination.
function onDestinationChange() {
  var select = document.getElementById('destinations');
  var i = select.selectedIndex;
  currentDestination = select.options[i].text;
  updateChart();
  updateMap(false);
}

// Event handler called when user selects a different destination type.
function onTypeChange(type) {
  currentDestination = '';
  currentDestinationType = type;
  updateExcel();
}

// Called from onTypeChange and onRegionChange when user selects a different destination type or region
function updateExcel() {
  ewaChart.getActiveWorkbook().getRangeA1Async("Input!Inputs", onGotRange, 0);
  ewaChart2.getActiveWorkbook().getRangeA1Async("Input!Inputs", onGotRange, 1);
}

// Callback - called from updateExcel - sets input values according to user selections
function onGotRange(result) {
  var range = result.getReturnValue();
  var values = new Array(2);
  values[0] = new Array(1);
  values[0][0] = currentRegion;
  values[1] = new Array(1);
  values[1][0] = currentDestinationType;
  range.setValuesAsync(values, null, null);

  // Initiate process of refreshing the script variable detailRangeValues
  if (result.getUserContext() == 0)
    ewaChart.getActiveWorkbook().getRangeA1Async("Output!OutputTopFiveDetails", onGotDetailRange, null);
}
```

Schlussbemerkung

Diese exemplarische Vorgehensweise bietet ein Beispiel für wie Web-Entwickler leistungsfähigen, interaktiven Mashups mithilfe von Excel Services und andere Technologien erstellen können.

Freigeben über

Erstellen eines Mashups, das eine eingebettete Arbeitsmappe und Bing Maps verwendet

Informationen zu "Ziel-Explorer"

Erstellen der Mashup "Ziel-Explorer"

Mashup Excel Services und Bing Maps

Schlussbemerkung

Zusätzliche Ressourcen