1 3 Toegepaste informatica MIS Afstudeerwerk Verslag afstudeerwerk Michel Lampo Afstudeerwerk MIS pg. 1 van 34 KHLeuven, dept. G & T, 3Ti2 Inhoudsopga...
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 ideas@work, 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
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 e´ 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 e´ 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
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 Ideas@Work 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
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 Ideas@work 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¨eerde plaatsen worden ge¨ınstaleerd. Ik heb echter de standaard waarden geaccepteerd. 7
Figuur 2.1: Appian installatie
Figuur 2.2: Appian installatie: keuze van componenten
Afstudeerwerk MIS
pg. 8 van 34
KHLeuven, dept. G & T, 3Ti
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¨eren naar ”jboss-5.0.1.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 http://www.mysql.com/downloads/connector/j/.
2.4
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 192.168. 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 2 3
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¨eerd 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
Figuur 2.3: Appian login
Afstudeerwerk MIS
pg. 10 van 34
KHLeuven, dept. G & T, 3Ti
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
Wekelijks
Verwittig werknemers
Vul timesheet & forecast in
nee
Gegevens opslaan
Review timesheet & forecast
OK?
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
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
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 e´ e´ 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¨eerd. 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
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 Ideas@work: • generiek toepasbaar op verschillende databases; • parameters in te stellen in linkse configuratiebalk; • autocomplete; • onderscheid tussen display value en opgeslagen waarde.
15
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.
4.3.1
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.
4.3.2
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 e´ e´ 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
4.5
Stap per stap
Nog even stap voor stap meer in detail de code overlopen die uitgevoerd wordt:
4.5.1
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 2 3 4 5 6 7 8 9 10 11
Alle dropdowns op de pagina die autocompletefunctie moeten krijgen moeten overlopen worden en e´ e´ n voor e´ e´ 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 2 3 4 5 6 7 8 9
function autocompleteSetup() { $(’.autocomplete:not(.hidden)’).each(function() { setupAutocompleteElement(this); }); ... }
Afstudeerwerk MIS
pg. 17 van 34
KHLeuven, dept. G & T, 3Ti
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 2 3 4
function setupAutocompleteElement(element) { var dropdownid = element.id; $(element).addClass(’hidden’); $(element).before(’’);
5 6 7 8 9 10 11 12 13 14 15
var combo = new dhtmlXCombo(’div_’ + dropdownid, ’input_’ + dropdownid, 200); var values = new Array(); $(’#’ + dropdownid + ’ option’).each(function() { values.push([$(this).val(), $(this).text()]); }); combo.addOption(values); combo.setComboValue($(element).val()); combo.enableFilteringMode(true); }
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.
4.5.4
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. Listing 4.4: Geselecteerde waarde opslaan 1 2
function autocompleteSetup() {
Afstudeerwerk MIS
pg. 18 van 34
KHLeuven, dept. G & T, 3Ti
3 4 5 6 7 8 9 10 11 12 13 14 15
$(’.autocomplete:not(.hidden)’).each(function() { setupAutocompleteElement(this); }); $(’.submitButton’).click(function() { $(’.autocompleteDiv’).each(function() { var dropdownid = this.id.substring(4); var value = $(’#’ + this.id + ’ .dhx_combo_input’).each(function () { autocompleteSelect(dropdownid, $(this).val()); }); }); }); }
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.
4.7.1
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 2 3 4 5 6 7 8 9
10
<%@ include file="/portal/include/include_java.jsp" %>
