implementering af ansvarsperioder og produktdata på eget site · 2014. 12. 19. · byggebasen...

EG Data Inform

Byggebasen Javascript

Implementering af ansvarsperioder og

produktdata på eget site

Jens Karsø

2013

Indhold

Byggebasen javascript-plugin til DB12-site .......................................................................................................... 3

DB12-site kommunikationsmodel ................................................................................................................... 3

Skabelon .......................................................................................................................................................... 3

Download javascript ........................................................................................................................................ 3

Javascript:ProdSoeg.js + forside HTML ............................................................................................................ 4

Javascript:restAPI.js ......................................................................................................................................... 5

Søgning trin 1 ....................................................................................................................................................... 5

Eksempel på dannelse af en søgning: .......................................................................................................... 6

Søgning trin 2 ................................................................................................................................................... 8

Visning af produkter........................................................................................................................................ 9

Proxy.Search .................................................................................................................................................... 9

Produktdata og javascript .................................................................................................................................. 10

Eksempel: ...................................................................................................................................................... 10

Bemærk: ........................................................................................................................................................ 11

Bilag 1: ........................................................................................................................................................... 12

OBS:

TUN har skiftet navn til Danske Byggecentre – derfor kaldes det unikke nr, der betegner en vare, ikke

længere for tunnr. I stedet kaldes det for DB varenr.

Af hensyn til kapabilitet med eksterne systemer vil tunnr stadig benyttes i kode.

Byggebasen javascript-plugin til DB12-site På DB12-sitet benyttes der udelukkende javascript til kommunikation med byggebasens data. Disse

javascript-metoder er der mulighed for at implementere i sit eget site.

Følgende vejledning er en beskrivelse af hvordan DB12-sitet har implementeret javascripts. Derfor er alle

moduler og scripts, der stilles til rådighed, primære formål at opfylde DB12-sitets behov. Der kan derfor

komme ændringer af javascript, lagt på serveren og ændringer af de tilhørende webservices. Vi opfordrer til

at I sender kontaktinfo til [email protected] ved implementering på eget site, således at der kan sendes

advisering ved ændringer.

Det anbefales at udvikler downloader javascripts, studerer dem og implementere dem på eget site.

DB12-site kommunikationsmodel

prodSoeg.js

Byggebasen

RESTApi.js

Ovenstående model forsøger at beskrive de 2 javascripts og deres indbyrdes opgaver.

prodSoeg.js Holder styr på visning af indhold og sammenfatte oplysninger til kald.

Hvert kald til til RESTApi skal ledsages at en slutmetode (endMethod)

restAPI.js Sørger for kald til byggebasens web-service i REST.

restAPI.js holder også styr på aktuelle søgning. Kald til byggebasen kan foregå synkront eller

asynkront.

Scriptet indeholder også en meget simpel template generator.

Al kommunikation mellem server, moduler og hjemmeside er objekter formateret i JSON. Dvs. at det de kan

benyttes direkte i javascripts uden yderligere omformning.

Skabelon På adressen: http://test.DB12.dk/DB12.html findes en renset skabelon, som kan benyttes til baggrund for

videre udvikling af egen implemntering.

Download javascript Javascript kan downloades her

http://www.DB12.dk/scripts/ProdSog.js

http://www.DB12.dk/scripts/RESTApi.js

mailto:[email protected]

http://test.tun12.dk/tun12.html

http://www.tun12.dk/scripts/ProdSog.js

http://www.tun12.dk/scripts/RESTApi.js

Javascript:ProdSoeg.js + forside HTML Før javascriptene kan benyttes skal de initialiseres på siden, hvor de skal benyttes:

<html> <head> <title> </title>  <script type="text/javascript" language="javascript" src="Scripts/ProdSog.js"></script> <script type="text/javascript" language="javascript" src="Scripts/RESTApi.js"></script>

 <script type="text/javascript" language="javascript" src="Scripts/jquery-1.7.2.js"></script> <script type="text/javascript" language="javascript" src="Scripts/jquery-ui-1.8.21.custom.min.js"></script>

