3 Toegepaste informatica MIS Afstudeerwerk Verslag afstudeerwerk. Michel Lampo. Afstudeerwerk MIS pg. 1 van 34 KHLeuven, dept.

Transcriptie

1 3 Toegepaste informatica MIS Afstudeerwerk Verslag afstudeerwerk Michel Lampo Afstudeerwerk MIS pg. 1 van 34 KHLeuven, dept. G & T, 3Ti

2 Inhoudsopgave 1 Inleiding Inleiding Opdracht Planning van het werk Documentatie Dankwoord Appian server setup Inleiding Installatie JDBC Licentie Opstarten van de server Inloggen Business Process modelleren Opdracht Basis versie proces Databank BPMN in Appian Proces element configuratie Formulieren in Appian Form element Opdracht Vereisten Opzet van het element Eerste probeersel: textveld Als tweede: Dropdown zelf omzetten dhtmlx Stap per stap Oproepen convertie Overlopen van autocomplete elementen Omzetten naar combo Geselecteerde waarden terugzenden Limitaties van dit element Installeren van het element Single element Lijst element

3 Lijst van figuren 1.1 Appian forum login Appian forum documentatie Appian installatie Appian installatie: keuze van componenten Appian login Basisversie proces: Rapportering tijdsbesteding Projects tabel Timesheets tabel Forecasts tabel

4 1 Inleiding 1.1 Inleiding Ik heb er voor gekozen mijn afstudeerwerk te doen in Appian. We hadden tijdens Capita Selecta reeds enkele beelden gezien hadden van dit programma. Direct had ik interesse in dit programma. Toen nadien bleek dat het bedrijf dat die presentatie had gegeven, graag iemand had gehad om een werk te maken met Appian heb ik deze kans met beide handen genmoen. 1.2 Opdracht Voor ik het uitgevoerde werk en de problemen beschrijf, eerst een kleine inleiding over de opdracht: Business process modeleren voor het ingeven van gewerkte tijden voor verschillende projecten Form element programmeren die autocomplete functie aanbied voor gegevens uit een externe databank Verdere uitleg over de inhoud van deze punten staat aan het begin van de respectievelijke hoofdstukken. 4

5 1.3 Planning van het werk Om te zorgen dat het werk afgeraakte heb ik direct een paar deadlines opgesteld. Opzetten server : 1 dag Modeleren Business process : 1 week Form element programmeren : 2 weken 1.4 Documentatie De documentatie voor Appian moet maar op 1 plaats gezocht worden: het Appian Forum. Hier is een dicussie-forum, een wiki met de documentatie per rol (Server administrator, developer, application designer, web portal user) en ook applicaties die door andere gebruikers geschreven zijn en die in een eigen systeem kunnen worden geïmporteerd. Figuur 1.1: Appian forum login Voor de rest valt niet veel te vinden (met bijvoorbeeld Google). Dat zorgt ervoor dat je snel alles vindt; alles staat op die éne website. Maar anderzijds beperkt dit wel de hoeveelheid informatie. Van vele andere programmas vindt je vaak andere websites waar je nuttige informatie vindt die meer beantwoorden aan je vraag. Vooral bij het 2de deel van de opdracht; het maken van een nieuw form element; miste ik goede tutorials en help files. De éne wikipagina over het schrijven van form elementen geeft een maar magere introductie. Veel van het leren bestaat uit het ontcijferen van code van aanwezige elementen. Aangezien ook van de gebruikte api s geen informatie te vinden is betekent dit dat je in veel bestanden naar de aanwezige methodes moet gaan zoeken om te begrijpen hoe de aanwezige code werkt. Afstudeerwerk MIS pg. 5 van 34 KHLeuven, dept. G & T, 3Ti

6 Figuur 1.2: Appian forum documentatie 1.5 Dankwoord Voor ik met de rest van mijn werk begin wil ik nog een woord van dank schrijven voor de mensen die mij hebben begeleid. Vanuit zijn dit Jan Stinissen en Bart de Wulf die de nodige uren in mij hebben geïnvesteerd. Ook wil ik Griet Barrezeele van de KHLeuven danken voor de begeleiding van het school uit. Afstudeerwerk MIS pg. 6 van 34 KHLeuven, dept. G & T, 3Ti

