Most Valuable Professional


View Jan Karel Pieterse's profile on LinkedIn subscribe to rss feed
Subscribe in a reader

Subscribe to our mailing list

* indicates required

Audit !!!

Probeer onze RefTreeAnalyser
de beste Excel formule auditing tool.

Cursussen

Excel VBA Masterclass (Engels)
Excel VBA voor Financials

Third party tools

Speed up your file

FastExcel
The best tool to optimise your Excel model!

Repair your file

Stellar Phoenix Excel Repair
Best tool to repair corrupt Excel sheets and objects
Home > Nederlandse site > Artikelen > Excel Web App Mashups > JavaScript
This page in English

Webpaginas maken met Excel Web App mashups

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:

Wat is er nodig?

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

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:

<div id="chartDiv" style="width: 500px; height: 500px"></div>

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:

<script language="javascript" src="http://r.office.microsoft.com/r/rlidExcelWLJS?v=1&amp;kip=1" type="text/javascript"></script>

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

<script language="javascript" type="text/javascript"> Alle Java code die hieronder is getoond staat hier </script>

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: www.eileenslounge.com.

Uw naam (verplicht veld):

Uw e-mail adres (Niet verplicht, dit adres wordt niet getoond)

Uw verzoek of commentaar:

Als u VBA code in uw commentaar plaatst, gebruik dan [VB] tags: [VB]Uw code[/VB].