Créer une application web hybride qui utilise un classeur incorporé et Bing Cartes

Cet article vous guide dans une puissante sur le Web application Web hybride qui combine un classeur Excel incorporé et Bing Maps.

À propos de l'Explorateur de Destination » »

L'Explorateur de Destination est une application Web hybride qui permet à l'utilisateur choisissez une région, un type de destination (ville ou park), une destination spécifique dans la région, puis affichez les informations météorologiques ou le nombre de visiteurs de la destination par mois.

Lorsque l'utilisateur sélectionne différentes options de l'interface utilisateur, JavaScript est utilisé pour traiter les événements et de transmettre les modifications apportées au classeur sur OneDrive. Le classeur recalcule elle-même en se basant sur les modifications et vous avertit de l'Explorateur de Destination lorsqu'elle est terminée à l'aide de fonctions de rappel. Selon que l'utilisateur a changé, l'Explorateur de Destination peut obtenir davantage de données à partir du classeur de voyage, mettre à jour l'affichage de la carte Bing, masquer les graphiques ou remplacez le graphique qui ne s'affiche.

« Le classeur voyage »

L'Explorateur de Destination dépend essentiellement un classeur incorporé contenant tous les noms destination, statistiques pour météo et les chiffres de visiteur et deux graphiques pour afficher les données météorologiques mensuel et données visiteur mensuelles.

API JavaScript Excel Services

L'application Web hybride utilise l'API JavaScript Excel Services pour incorporer le classeur et d'interagir avec lui. Pour utiliser l'API JavaScript Excel Services, il vous suffit de faire référence à l'emplacement de source de l'API dans votre code. Une fois que vous avez accès à l'API JavaScript Excel Services, vous pouvez incorporer et travailler avec un classeur Excel par programme.

API JavaScript cartes Bing

L'application Web hybride utilise également l'API Bing Maps pour afficher les emplacements sélectionnés dans le classeur à l'intérieur d'une carte Bing. À l'instar d'une autre bibliothèque JavaScript, il vous suffit est référence la bibliothèque de l'API dans votre code afin d'inclure une carte Bing dans votre application Web hybride.

Création de l'application Web hybride « Destination l'Explorateur »

Pour créer cette application Web hybride, nous suivi 3 étapes de base :

  1. Stockez le classeur sur OneDrive. Trouver plus d'informations sur la page OneDrive .
  2. Incorporer le classeur dans la page. Trouver plus d'informations sur l'incorporation de classeurs à partir de OneDrive ici.
  3. Combiner il avec Bing Maps. Cette étape est traitée plus en détail dans les sections suivantes.

Application Web hybride Excel Services et cartes Bing

Après avoir stocké le classeur dans un dossier public sur OneDrive et après l’incorporation du classeur sur la page web hôte, la fonctionnalité Bing Cartes est combinée avec les interactions sur le classeur incorporé pour créer l’application Web web mashup de l’Explorateur de destination.