7 2 Appian server setup 2.1 Inleiding Op de moment van dat ik mijn eerste uitleg kreeg over wat de opdracht inhield heb ik de keuze gekregen tussen enkele mogelijkheden voor het draaien van de Appian server. lokaal, op een eigen computer. Windows 32 of 64 bit of Linux 64 bit; op een server van via vpn; hosted versie, Appian Anywhere, SaaS versie van Appian. Ik heb er voor gekozen om de server lokaal te installeren zodat ik ook ervaring krijg met het opzetten van BI servers. En het maakt het ook mogelijk te werken zonder internet. Omdat linux op zich minder geheugen inneemt dan windows en mijn computer slechts 2 gigabyte ram heeft heb ik er ook voor gekozen om de server te draaien op een 64 bit linux machine. 2.2 Installatie De installatie van Appian houdt niet veel in. Het enige waarvoor moet worden gezorgd dat java JDK 1.6 geïnstalleerd is. Daarna is het enkel een kwestie van de installer uit te voeren en de wizard te volgen. De verschillende stappen zijn het invullen van het installatie paswoord, het selecteren van de onderdelen (Appian en JBoss server) en de locatie voor deze 2 servers. In een productie of testomgeving binnen een bedrijf zullen deze op gespecifiëerde plaatsen worden geïnstaleerd. Ik heb echter de standaard waarden geaccepteerd. 7

8 Figuur 2.1: Appian installatie Figuur 2.2: Appian installatie: keuze van componenten Afstudeerwerk MIS pg. 8 van 34 KHLeuven, dept. G & T, 3Ti

9 2.3 JDBC Tijdens de opdracht moest ik werken met een externe mysql databank. Om hiermee te communiceren moest de jdbc connector worden geïnstalleerd. Het enige dat daarvoor moest gebeuren is de connector downloaden en de jar copiëren naar jboss ga/server/default/lib/. Daarna is het mogelijk de smart service te gebruiken die connectie maakt naar een databank. De jdbc connector voor een mysql databank kan gedownload worden van Licentie Om de server te kunnen starten moet een licentiefile aanwezig zijn. Deze werd verkregen door contact op te nemen met Appian. Eerst werd een tijdelijke licentie aangevraagd die op ieder linux systeem werkt en die 1 week geldig was. Om een langere licentie aan te vragen was het nodig om de hosts file aan te passen zodat de computer in het IW.LOCAL domein zit en een ip adres heeft in de range. Omdat dit ongeveer 3 uur van mijn tijd in beslag heeft genomen geef ik hier maar een listing van mijn uiteindelijke /etc/hosts bestand. Listing 2.1: hosts file 1 # hostname heimaey.iw.local added to /etc/hosts by anaconda HEIMAEY.IW.LOCAL localhost.localdomain localhost. localdomain localhost 3 ::1 localhost.localdomain localhost.localdomain localhost6 localhost6.localdomain6 HEIMAEY.IW.LOCAL localhost 2.5 Opstarten van de server Voor het starten van de server moeten 2 delen gestart worden. De in de server/ scripts directory aanwezige start-suite.sh start de services die gebruikt worden. Voor deze services te kunnen starten moet een licentie geïnstalleerd zijn. Het tweede deel is de webserver starten. Wanneer de standaard jboss gebruikt wordt is dit het run.sh bestand in de bin/jboss.../jboss.../bin directory. Dit deel duurt bij mij rond de 3 minuten, wanneer mijn computer het ipadres niet toegewezen heeft gekregen dat in de hostfile gespecifiëerd staat duurt dit rond de 8 minuten en is de server niet juist opgestart. 2.6 Inloggen Om te kunnen beginnen werken moet je eerst nog inloggen. Bij een niet aangepaste configuratie is deze login op poort 8080, op de pagina /suite/designer. Afstudeerwerk MIS pg. 9 van 34 KHLeuven, dept. G & T, 3Ti

