1. No category

EG Data Inform
Byggebasen Javascript
Implementering af ansvarsperioder og
produktdata på eget site
Jens Karsø
2013
Indhold
Byggebasen javascript-plugin til DB12-site ....................................................................................................... 2
DB12-site kommunikationsmodel ................................................................................................................. 2
Skabelon ........................................................................................................................................................ 2
Download javascript ...................................................................................................................................... 2
Javascript:ProdSoeg.js + forside HTML .......................................................................................................... 3
Javascript:restAPI.js ....................................................................................................................................... 4
Søgning trin 1 ..................................................................................................................................................... 4
Eksempel på dannelse af en søgning: ........................................................................................................ 5
Søgning trin 2................................................................................................................................................. 7
Visning af produkter ..................................................................................................................................... 8
Proxy.Search .................................................................................................................................................. 8
Produktdata og javascript.................................................................................................................................. 9
Eksempel: ...................................................................................................................................................... 9
Bemærk: ...................................................................................................................................................... 10
Bilag 1: ......................................................................................................................................................... 11
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 byggebasen@eg.dk 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
Javascript:ProdSoeg.js + forside HTML
Før javascriptene kan benyttes skal de initialiseres på siden, hvor de skal benyttes:
<html>
<head>
<title>
</title>
<!--Indlæaser javascript filer-->
<script type="text/javascript" language="javascript" src="Scripts/ProdSog.js"></script>
<script type="text/javascript" language="javascript" src="Scripts/RESTApi.js"></script>
<!--Indlæser JQuery, til brug for autocomplete ved leverandørsgning-->
<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.)
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
2. RESTLib
3. Templ
Danner en proxy til kommunikation til serveren. Samt husker seneste søgning.
Håndterer søgninger og kald til proxyen.
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:
<script type="text/html" id="item_produkttype">
<span class="ptDiv" id="<#=obj._Nr#>_<#=obj.vgNr#>"
onclick="javascript:objLib.vgClick(<#=obj._Nr#>,<#=obj.vgNr#>, <#=obj.vgNavn#>,
<#=obj.ptNavn#> , '<#=obj._Nr#>_<#=obj.vgNr#>');" ><span
class="ptDiv2"><#=obj._Navn#></span><span class="ptDiv3"><#=obj._Nr#></span></span>
</script>
Søgning trin 2
Efter dannelsen af varegrupper og produkttyper – klikkes der på en produkttype for at søge
efterleverandører og/eller producenter
I templaten ”item_produkttype” bliver der indsat et span-objekt med en tilhørende onlclick event, som
kalder metoden vgClick:
vgClick: function (pt, vg, vgNavn, ptNavn, id) {
proxy.Search.vareGruppeNavn = vgNavn;
proxy.Search.produktTypeNavn = ptNavn;
objLib.setHeader(vg, pt);
var result = objLib.restApi.sogLevProduk(undefined, pt, vg, objLib.getSogeMetode(),
objLib.getSogeTekst(), objLib.endVisLeverandoerer);
}
Ovenstående opdatere search-objektet med aktuelle søgning og kalder sogLevProdukt.
SogLevProdukt kalder serveren og danner indhold til templaten ”item_udv_lev” hvor leverandør vises
Templaten ”item_udv_lev” ser således ud:
<script type="text/html" id="item_udv_tmpl">
<div style="clear:both; height:40px;width:790px;">
<div class="col2-1Header-Firma" >
<#=obj.Navn#>
</div>
<div class="col2-1Header-Adresse">
<#=obj.Adresse#>
</div>
<div class="col2-1Header-Postnr-by">
<#=obj.Postnr#>&nbsp;
<#=obj.By#>
</div>
<div class="col2-1Header-Tlf">
<#=obj.Telefonnr#>
</div>
<div class="col2-1Hehader-Ansvarsperiode">
<#=obj.AnsvarsPeriod#>
</div>
<div class="col2-1Header-SeVarer">
<span class="levDiv" id="<#=obj.tunbruger#>"
onclick="javascript:objLib.levClick(<#=obj.tunbruger#>, <#=obj.ProduktTypeId#>,
<#=obj.VareGruppeId#>, objLib.getSogeTekst(), <#=obj.tunbruger#>);">Se varer</span>
</div>
<br/>
</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,
vg: null,
pt: null,
sogemetode: null,
soegstreng: null,
prPage: 15,
currentPage: 1,
htmlID: null,
Aktuelle leverandørnummer
Aktuelle varegruppenummer
Aktuells produkttypenr
Default 15 produkter pr side (udfaset)
Aktuelle side (udfaset)
Støtte element
vareGruppeNavn: null,
produktTypeNavn: null,
leverandoerNavn: null,
resultProd: null,
resultEndMethodProd: null,
resultPages: null,
resultEndMethodPages: null
}
Antal produkter i søgningen
Slutmetode der skal danne visning
Antal sider (resultProd / prPgae) (udfaset)
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&oslash;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);
}
}
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&oslash;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) {
AddText("2. trin: Findfoldere med reach-information p&aring; 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);
}
/*
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>