L'intégration s'est-il passé dans les 3 étapes suivantes :

  1. Créer la structure de page pour l'application Web hybride

    Un contrôle de sélection HTML sur la page web est rempli avec les données du workbook Travel lors du chargement de la page ou chaque fois que l’utilisateur modifie la région actuelle ou le type de destination. La définition de ce contrôle select ( destinations ) est présentée dans l'extrait de code 1. Extrait de code 1 indique également la définition pour les autres éléments clés sur la page : chartDiv, chartDiv2 et mapDiv. Les éléments div du graphique sont conteneurs de deux graphiques définis dans le classeur de voyage. La balise div carte est le conteneur pour le contrôle de carte Bing.

    Extrait de code 1 : structurer la page web

    <!-- HTML omitted for brevity -->
        <select id="destinations" style="width: 150px" name="destinations"
          onchange="onDestinationChange()">
        </select>
        <!-- HTML omitted for brevity -->
        <div id="chartDiv" style="width: 483px; height: 318px"></div>
        <div id="chartDiv2" style="width: 483px; height: 318px; display: none"></div>
        <!-- HTML omitted for brevity -->
        <div id="mapDiv" style="position:relative; width:693px; height:400px;"></div>
        <!-- HTML omitted for brevity -->
    
  2. Initialisation les graphiques de classeur incorporé et la carte Bing

    L'étape suivante consiste à initialisation les composants Excel et la carte Bing Map lors du chargement de la page. Pour accéder par programme à un classeur Excel incorporé, vous devez y faire référence par un jeton de fichier. Voir https://msdn.microsoft.com/library/hh315812.aspx pour plus d'informations sur l'obtention du jeton de fichier approprié pour votre classeur.

    Le code Extrait 2 s'exécute trois tâches principales dans le Gestionnaire d'événements Page_Load. Tout d’abord, il établit une référence au workbook Travel pour afficher le graphique nommé Chart 1 à l’intérieur de l’élément chartDiv sur la page web. Ensuite, il appelle une fonction simple nommée GetMap initialisation de la carte Bing. Enfin, il crée une seconde référence au classeur voyage pour afficher le graphique nommé graphique 2 à l'intérieur de l'élément chartDiv2.

    Extrait de code 2: Initialisation de la Page

    // 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
    });
    
  3. Créer les fonctions de rappel approprié

    Tous les appels aux fonctions de l'API JavaScript Excel Services prennent généralement un rappel en tant que paramètre à la fonction. Le paramètre de rappel est le nom de la fonction dans votre code JavaScript qui doit être exécuté l'issue de l'appel à l'API JavaScript Excel Services. Vous pouvez voir un rappel utilisé dans la fonction EwaControl.loadEwaAsync Extrait 2 :

    Ewa.EwaControl.loadEwaAsync(fileToken, "chartDiv", props, onEwaChartLoaded);
    

    Le rappel utilisé ici est onEwaChartLoaded. Cette action lance la chaîne suivante d'appels à l'API JavaScript Excel Services et les rappels dans l'Explorateur de Destination. Les rappels utilisés dans cette chaîne sont :

    • onEwaChartLoaded() - cette fonction enregistre une référence à Excel Web Access contrôle associé le graphique. Après avoir le contrôle, il appelle la méthode getRangeA1Async() pour obtenir la plage représentée par le nom OutputTopFiveDetails .
    • onGotDetailRange() - l'appel vers getRangeA1Async() renvoie la plage, et non les valeurs afin que ce rappel appelle la méthode getValuesAsync() pour obtenir les valeurs associées à la plage.
    • onGotDetailValues() - les valeurs associées à la plage sont stockés dans une variable pour une utilisation ultérieure, puis cette méthode appelle les méthodes suivantes définis dans l'Explorateur de Destination :
    • loadDestinations() - remplit l'élément select avec les destinations au sein de la plage OutputTopFiveDetails
    • updateMap() - met à jour le mappage si nécessaire
    • updateChart() - met à jour le graphique si nécessaire

    L'objectif de la chaîne de rappels illustré 3 extrait de code est mise à jour les données affichées dans la page HTML. Il existe une autre chaîne des fonctions de rappel permet de modifier les données dans le classeur de voyage. Par exemple, si vous modifiez la région en Amérique du Nord en Europe, plusieurs choses à se produire tels que remplir à nouveau la liste des destinations, mise à jour de la carte et masquer les graphiques. Remplir à nouveau la liste de destination est la première chose qui doit se produire et cela entraîne la modification des données dans Excel. 3 extrait illustre le code pour ces tâches. Notez que la fonction nommée updateExcel() et un rappel associé nommé onGotRange() gèrent la tâche de modification des valeurs d'entrée une feuille de calcul du classeur voyage.

    Extrait 3: Chaîne de la modification d'entrées dans le classeur de voyage rappel

    // 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);
    }
    

Conclusion

Cette procédure pas à pas donne un exemple de la façon dont les développeurs web peuvent créer des applications Web hybrides riches et interactives à l'aide d'Excel Services et autres technologies.