15 – 16 September 2010, at the Lancaster London, Backbase is attending the Gartner Portals, Content & Collaboration Summit. Visit our booth or attend our presentation: “Portal in Practice: Success with User Experience in Online Banking” held by Jouk Pleiter, CEO of Backbase.
Het vooraanstaande financiële tijdschrift American Banker plaatst Backbase bij de top 20 innovators van 2010. Op de lijst staan slechts drie Europese bedrijven, waarvan Backbase het enige bedrijf uit Nederland is. (Klik hier voor de PressDoc).
Onlangs presenteerde Backbase haar portal software op Finovate (www.finovate.com), een toonaangevend event over technologische innovaties in de financiele sector te Noord-Amerika. Meerdere industrie analisten, waaron Jim Bruene van Netbanker en Jacob Jegher van Celent reageerden zeer enthousiast: “Backbase speaks my language, online banking customer experience”. Reden voor American Banker en Bank Technology News om Backbase te benoemen tot de top 20 innovators die de komende jaren het gezicht van online en mobiel bankieren gaan veranderen.
De Backbase portal software onderscheidt zich van traditionele portal oplossingen door een zeer sterke focus op de eindgebruiker. “Portals zijn niet alleen een stuk techniek, maar vooral een customer engagement platform” aldus Jouk Pleiter, CEO van Backbase. “Meer dan ooit is het belangrijk om de klant centraal te stellen, en elke klant de kans te geven om zelf de regie te voeren over de online dialoog. Om dit te bereiken zetten we bestaande content en applicaties om naar widgets. Widgets zijn een soort mini applicaties die via verschillende kanalen aan de gebruikers gepresenteerd kunnen worden.” De portal software van Backbase is geen vervanger van bestaande systemen, maar juist een flexibele presentatie laag bovenop de alreeds in gebruik zijnde systemen. Binnen de presentatie laag van Backbase, staat de gebruiker centraal, en zorgt het samenspel tussen widgets, personalisatie en social technologie voor de optimale gebruikers ervaring; “Door gebruik te maken van widgets is het relatief eenvoudig om iedere klant op maat te bedienen. Afhankelijk van het klant profiel en de klant voorkeur worden de juiste widgets gecombineert in een effectieve customer journey”. Het belangrijkste resultaat is het verhogen van de online klanttevredenheid en het verder verplaatsen van fysieke klant interactie momenten (zoals kantoren, netwerk en call center) naar effectieve online dialogen.
Over Backbase
Backbase ontwerpt en implementeert online Customer Engagement software oplossingen, zoals Backbase Portal en Forms. Meer dan 100 organisaties wereldwijd – waaronder ABN AMRO, AIG, Barclays, Deutsche Bank, ING, NXP, Motorola, Philips, Visa en Vanguard – gebruiken de Backbase software voor het verbeteren van hun online klant interactie. Door de inzet van Backbase maximaliseren ze hun online klantbeleving, retentie en conversie.
Backbase Portal wordt wereldwijd ingezet om bedrijfskritische applicaties voor miljoenen gebruikers te personaliseren en op hun maat te maken. Backbase Portal biedt organisaties de gelegenheid krachtige, dynamische websites met personalisatiemogelijkheden voor de eindgebruiker te ontwikkelen. Backbase is opgericht in 2003 en heeft kantoren in San Francisco en Amsterdam. Bij Backbase werken ruim 100 medewerkers.
The Rich Portal WARs are delivered with the H2 Database Engine installed. This embedded database is only suitable for evaluation purposes, for a more enterprise level setup the following steps will guide you to deploy the demos on a Sun GlassFish Enterprise server 2.1 and MySQL 5.1.
Prerequisite
Install GlassFish 2.1.1
Download GlassFish server from https://glassfish.dev.java.net/downloads/v2.1.1-final.html After downloading GlassFish, open a command line console, change to the location of the downloaded package and type:
java -jar glassfish-installer-v2.1.1-b31g-windows.jar
This command will unbundle GlassFish and create a new directory structure rooted under a directory named ‘glassfish’. Change to the newly created GlassFish folder and type:
ant -f setup.xml
In <glassfish>\domains\domain1\config\server.policy
//==start==// grant codeBase "file:${com.sun.aas.instanceRoot}/applications/j2ee-modules/portal_4_2_2_dev/-" { permission java.lang.RuntimePermission "createClassLoader"; permission java.lang.reflect.ReflectPermission "suppressAccessChecks"; }; //==end==//
Starting GlassFish server
In the command line console change to the GlassFish bin folder and type:
asadmin.bat start-domain domain1
Once the server has started; to login to the server administration page point your browser to http://localhost:4848/ and use the default login below.
The default admin login
User: admin
Pass: adminadmin
You can now deploy portal_4_2_2_demo under the section “web application” section.
Configure Portal database properties to run with MySQL 5.1
In –> C:\glassfish\domains\domain1\applications\j2ee-modules\portal_4_2_2_demo\WEB-INF\backbase-portal-database.properties
//==start== # This file contains the information needed to connect to the database. # This configuration will keep the database in memory, will not persist between server restarts #db.url=jdbc:h2:mem:demo # This configuration will keep the database in the user home directory. # The changes in the database will persist between server restarts. #db.url=jdbc:h2:~/backbase/portal40ga/demo # This configuration will keep the database in the TMP directory db.driverClassName=com.mysql.jdbc.Driver db.url=jdbc:mysql://localhost:3306/portal_demo db.username=portal_demo db.password=portal_demo //=end==
Create a new database in MySQL command line client:
Create database portal_demo;
Use portal_demo;
create a new MySQL user:
Username :portal_demo
Pass: portal_demo
Create tables using provided script:
<Backbase_Rich_Portal_4.2.2>\configuration\database\ddl\mysql\portal-ddl-create.sql
Insert data using provided script:
portal_4_2_2_demo.war\WEB-INF\classes\database\demo\portal-demo.sql
Now you can run the Backbase Rich Portal application:
http://localhost:8080/portal_4_2_2_demo/demo/portal.demo1.jsp
In the latest edition of the Future Banking magazine Jouk Pleiter, CEO of Backbase, shares his online banking vision.Where he describes the first round of online banking as the “web enablement” of existing financial services; “Traditional online banking needs an upgrade. Customers are enjoying this next level interaction with other on-line retail vendors and are looking for the same experience in their banking. Backbase enables business professionals at financial services organisations to take the lead in customer-centric online innovation, improve e-business results, and optimise online customer interaction.”
You can read the article Internet banking 2.0 online at the website of Future Banking (click here for a direct link to the article), or read the plain text version by clicking the more at the bottom of this blogpost.
Last week, Backbase CEO Jouk Pleiter presented at the Emerce eTravel event held in Amsterdam. You can view his presentation on Slideshare:
Portal is a fun beast.
I mean for all it’s awesomeness, there are still a few seemingly simple tasks that can prove a tad….”interesting” to accomplish. This morning I was greeted to an email request from a client asking how one would go about applying a custom icon to the “chrome” of a portal gadget. As it stands, our gadgets are equipped with several interactive icons for controlling it’s state (minimize, maximize, refresh, close, edit preferences, and restore). Adding yet another button to that list HAS to be straightforward no? Turns out while it wasn’t terribly intrusive, it is one of those tasks that has not yet made it into the BB Portal documentation. The following article will outline the steps taken in making the “custom button” requirement a reality.
Before we begin you should understand is that the developers over in Amsterdam have taken great pains to ensure that almost every aspect of the BB portal is as open and flexible as possible. Given the extent of what you can actually DO with portal, the documentation of these efforts requires almost as much manpower as their actual development; an area that we have so far been unable to devote the required small army of writers to. Therefore it is up to us… the few, the proud, the geeky, to assist one another in our respective efforts. So onto the fun stuff.
So here’s what you need to REALLY know. For starters there are 2 use cases that can crop up. The first entails equipping your gadgets with a new GLOBAL icon (ie. one that can be applied to any gadget regardless of type). By design these “core” gadget icons are hardcoded into the gadget and portal definitions.
It all starts with the portal setting titled “gadgetWindowButtons”. This portal setting is a comma delimitated string of name/value pairs that indicates what buttons even exist for the portal gadget chrome. Out of the box this setting is written as follows:
unload;Close,maximize;Maximize,restore;Restore,minimize;Minimize,showPreferences;Edit preferences,hidePreferences;Close preferences,refresh;Refresh
This string is dynamically parsed and used to add our icons to the gadget chrome in the reverse order in which they are written here. This means that the Refresh icon is the leftmost icon, and the close icon is the rightmost. For the sake of our experiment we will add our new icon “notify” right after the “preferences” icon.
unload;Close,maximize;Maximize,restore;Restore,minimize;Minimize,notify;Notification On,no-notify;Notification Off,showPreferences;Edit preferences,hidePreferences;Close preferences,refresh;Refresh
You should now go into the portal admin page, and hit up the “Setting Groups” page and edit the “portal_settings” settings group as this will undoubtedly be the portal settings group you are using. Once inside you should add the “gadgetWindowButtons” setting as it is not by default available!
You should know that the first value in the name/value pairs refers to the CSS classname of the icon, and the detailed value of the “buttonClick” even that is fired when the user clicks on the icon. The “value” of the name/value pairing refers to the tooltip text content presented to the user when she hovers OVER the icon. Also notice that BOTH states for the icon are defined here, since there will be a notification on AND a notification off icon for the gadget.
“Wait… what is this ‘buttonClick’ event nonsense that you just mentioned?”. Well grasshopper, the inner workings of the gadget code ensure that each button icon that is added fires a “buttonClicked” event. This you will note is NOT a standard DOM level event. It is instead a custom event that is only recognizable by the portal itself. When this event is created, a “details” object is appended to the “event” object that gets triggered. This details object is a string indicating what icon was clicked.
Now comes the fun part. That is creating the function that is triggered by that event. Here is where we need to dip into the file “portal.customize.xml”. This file SHOULD exist under WebContent/demo/bindings. If you don’t have this file, look in the portal_demo WAR file that came with your installation, it lives there.
The purpose of portal.customize.xml is to do just that, CUSTOMIZE the portal by extending it’s various components. Now the details of how this is done are a weee bit outside the scope of this article, and as such I suggest that you get yourself familiar with the Backbase Frameworks documentation to understand the structure of BB components. A quick look at this code shows an XML node titled with a name atttribute of “gadgetWindow” this is what we care about. It is within this block that we will extend our gadget window to correctly handle our newly created icon.
<d:element name="gadgetWindow" extends="p:gadgetWindow"> <!-- Store your button styling here --> <d:resource type="text/css"> <![CDATA[ .p-gadget-button-notify{ background-image:url("../../demo/themes/default/media/gadgetWindow-buttons.png"); background-position:-80px 0; } ]]> </d:resource> <!-- The method to be called when your button is pressed --> <d:method name="alertMe"> <d:body type="application/javascript"> <![CDATA[ console.log('Alerted'); ]]> </d:body> </d:method> <!-- Add your button event handler here. --> <d:handler event="buttonClick" type="application/javascript"> <![CDATA[ switch (event.detail) { case "notify": this.alertMe(); break; default: } ]]> </d:handler> <d:handler event="beforeload" type="application/javascript"> <![CDATA[ if (!this.getSetting("notify", "boolean")) { ((bb.selector.query(this.viewNode, ".p-gadget-button-notify") || 0).style || 0).display = "none"; } ]]> </d:handler> <d:handler event="beforeunload" type="application/javascript"><![CDATA[ if (!this.confirmed && this != demo.dialog) { var that=this; demo.showDialog('Close Gadget', demo.dialogs.closeGadget, function() { that.confirmed = true; that.unload(); }); event.preventDefault(); } ]]></d:handler> </d:element>
So here are the important parts. First, there is a resource tag of type “text/css”. This little diddy is where you place the styling for your newly created button. Mind you you need to add 2 classes for each icon, the first is default state, the second is the hover state. The names for those CSS classes are “.p-gadget-button-[BUTTON NAME]” and “.p-gadget-button-[BUTTON NAME]-hover”.
NOTE: The location of CSS sprites in the url or src fields is in relation to the portal.customize.xml file, not the root of the application!
Next up is the method tag. This is the function that will be called when you actually press the gadget button. It’s name should match that of your button although as you will soon see it does not have to. Within this method, you have complete access to the gadget whose button has been pressed, meaning that you can alter your gadget and it’s contents in any way that you see fit.
The final required component you will see is the “buttonClick” event handler. Here we have a switch statement that is triggered on the “event.detail” object. Simply add your gadget button name as a case and then fire the method that you want triggered when the button is pressed (see why the name of the method didn’t really matter?). And there you have it.. all done. You should now see your lil gadget and be happy.
But what about that lil “beforeload” event handler? Ooooooo your an observant one! Well my friend, we may want to give the portal administrator the ability to hide this newly created button on certain gadgets so that they don’t ALL have the ability to “notify” the user that their button has been pressed (although I couldn’t possible see why not!). Once added, the user can create a gadget setting group with a setting whose name is the same as that of our little gadget chrome button, and a boolean value to indicate whether that gadget shows the chrome button or not.
I hope this helps everyone. It took me about an hour to muddle through the BB portal code and identify how all this stuff fit together, so hopefully it saves you the same amount of time. Till the next post…. be good and happy coding.
Source: “Needs me some custom buttons…” @ www.thenerdnomad.com
Yesterday Backbase attended The Web and Beyond 2010 event, (also sponsored by Backbase). The two presentations that really made an impression are those of Chris Fahey and Stephen Anderson. I include the slides of Chris Fahey below.
The Human Interface – presentation by Chris Fahey:
[Update below]
Jay de Groot, VP Strategy and User eXperience design at Backbase is co-organiser of The Web And Beyond event (the biggest UX event in The Netherlands), held on June first in Amsterdam. As part of this event Backbase is sponsoring the executive workshop: UX in the City:
Smart companies today design innovative, interactive, social services that use the power of proximity. If they want to test these services in the real world, they need access to an existing community of consumers. Amsterdam Living Lab (ALL) connects companies to consumers and helps them gather and share user experience data. This hands-on workshop, with contributions by Martijn Kriens (ALL), Gilles Domartini (Philips Consumer Lifestyle), Paul Hughes (Lava graphic design) and our keynote presenters Michael Meyer and Josephine Green, will explore your companies’ opportunities of using Amsterdam to test your user experiences. Participating executives of this 100-minute workshop will learn how UX methods can be applied to help determine the expected return on investment (ROI) of innovative social services, inspired by a real-life case of Amsterdam Living Labs.
[Update May 31] The Executive Workshop, ‘UX in the City’, originally announced to be held on The Web and Beyond 2010 on June 1, has been moved to Fall 2010.
Yesterday, we presented our portal software at Finovate using a slick iPad demo. Some of the reactions on Twitter:
