Webpaginas maken met Excel Web App mashups

Pagina's in dit artikel

Uitleg van de benodigde Javascript en html elementen

Natuurlijk kan je gebruik maken van de standaard html code optie (de code die begint met "<iframe"), maar er is ook de mogelijkheid om JavaScript te gebruiken om het Excel bestand in te voegen. En er is meer, je kunt vervolgens JavaScript gebruiken om:

Te reageren op gebeurtenissen (events) in het Excel bestand, zoals het Change event, dat wordt aangeroepen als een cel wordt gewijzigd
De waarde van een cel in het ingevoegde bestand wijzigen
Waarden uit cellen in het ingevoegde bestand uitlezen en die waarden invullen in formulier controls op je web pagina, zoals keuzelijstjes
Wat je maar kunt verzinnen...

Wat is er nodig?

De volgende elementen zijn nodig op de web pagina om via JavaScript een Excel Web App in te voegen:

Een <div> element welke als plaatsbepaling functioneert waar het web app control zal worden ingevoegd door de code;
Een Excel bestand in je skydrive folder die de juiste toegangsrechten heeft;
JavaScript code om dat bestand in het div element te plaatsen en om de events te activeren;

Hier kan je goede voorbeelden vinden: Excel Mashups

De webpagina moet de juiste document type declaratie hebben en geladen worden vanaf een web lokatie

De Javascript zal niet werken als je de pagina opent vanaf een lokale bron zoals een (externe) harde schijf, de pagina moet vanaf een webserver geladen worden. Tevens moet de juiste document type declaratie zijn ingesteld.

Dit is bijvoorbeeld een doc type declaratie die zou moeten werken:

<!DOCTYPE html>

html: Markeer waar het ingevoegde Excel object moet komen

Op de positie waar het ingevoegde Excel object moet verschijnen, plaats je een div element, zoals deze:

Pas de afmetingen aan zodat je Excel bestand (of het onderdeel erin dat je wilt tonen) goed past. Ik heb het div element chartDiv genoemd omdat dat hetgene is dat ik er ga weergeven, een grafiek uit mijn bestand.

Verwijs naar de Microsoft JavaScript bibliotheek, welke gemaakt is om met de Excel web app te werken

Javascript moet weten hoe met het Excel web app gebeuren te werken. Hiervoor is een verwijzing nodig naar de code bibliotheek die Microsoft hiervoor heeft gemaakt. Dit gaat met de volgende html code:

De rest van de JavaScript code is ingevat tussen de gebruikelijke tags:

File token

Het volgende dat je nodig hebt is een zogeheten file token, welke een unieke verwijzing is naar je Excel bestand in Skydrive. Dit filetoken wordt in de Javascript code geplaatst en kan worden gekopieerd vanuit het bestand invoegen dialoogvenster van Skydrive welke ik reeds heb besproken op de vorige pagina van dit artikel.

De file token van het voorbeeld bestand is:

SDB4A3FCAC9C7848C9!285/-5430218907388983095/t=0&s=0&v=!AK3ybHnbJCLh5H0

Niet iets dat je zou willen overtypen...

In JavaScript wordt middels deze regels een variabele gedeclareerd en wordt tevens de file token toegekend:

// Use this file token to reference the skydrive file in the Excel APIs
var fileToken = "SDB4A3FCAC9C7848C9!285/-5430218907388983095/t=0&s=0&v=!AK3ybHnbJCLh5H0";

Ook hebben we een variabele nodig die een verwijzing bewaart naar de Excel Web API (in het kort: ewa):

var ewaCht = null;

Laadt de Excel Web Application nadat de pagina is geladen

Vervolgens willen we dat de hele web pagina is geladen voordat we de Javascript willen starten die het Excel Web App object invoegt. Dit is niet moeilijk. Nog steeds hoort onderstaande code tussen de Script tags, net na de twee variabele declaraties die ik hiervoor toonde:

// Run the Excel load handler on page load.
if (window.attachEvent)
{
window.attachEvent("onload", loadEwaOnPageLoad);
} else
{
window.addEventListener("DOMContentLoaded", loadEwaOnPageLoad, false);
}

Al wat hier staat is "zodra de pagina geladen is, voer dan de routine loadEwaOnPageLoad uit".

De Excel Web Application laden

Zodra de web pagina is geladen wordt onderstaande functie aangeroepen:

function loadEwaOnPageLoad()
            {
            var props = {item: "Chart 2",
            uiOptions:
               {
               showDownloadButton: false,
               showGridlines: false,
               showRowColumnHeaders: false,
               showParametersTaskPane: false
               },
            interactivityOptions:
               {
               allowTypingAndFormulaEntry: true,
               allowParameterModification: true,
               allowSorting: false,
               allowFiltering: false,
               allowPivotTableInteractivity: false
               }
            };
// Embed workbook using loadEwaAsync
Ewa.EwaControl.loadEwaAsync(fileToken, "chartDiv", props, OnChartLoaded);
}

Het eerste dat deze code doet is de opties voor het EWA object opgeven, zoals of er al dan niet een download link mag worden weergegeven en of rasterlijnen aan of uit moeten staan. Ook permissies worden hier ingesteld.

Vervolgens wordt aan het Ewa object doorgegeven dat het to Excel bestand moet worden geladen en waar op de web pagina hij moet worden geplaatst ("chartDiv"). Dit gebeurt asynchroon, dus wordt er een functie (een call-back) opgegeven welke moet worden uitgevoerd zodra het Ewa object klaar is met het laden van het bestand. Deze functie is de OnChartLoaded functie (de functienaam is uiteraard vrij op te geven binnen de regels van JavaScript functienamen).

Een object verwijzing naar het geladen Ewa object instellen

Zodra het Ewa object klaar is met het laden van het bestand wordt onderstaande functie aangeroepen:

     function OnChartLoaded(asyncResult)
        {
        if (asyncResult.getSucceeded())
            {
            ewaCht = asyncResult.getEwaControl();
            }
        }

In het bovenstaande voorbeeld wordt een verwijzing naar het resulterende Ewa object opgeslagen in de ewaCht variabele, voor later gebruik in je code.

De volgende pagina beschrijft hoe je de Excel Web app met besturingselementen op de web pagina laat communiceren.

Vragen, suggesties en opmerkingen

Heeft u vragen, suggesties of opmerkingen? Gebruik dan dit formulier.

Mocht uw vraag niet direct relevant zijn voor deze pagina, maar een algemene Excel vraag betreffen, dan adviseer ik om deze hier te stellen: excelexperts.nl/forum/index.php.