10 Figuur 2.3: Appian login Afstudeerwerk MIS pg. 10 van 34 KHLeuven, dept. G & T, 3Ti

11 3 Business Process modelleren 3.1 Opdracht Het eerste echte deel van mijn opdracht was het modelleren van een business process in Appian voor het ingeven van gewerkte uren. Iedere vrijdag moeten alle werknemers die hun timesheets moeten ingeven verwittigd worden. Iedere werknemer vult per project de gewerkte uren voor iedere dag en een voorspelling voor de komende 4 weken. Daarna moet de respectievelijke verantwoordelijke de uren goedkeuren. Als de timesheet wordt afgekeurd wordt deze teruggestuurd naar de werknemer met eventueel een opmerking. Als iedereen zijn timesheet heeft ingevuld krijgt HR een verwittiging dat de timesheets zijn ingevuld, zodat ze weten wanneer ze kunnen beginnen hun rapporten te genereren. 3.2 Basis versie proces Om een beter zicht te krijgen over het proces heb ik hieronder de flow uitgetekend. Nog even toelichten dat iedere werknemer in een bepaalde groep de timesheets moet invullen en dat de respectievelijke supervisor degene is die de review doet. Ook wil ik nog duidelijk maken dat HR en Management pas op de hoogte gesteld zullen worden wanneer alle werknemers hun timesheets voor die week zijn ingevuld en goedgekeurd. 11

12 Wekelijks Verwittig werknemers Vul timesheet & forecast in Review timesheet & forecast nee OK? Gegevens opslaan ja Verwittig Management en HR Figuur 3.1: Basisversie proces: Rapportering tijdsbesteding 3.3 Databank Appian kan op zichzelf functioneren maar toch kan data van en naar externe databanken worden geschreven. In dit project wordt een mysql databank gebruikt om een lijst van projecten bij te houden. Alsook de gepresteerde uren en de voorspelling voor de komende 4 weken. Ik heb zelf de databank mogen ontwerpen er rekening mee houdende dat het eenvoudig moet zijn om er rapporten op te maken. Afstudeerwerk MIS pg. 12 van 34 KHLeuven, dept. G & T, 3Ti

13 Figuur 3.2: Projects tabel Figuur 3.3: Timesheets tabel Figuur 3.4: Forecasts tabel Afstudeerwerk MIS pg. 13 van 34 KHLeuven, dept. G & T, 3Ti

14 3.4 BPMN in Appian Het modelleren van een process in Appian gebeurt volledig grafisch in de browser. De notatie van de process en is en subset van BPMN. De taken worden echter als allemaal verschillende types beschouwd, de zogenaamde smart services, in plaats van één generiek type te zijn dat wordt geconfigureerd voor een bepaalde taak. De aanwezige smart services laten toe zowat alles in Appian op te vragen en aan te passen: users; documenten; communicatie;... Daarnaast zijn er ook services voorzien om te communiceren met een externe databank of webservice (op basis van de WSDL). Het is voor een programmeur ook mogelijk zelf smart services bij te programmeren, dat was echter niet nodig in de scope van dit werk en daar heb ik dus ook geen verder onderzoek naar gedaan. Alle configuratie gebeurt door dubbel te klikken op een element waardoor een getabd configuratiescherm verschijnt. 3.5 Proces element configuratie De configuratie van alle elementen gaat volgens een standaard patroon. In de eerste tab wordt de naam en eventuele commentaar gedefiniëerd. De volgende tab is de configuratie van de variabelen, het opslaan van waarden die in dat element worden gebruikt of aangemaakt en die oventueel moeten worden opgeslagen in proces variabelen. Een waarde die in een proces variabele wordt opgeslagen is ook beschikbaar in de volgende stappen van het proces. Als er een formulier verbonden is aan dat element kan deze in de derde tab worden ingesteld. Het opmaken van de het formulier gebeurt echter in een ander scherm, meer hierover later. De andere tabs stellen het schedulen, toewijzing en andere opties in. 3.6 Formulieren in Appian Net zoals het modelleren van processen is het opmaken van formulieren grafisch te doen in de browser. Afstudeerwerk MIS pg. 14 van 34 KHLeuven, dept. G & T, 3Ti