function onload() { init(); }

function init() { proxy.RESTPath = 'http://servicesBeta.byggebasen.dk/RESTByggeData.svc/'; objLib.restApi = RESTLib; } </script>

</head> <body onload=”javascript:init();”> </body> </html>

Ovenstående forbinder proxyen i respAPI til webservicen og forbinder objLib i ProdSog til restAPI

Bemærk:

Stierne for “scripts/ProdSoeg.js” og “scripts/RESTApi.js” er i forhold til eget site. Hvis der ønskes at henvise

til byggebasens server skal URL indtastes her.

På forsiden er der defineret en række felter som fra start er tomme, men skal fyldes med indhold.

Felterne skal døbes vha ID

Følgende felter er på DB12-sitet: <div id="ptvgTree"></div> - Felt til dannelse af træet for varegruppe/produkttype <div id="divMain"></div> - Felt til visning af Leverandører <div id="divStatus"></div> - Felt til visning af aktuelle status (fejl m.m.)

http://servicesbeta.byggebasen.dk/RESTByggeData.svc/%27%3B

På eget site er navne valgfrie, men javascriptet skal tilrettes med ændrede navne.

En søgning foregår typisk 2 trin:

1. På bagrund af søgemetode og søgetekst dannes der Varegruppe/Produkttype træet.

2. Ved klik på en produkttype foretages søgning på leverandøre der tilmeldt udvidet garanti og som

har vare i produkttypen

Ved hvert trin i søgningen, opdateres der en overskrift der opsummerer aktuelle søgning.

Javascript:restAPI.js Dette modul har 3 hovedopgaver (klasser):

1. Proxy Danner en proxy til kommunikation til serveren. Samt husker seneste søgning.

2. RESTLib Håndterer søgninger og kald til proxyen.

3. Templ Template håndtering i HTML .

Søgning trin 1 Der er 4 forskellig slags søgninger på DB12. (se figur)

BD varenr – Søger direkte på et BD varenr og er den eneste søgning der også viser et produkt.

Varegruppe og ProduktType – Søger i hele varegruppeplanen

Producent – Søger på producenter og leverandører.

Eksempel på dannelse af en søgning:

Når en bruger begynder at indtaste en søgning i søgefeltet. Er

tekstboksens HTML udformet på flg. måde.

<input type="text" id="tbSog" onkeyup="javascript:objLib.setUvisible(); RESTLib.sogProdukt(objLib.getTunUser(),objLib.getSogeMetode(),objLib.getSogeTekst(),objLib.e ndProduktSog);" /> <input type="radio" id="rdTunNr" name="sogemetode" value="Tunnr" />Tunnr <input type="radio" id="Radio2" name="sogemetode" value="Varegruppe" />Varegruppe <input type="radio" id="Radio6" name="sogemetode" value="Producent" checked="checked" />Producent <input type="radio" id="rdProduktType" name="sogemetode" value="ProduktType" />ProduktType <a class="knap" onclick="javascript: objLib.setUvisible(); RESTLib.sogProdukt(undefined,objLib.getSogeMetode(),objLib.getSogeTekst(),objLib.endProduktS og,false);">Søg</a>

For hver gang en bruger trykker en tast bliver metoden sogProdukt i ProdSoeg.js kaldt med 3 parametre

tilknyttet:

1. Søgemetode (Producent)

2. Søgetekst (tekstboks)

3. Slut metode ved svar fra server.

Søgemetoden tages fra valgte input-boks valuefelt. Derfor skal de have flg. navne:

Tunnr (bemærk at der benyttes den gamle betegnelse)

Varegruppe

Producent

ProduktType

Selve sogProdukt ser således ud:

sogProdukt: function (tunuser, sogeMetode, soegestreng, endMethod) {

proxy.Search.soegstreng = soegestreng; proxy.Search.sogemetode = sogeMetode; if (soegestreng.length > 3) { var obj = JSON.stringify({ tunuser: tunuser }) + JSON.stringify({ sogeMetode: sogeMetode

}) + JSON.stringify({ SoegStreng: soegestreng }); proxy.call("POST", "SogProduktREST/", true, endMethod, obj); } }

Bemærk at der i if sætningen først begyndes at søge, når der indtastet 4 tegn.

Sidste linje i metoden kalder proxyen asynkront ved parameteren ”true”. Parameteren ”endMethod”

angiver hvilken metode der skal kaldes, når svaret modtages fra serveren.

”endMethod” var er angivet til at kalde metode ”endProduktSog” i prodSoeg.js og ser således ud: endProduktSog: function (result) {

var ud = ''; var ni = document.getElementById('ptvgTree'); objLib.clearAllChilds('ptvgTree'); objLib.renderHeader();

if (result != null && result._vareGrupper != undefined) { for (b = 0; b < result._vareGrupper.length; b++) { var elem = tmpl("item_varegruppe", result._vareGrupper[b]); for (a = 0; a < result._vareGrupper[b]._produkttyper.length; a++) { result._vareGrupper[b]._produkttyper[a].vgNr = result._vareGrupper[b]._Nr; result._vareGrupper[b]._produkttyper[a].vgNavn = '\'' + result._vareGrupper[b]._Navn +

'\''; result._vareGrupper[b]._produkttyper[a].ptNavn = '\'' +

result._vareGrupper[b]._produkttyper[a]._Navn + '\''; elem += (tmpl("item_produkttype", result._vareGrupper[b]._produkttyper[a])); } ni.innerHTML += elem; } }

} objLib.setHtml('ptvgTree', ud); }

Obs: Ovenstående er en forsimplet kode og håndtere kun varegruppesøgning. Se ProdSog.js for den

endelige implementering.

Proxyen sørger automatisk for at kalde en angivet ”endMethod” og leverer serverens søgeresultat i

metodekaldet i parameteren ”result”

Linjen: var elem = tmpl("item_varegruppe", result.Result._vareGrupper[b]);

bruger en template kaldet ”item_varegruppe” til at danne de overordnede varegrupper i søgningen.

Linjen:

elem += (tmpl("item_produkttype",result.Result._vareGrupper[b]._produkttyper[a]));

Danner de tilhørende produkttyper for hver varegruppen ud fra HTML-template kaldet ”item_produkttype”

Inden template bliver behandlet, bliver result objektet modificeret en anelse, af hensyn til dannelse af

toplinjen (aktuelle søgning) og begrænsninger i javascript. (brug af anførselstegn og appostroffer).

Template for dannelse af en linje af produkttype, ser således ud:

</div> </script>

Visning af produkter Ved søgning direkte på et BD varenr vises produktet vha flg:

danProduktVisning: function (result) {

var elem = document.getElementById("divMain"); if (elem.firstChild != null) { elem.removeChild(elem.firstChild); objLib.clearAllChilds('divMain'); } var newdiv = document.createElement('div'); for (c = 0; c < result.getProduktSogResult.Result.length; c++) { newdiv.innerHTML += tmpl("item_tmpl", result.getProduktSogResult.Result[c]); } elem.appendChild(newdiv); }

Proxy.Search Objekt. Til håndtering af aktuelle søgning:

Indehold oplysninger for aktuel søgning og indstillinger for antal produkt pr side/visning.

Search: {

lev: null, Aktuelle leverandørnummer vg: null, Aktuelle varegruppenummer pt: null, Aktuells produkttypenr sogemetode: null, soegstreng: null, prPage: 15, Default 15 produkter pr side (udfaset) currentPage: 1, Aktuelle side (udfaset)

htmlID: null, Støtte element

vareGruppeNavn: null, produktTypeNavn: null, leverandoerNavn: null,

resultProd: null, Antal produkter i søgningen resultEndMethodProd: null, Slutmetode der skal danne visning resultPages: null, Antal sider (resultProd / prPgae) (udfaset) resultEndMethodPages: null Slutmetode der skal danne sidebladring }