15 4 Form element 4.1 Opdracht Dit tweede deel van de opdracht bestond er uit een autocomplete tekstveld te maken met gegevens die uit een externe bron kunnen komen. Er bestaan autocomplete-achtige elementen in Appian genaamd pickers. Die geven echter alleen de mogelijkheid specifieke gegevens (gebruikers, documenten,...) die in Appian zelf zitten opgeslagen te gebruiken als doel. Hier was het primaire doel projectnamen die in een externe databank zitten te gebruiken als data. In dit hoofdstuk wordt het woord select en dropdown door mekaar gebruikt. Dropdown is de naam die Appian geeft aan een element dat een lijst van gegevens toont om een selectie te maken. Een select is net hetzelfde maar is de naam die het heeft in html. 4.2 Vereisten De vereisten voor het form element zoals deze werd gegeven door generiek toepasbaar op verschillende databases; parameters in te stellen in linkse configuratiebalk; autocomplete; onderscheid tussen display value en opgeslagen waarde. 15

16 4.3 Opzet van het element Vanwege de vereiste van het onderscheid tussen de getoonde waarden en opgeslagen waarden ben ik uitgegeaan van een dropdown-element. Een dropdownelement bevat namelijk al deze waarden. Het enige dat dan moet gebeuren is een textveld met autocomplete functie tonen in plaats van een select Eerste probeersel: textveld Als eerste heb ik geprobeerd een textveld uit te breiden zodat er lijsten van data als javascript worden aangemaakt met de gegevens. Met de beperkte documentatie die beschikbaar is op de forum van Appian over het maken van form elementen heb ik echter niet gevonden hoe dit mogelijk is Als tweede: Dropdown zelf omzetten Het tweede dat ik heb geprobeerd was een dropdown (html select) te gebruiken. Dat maakte ik dan verborgen door de css class hidden toe te voegen en dan daarvoor een textveld toe te voegen. Aan dat textveld kon ik dan autocomplete functie toevoegen en de waarden gebruiken die in de select zaten. Wanneer een waarde geselecteerd wordt moet dan wel deze waarde overgezet worden naar de dropdown. Zodat de waarde teruggegeven worden naar de server. Wegens te weinig kennis van javascript kon ik zelf de autocomplete functie toevoegen. Geen enkel van de libraries die ik heb geprobeert wilde werken. Uiteindelijk was er één library, dhtmlx, dat wel wilde werken maar wel wat andere problemen gaf. 4.4 dhtmlx De combo van dhtmlx is een element dat autocomplete kan ondersteunen. Deze combo kan op 2 manieren worden geïnistialiseerd worden: de id van het select element meegeven dat moet worden geconverteerd; de id meegeven van een div waar de combo in gemaakt moet worden gemaakt. Hoewel het op het eerste zicht gemakkelijk leek om de combo te laten converteren vanaf een select was dit toch niet ideaal. Echter, door op deze manier de convertie te doen wordt de oorspronkelijke select verwijdert. Dat zorgt er voor dat de waarde niet kan teruggegeven worden naar de server. Wat er dus moest gedaan worden is een div aanmaken voor de select. De eigenlijke select verbergen en een combo laten genereren in de net aangemaakte div. Daarna moeten nog de waarden uit de select worden gehaald en toegevoegd worden aan de combo. Uiteindelijk moet de waarde ook nog van de combo naar de select teruggebracht worden wanneer een nieuwe waarde wordt geselecteerd. Afstudeerwerk MIS pg. 16 van 34 KHLeuven, dept. G & T, 3Ti

17 4.5 Stap per stap Nog even stap voor stap meer in detail de code overlopen die uitgevoerd wordt: Oproepen convertie Wanneer een autocomplete element in de form zit moet dit worden geconverteerd. Om te zorgen dat dit kan gebeuren moet de javascript aangeroepen worden wanneer het formulier geladen wordt. Omdat ajax gebruikt wordt kan de convertie niet gebeuren na het laden van de pagina. Ik heb dus een aanroep naar de initialisatie methode geplaatst in de template voor het autocomplete element. Listing 4.1: Autocomplete template 1 <div id="legend" class="legend">autocomplete<span class="required">*</ span></div> 2 <div id="fields" class="fields cloneable"> 3 <label id="autocompletecontrollabel" name="autocompletecontrollabel" for="dropdown" class="displaylabel autocompletelabel"> 4 <select id="autocompletecontrol" data="autocompletecontrol" class=" select autocomplete"></select> 5 </label> 6 <p id="instructions" class="instructions noncloneable"></p> 7 <p id="errormessage" class="errormessage"></p> 8 <script type="text/javascript"> 9 autocompletesetup(); 10 </script> 11 </div> Overlopen van autocomplete elementen Alle dropdowns op de pagina die autocompletefunctie moeten krijgen moeten overlopen worden en één voor één worden omgezet. Om te weten welke elementen dit zijn is aan de template de autocomplete class toegevoegd aan de select (Zie Autocomplete template listing regel 4). Al deze elementen worden overlopen maar, aangezien er meerdere autocomplete elementen op de pagina kunnen zijn en de code dus meerdere keren kan worden aangeroepen worden enkel select elementen met de autocomplete class genomen die de hidden class niet hebben. Deze zijn namelijk al verborgen, wat betekend dat ze ook al omgezet is. Listing 4.2: Autocomplete elementen overlopen 1 function autocompletesetup() { 2 3 $(.autocomplete:not(.hidden) ).each(function() { 4 setupautocompleteelement(this); 5 }); } Afstudeerwerk MIS pg. 17 van 34 KHLeuven, dept. G & T, 3Ti