Produktdata og javascript På sitet http://produktdata.danskebyggecentre.dk/ er det muligt at søge REACH, CE-Mærkning og andre

udvalgte katalogdataemner.

I bilag 1 er der vedhæftet et kodeeksempel, som udfører en søgning (se billede). Kodeeksemplet kan også

downloades på adressen: www.DB12.dk/test.html

Som det fremgår af eksemplet, benyttes restApi.js fra søgningen på udvidet ansvar på byggematerialer.

Eksemplet beskriver de 6 trin der udføres for at danne en komplet visning på

http://produktdata.danskebyggecentre.dk/

Proxy og angivelse af adresse på service sættes op i funktion ”init”

function init() {

proxy.RESTPath = 'http://servicesBeta.byggebasen.dk/RESTByggeData.svc/'; Sogning.Tunnr = 1505758; FindesREACH(Sogning.Tunnr);

}

Bemærk at på addressen 'http://servicesBeta.byggebasen.dk/RESTByggeData.svc’ forbeholdt

produktdatadata og en hyppigere opdatering. Det anbefales at benytte

'http://services.byggebasen.dk/RESTByggeData.svc’.

Samt læse yderlig information på http://services.byggebasen.dk/Default.aspx

Eksempel: Eksemplet beskriver 1. trin.

Her dannes et ”sog” object indeholdende tunnr der ønskes forespurgt på. Webservicen kaldes på metoden

”FindesReach” gennem proxyen, med angivelse af metoden ”EndFindesReach”, som ønskes kaldt når

webservicen returnere sit svar. /* 1. trin */ function FindesREACH(tunnr) {

AddText("1. trin: Undersøger om der findes reach-information","h2"); var sog = JSON.stringify({ tunnr: tunnr }); proxy.call("POST", "FindesReach/", true, EndFindesReach, sog);

} function EndFindesReach(result) {

AddText("JSON object:", "b"); AddText(JSON.stringify(result)); if (result.FindesReachResult == true) {

SogTunnr(Sogning.Tunnr); }

}


http://www.tun12.dk/test.html



http://servicesbeta.byggebasen.dk/RESTByggeData.svc

http://services.byggebasen.dk/RESTByggeData.svc

http://services.byggebasen.dk/Default.aspx

Bemærk: Trin 5 og 6 omhandler visning af produkt- og leverandørinformationer. Ønskes der en søgning hvor man

også kan søge på EAN (stregkode). Anbefales det at man flytter trin 5 op til at være trin 1 da denne søgning

også søger på EAN. Således får man også BD varenr (TUNNr) der skal bruges i de næste trin.

Bilag 1: Kode eksempel til produktdata:

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

<meta charset="utf-8" /> <title></title> <script type="text/javascript" lang="javascript"

src="http://www.DB12.dk/Scripts/RESTApi.js"></script>

<script>

var Sogning = { Tunnr: null, Dato: null }

function onload() { init(); }

function init() {

proxy.RESTPath = 'http://servicesBeta.byggebasen.dk/RESTByggeData.svc/'; Sogning.Tunnr = 1505758; FindesREACH(Sogning.Tunnr);

}

function AddText(text, tag) { var elem = document.getElementById('main'); if (tag!=undefined) elem.innerHTML += "<" + tag + ">" + text + " </" + tag + ">"; else elem.innerHTML += "<br />" + text; }

/* 1. trin */ function FindesREACH(tunnr) { AddText("1. trin: Undersøger om der findes reach-information","h2"); var sog = JSON.stringify({ tunnr: tunnr }); proxy.call("POST", "FindesReach/", true, EndFindesReach, sog); }

function EndFindesReach(result) { AddText("JSON object:", "b"); AddText(JSON.stringify(result)); if (result.FindesReachResult == true) { SogTunnr(Sogning.Tunnr); } }

/* 2. trin */ function SogTunnr(tunnr) {

http://www.w3.org/1999/xhtml

http://www.db12.dk/Scripts/RESTApi.js


AddText("2. trin: Findfoldere med reach-information på tunnr", "h2"); var sog = JSON.stringify({ tunnr: tunnr }); proxy.call("POST", "Folders/", true, EndSogTunnr, sog); }

function EndSogTunnr(result) { Sogning.Dato = result.FoldersResult[0].Name; AddText("JSON object:", "b"); AddText(JSON.stringify(result)); FilesInFolders(result.FoldersResult[0].FullName); }

/* 3. trin : filer i folder */ function FilesInFolders(Folder) { AddText("3. trin: Leder efter filer i folder:", "h2"); var sog = JSON.stringify({ Folder: Folder }); proxy.call("POST", "FilesInFolder/", true, EndFilesInFolders, sog); }

function EndFilesInFolders(result) { AddText("JSON object:", "b"); AddText(JSON.stringify(result)); AddText("<br/><br/>Test resultat:", "b"); AddText("<a href=\"http://produktdata.danskebyggecentre.dk//visemne.aspx?dato=" +

Sogning.Dato + "&tunnr=" + Sogning.Tunnr + "&file=" + result.FilesInFolderResult[0].Name + "\"/>Klik - for REACH</a>");

getAndreEmner(Sogning.Tunnr); }

/* 4. trin : andre emner */ function getAndreEmner(tunnr) { AddText("4. trin: Leder efter yderligere katalogdataemner:", "h2"); var sog = JSON.stringify({ tunnr: tunnr }); proxy.call("POST", "getREACHKatalogEmner/", true, endGetAndreEmner, sog); }

function endGetAndreEmner(result) { // document.writeln(JSON.stringify(result)); AddText("JSON object:", "b"); AddText(JSON.stringify(result)); AddText("<br/><br/>Test resultat:", "b"); for (var a = 0; a < result.getReachKatalogEmnerResult.length; a++) { switch (result.getReachKatalogEmnerResult[a].id) { case 22: AddText("<a href=\"http://

produktdata.danskebyggecentre.dk/VisEmne.aspx?file=ce_corkcomfort.pdf&dato=filarkiv&tunnr=15 05758&type=23\"/>Klik - for CE-mærkning </a>");

default: AddText("<a href=\"http://mobil.byggebasen.dk//KatHandler.ashx?tunnr=" +

result.getReachKatalogEmnerResult[a].tunnr + "&emneid=" + result.getReachKatalogEmnerResult[a].id + "\"/>Klik - for " + result.getReachKatalogEmnerResult[a].emne + " </a>");

} } getProdukt(Sogning.Tunnr);

http://produktdata.danskebyggecentre.dk/visemne.aspx?dato

http://mobil.byggebasen.dk/KatHandler.ashx?tunnr

}

/* 5. trin : hentProdukt */ function getProdukt(tunnr) { AddText("5. trin: Henter produkt:", "h2"); var sog = JSON.stringify({ tunnr: tunnr }); proxy.call("POST", "getSingleProdukt/", true, endProdukt, sog); }

function endProdukt(result) { AddText("JSON object:", "b"); AddText(JSON.stringify(result));

getLeverandoer(result.getSingleProduktResult.TUNBRUGERNR); }

/* 6. trin : Henter leverandør oplysninger */ function getLeverandoer(levnr) { AddText("6. trin: Henter producentinformationer:", "h2"); var sog = JSON.stringify({ levnr: levnr }); proxy.call("POST", "getLeverandoer/", true, endLeverandoer, sog); }

function endLeverandoer(result) { AddText("JSON object:", "b"); AddText(JSON.stringify(result)); }

</script>

</head> <body onload="init();">

<h1>Produktdata - test</h1> <div id="main">

</div>

</body> </html>

implementering af ansvarsperioder og produktdata på eget site · 2014. 12. 19. · byggebasen...

Documents