18 4.5.3 Omzetten naar combo Het omzetten van een select element naar een dhtmlx combo kan nog altijd niet direct gebeuren en bestaat dus uit verschillende stappen: select-elementen verbergen door css class hidden toevoegen; div toevoegen voor het te converteren element waar de combo in kan gemaakt worden; combo aanmaken; waarden uit de select halen en aan de combo toevoegen; geselecteerde waarde uit de select halen en in de combo zetten; autocomplete functionaliteit geven aan de combo. Listing 4.3: Autocomplete initialiseren 1 function setupautocompleteelement(element) { 2 var dropdownid = element.id; 3 $(element).addclass( hidden ); 4 $(element).before( <div name="div_ + dropdownid + " id="div_ + dropdownid + " class="autocompletediv" ></div> ); 5 6 var combo = new dhtmlxcombo( div_ + dropdownid, input_ + dropdownid, 200); 7 8 var values = new Array(); 9 $( # + dropdownid + option ).each(function() { 10 values.push([$(this).val(), $(this).text()]); 11 }); 12 combo.addoption(values); 13 combo.setcombovalue($(element).val()); 14 combo.enablefilteringmode(true); 15 } Als dit gedaan is hebben we autocomplete elementen in plaats van dropdowns, wanneer we een waarde selecteren wordt deze echter niet terug in de dropdown gezet zodat wanneer de form gesubmit wordt nog altijd dezelfde waarde geselecteerd is Geselecteerde waarden terugzenden In het tweede deel van de setup hangen we aan de submit knop van het formulier een event die voor alle autocomplete elementen de nieuwe waarde in de dropdown terugzet zodat deze kan teruggezonden worden in het formulier. Daarvoor overlopen we alle divs die we bij het initialiseren hebben aangemaakt, navigeren vanaf daar naar het input veld waar de waarde wordt opgeslagen en plaatsen deze in de bijbehorende dropdown. 1 function autocompletesetup() { 2 Listing 4.4: Geselecteerde waarde opslaan Afstudeerwerk MIS pg. 18 van 34 KHLeuven, dept. G & T, 3Ti

19 3 $(.autocomplete:not(.hidden) ).each(function() { 4 setupautocompleteelement(this); 5 }); 6 $(.submitbutton ).click(function() { 7 $(.autocompletediv ).each(function() { 8 var dropdownid = this.id.substring(4); 9 var value = $( # + this.id +.dhx_combo_input ).each(function () { 10 autocompleteselect(dropdownid, $(this).val()); 11 }); 12 }); 13 }); } 4.6 Limitaties van dit element In Internet Explorer wil het overlopen van de elementen met de class autocomplete niet werken. Geen enkele select wordt gevonden. De setup methode wordt aangeroepen maar de query voor het overlopen van de elementen geeft geen enkele waarde terug. Een mogelijke verklaring voor dit probleem is het gebruik van frames. Het is mogelijk dat de code, die geladen wordt door het buitenste frame, niet aan de componenten kan die in een iframe worden geladen. 4.7 Installeren van het element Als alle bestanden op hun plaats staan (volledige source code in de appendix) moet deze nog in de lijst met elementen worden opgenomen Single element Om het in de lijst met vrijstaande componenten op te nemen moet het toegevoegd worden aan het tools.jsp bestand in de forms directory (regel 10 van de tools.jsp listing). Listing 4.5: Toolbar form elementen: tools.jsp 1 <%@ include file="/portal/include/include_java.jsp" %> 2 <div id="toolscontainer" class="tabbed-container"> 3 <ul class="anchors"> 4 <li><a href="#toolbarsection1">standard Inputs</a></li> 5 <li><a href="#toolbarsection2">special Inputs</a></li> 6 <li><a href="#toolbarsection3">layout & Info</a></li> 7 </ul> 8 <div id="toolbarsection1" class="buttonsection fragment"> 9 <button inputtype="text" class="forminput gridinput"><p:img page="/ forms/img/inputpalette/standardinputs/singleline.gif" alt="text. Click or drag to add to form." /><span>text</span></button> 10 <button inputtype="autocomplete" class="forminput gridinput"><p:img page="/forms/img/inputpalette/standardinputs/autocomplete.gif" alt="autocomplete. Click or drag to add to form." /><span> Autocomplete</span></button> Afstudeerwerk MIS pg. 19 van 34 KHLeuven, dept. G & T, 3Ti

20 11 <button inputtype="number" class="forminput gridinput"><p:img page= "/forms/img/inputpalette/standardinputs/number.gif" alt="number. Click or drag to add to form." /><span>number</span></button> 12 <button inputtype="paragraph" class="forminput"><p:img page="/forms /img/inputpalette/standardinputs/paragraph.gif" alt="paragraph. Click or drag to add to form." /><span>paragraph</span></ button> Lijst element Om het element ook in een grid te gebruiken zijn er nog een paar aanpassingen nodig. Als eerste moet in de code voor het grid element 1 het autocomplete element toegevoegd worden (regel 5 van de onderstaande listing). Listing 4.6: Uittreksel listing grid.cdf window.componentsutils.formgrid.getgridinputtypes = function() { 3 var gridinputtypes = { 4 text : Text, 5 autocomplete : Autocomplete, 6 longtext : Paragraph, 7 number : Number, 8 knowledge_center : Knowledge Center, 9 content : Documents & Folders, 10 community : Community, 11 people : People, 12 page : Portal Page, 13 discussion : Discussion, Address, 15 _recipient : Recipient, 16 image : Image, 17 link : Link, 18 dropdown : Dropdown, 19 truefalse : True/False, 20 message : Message 21 }; 22 return gridinputtypes; 23 }; Net zoals losstaande elementen moeten deze autocomplete elementen worden geïnitialiseerd. Omdat de aanmaak van elementen in een grid op een andere manier gebeurt moet er nog een regel javascript worden toegevoegd aan de form template 2. Helemaal onderaan de template van het form element: jaction.val( Submit ); 3 } 4 return result; 5 } 1 forms - js - components - grid.cdf 2 forms - templates - controls - form.jsp Listing 4.7: Uittreksel listing form.jsp Afstudeerwerk MIS pg. 20 van 34 KHLeuven, dept. G & T, 3Ti

21 6 7 // initialisatie van de autocomplete elementen binnen grids. 8 autocompletegridsetup(); 9 10 </script> Afstudeerwerk MIS pg. 21 van 34 KHLeuven, dept. G & T, 3Ti

22 A Timesheet proces Afdruk van de door Appian gegenereerde documentatie van het basisproces. 22

23 B Timesheet sub proces Afdruk van de door Appian gegenereerde documentatie van het sub-proces, het proces dat voor iedere werknemer in de groep wordt uitgevoerd. 23

24 C Autocomplete form element C.1 autocomplete.html De template voor het autocomplete element. Overgenomen van het dropdown element. Listing C.1: forms - templates - controls - autocomplete.html 1 <div id="legend" class="legend">autocomplete<span class="required">*</ span></div> 2 <div id="fields" class="fields cloneable"> 3 <label id="autocompletecontrollabel" name="autocompletecontrollabel" for="dropdown" class="displaylabel autocompletelabel"> 4 <select id="autocompletecontrol" data="autocompletecontrol" class=" select autocomplete"></select> 5 </label> 6 <p id="instructions" class="instructions noncloneable"></p> 7 <p id="errormessage" class="errormessage"></p> 8 <script type="text/javascript"> 9 autocompletesetup(); 10 </script> 11 </div> 24

25 C.2 autocomplete config.jsp De configuratie-form voor het autocomplete element. Overgenomen van het dropdown element. Listing C.2: forms - templates - config - autocomplete config.jsp 1 <%@ include file="/portal/include/include_java.jsp" %> 2 <c:import url="/forms/templates/snippets/header.jsp" charencoding="utf -8"> 3 <c:param name="fieldtype" value="autocomplete"/> 4 </c:import> 5 <div class="configpanetools"> 6 <c:import url="/forms/templates/snippets/delete.jsp" charencoding=" UTF-8"> 7 <c:param name="componentname" value="field"/> 8 </c:import> 9 </div> <div class="scrollableconfig"> <c:import url="/forms/templates/snippets/general.jsp" charencoding="utf -8"> 14 <c:param name="labelname" value="field Label"/> 15 <c:param name="showinstructions" value="true"/> 16 </c:import> 17 <c:import url="/forms/templates/snippets/id.jsp" charencoding="utf-8"/> 18 <c:import url="/forms/templates/snippets/options.jsp" charencoding="utf -8"/> 19 <c:import url="/forms/templates/snippets/choices.jsp" charencoding="utf -8"/> 20 <c:import url="/forms/templates/snippets/savevalueas.jsp" charencoding= "UTF-8"/> 21 <c:import url="/forms/templates/snippets/display.jsp" charencoding="utf -8"/> 22 <c:import url="/forms/templates/snippets/labelposition.jsp" charencoding="utf-8"/> 23 <c:import url="/forms/templates/snippets/customcss.jsp" charencoding=" UTF-8"/> 24 <c:import url="/forms/templates/snippets/validation.jsp" charencoding=" UTF-8"/> 25 <c:import url="/forms/templates/snippets/eventrules.jsp" charencoding=" UTF-8"/> 26 <c:import url="/forms/templates/snippets/common.jsp" charencoding="utf -8"/> 27 </div> 28 <script type="text/javascript"> 29 window.validateconfiguration = window.formdesigner. ValidateConfiguration.radio; 30 </script> Afstudeerwerk MIS pg. 25 van 34 KHLeuven, dept. G & T, 3Ti

26 C.3 autocomplete.cdf De logica achter het autocomplete element voor het autocomplete element: definiëren van de templates, initialiseren. Overgenomen van het dropdown element. Listing C.3: forms - js - components - autocomplete.cdf 1 /** Template Map **/ 2 window.build.templatemap.autocomplete = { 3 control : "forms/templates/controls/autocomplete.html", 4 config : "forms/templates/config/autocomplete_config.jsp" 5 }; 6 7 /** Initialize **/ 8 window.initialize.autocomplete = function(configdata) { 9 configdata.importchoices = literal ; 10 configdata.choices = { 11 entries:[{label: Choice 1, id: }], 12 selected:[0] 13 }; 14 configdata.defaultvalue = null; 15 configdata.subtype = text ; 16 configdata.multiple = false; 17 configdata.readonly = false; 18 }; /** Read **/ 21 window.read.autocomplete = function(value, configdata) { 22 ComponentsUtils.updateDefaultValuesFromChoices(value, configdata); 23 }; /** Build **/ 26 window.build.single.autocomplete = function(componentdom, configdata, cdomptrs) { 27 window.build.element(componentdom, configdata, cdomptrs); // determine id 30 var componentid = window.build.design? configdata.key : configdata. id; 31 var compdomid = window.build.util.getuniquedomid(configdata.namespace, componentid); $(cdomptrs[ fields ]).removeclass( cloneable ); 34 $(cdomptrs[ instructions ]).removeclass( noncloneable ); var templatecontrol = cdomptrs[ autocompletecontrol ]; 37 var controlid = autocompletecontrol_ + compdomid; 38 var controlattr = { 39 id :controlid, 40 data :cdomptrs[ autocompletecontrol ].getattribute( data ), 41 class :cdomptrs[ autocompletecontrol ].getattribute( class ) 42 }; 43 cdomptrs[ autocompletecontrollabel ].setattribute( for, controlid); 44 var selectbox = createnamedelement( select, componentid, controlattr ); 45 $(templatecontrol).before(selectbox).remove(); 46 cdomptrs[ autocompletecontrol ] = selectbox; // retrieve choices (entries and selected) Afstudeerwerk MIS pg. 26 van 34 KHLeuven, dept. G & T, 3Ti

27 49 var choices = window.componentsutils.autocomplete.getchoices( configdata); //Handle multiple values 52 var multiple; 53 if (typeof configdata.multiple!= undefined && configdata.multiple === true ){ 54 selectbox.setattribute( multiple, true); 55 selectbox.setattribute( size, 4); 56 multiple = true; 57 } else { 58 selectbox.removeattribute( multiple ); 59 selectbox.setattribute( size, 0); 60 multiple = false; 61 } //Populate dropdown values 64 window.componentsutils.autocomplete.populatedropdown(selectbox, choices, 0, single, multiple); //Handle Readonly. Remove readonly if readonly is false at runtime. 67 if(!window.build.design && configdata.readonly!= true ){ 68 selectbox.removeattribute( readonly ); 69 } //Handle Disabled 72 if(typeof configdata.disabled!= undefined && configdata.disabled === true ){ 73 selectbox.setattribute( disabled, true); 74 } else { 75 selectbox.removeattribute( disabled ); 76 } 77 }; /** Build List **/ 80 window.build.list.autocomplete = function(componentdom, configdata, cdomptrs) { 81 window.build.all(componentdom, configdata); // Handle Header 84 var header = window.build.util.grid.buildheader(componentdom, configdata, cdomptrs); var controls = [cdomptrs[ autocompletecontrol ]]; var jcomponentdom = $(componentdom); 89 if (window.build.design) { 90 jcomponentdom.empty(); 91 jcomponentdom.append(header); 92 } else { 93 var componentid = configdata.id; 94 var compdomid = window.build.util.getuniquedomid(configdata. namespace, componentid); 95 var controlid = autocompletecontrol_ + compdomid; // retrieve choices (entries and selected) 98 var choices = window.componentsutils.autocomplete.getchoices( configdata); // fix choices.selected # if (configdata.importchoices === "data") { Afstudeerwerk MIS pg. 27 van 34 KHLeuven, dept. G & T, 3Ti