Personas 3, jQuery is out there..

first of all,

thanks to Clemens Gantert and Peter Spielvogel for helping me out – we had a nasty issue which would render our Personas 3 install pretty much useless, seems to be working mostly fine now… and since this is my first content on SDN, a quick introduction:

– I’m just another developer, which happens to work with SAP.

now, to the main topic… OK, so Personas 3 is making some buzz because removes the silverlight dependency and we move towards a plain html/javascript solution – while as far my understanding goes, not all ‘functionality’ or ‘goodies’ have been developed and implemented at this stage, however future seems promising due possibilities of re-using well known technologies like jQuery to pretty much go nuts and add a ‘cherry’ at the top of your custom developed flavour.

while I understand the ‘main’ selling point of Personas would be to easily customize the dynpro screens, with some help of a fellow developer and google there’s some pretty cool stuff out there to try.

having just a glance at the html structure of Personas 3, on simple terms it kinda consists in a frame which loads a document based on UI5 and inside this document, will plot the user area inside a table.. – the round-trips, scripts, images, all custom stuff we write come down to the client as arrays ready to be injected into the DOM tree when needed (upon pressing a button for instance).

since we’re on the same frame, some stuff is pretty straight forward to interact with, and in this sample code I will share how to create a simple ‘background switcher’ and append it to some ‘outer’ element, an element which will not be overwritten by personas run-time scripts.

here it is:

window.$.getScript('http://rewish.github.io/jquery-bgswitcher/jquery.bgswitcher.js').done(
     function(javaScript, textStatus) {
          setTimeout(function() {
               if (window.$('#userarea-scrl-wrapper').length) {
                    window.$('#userarea-scrl-wrapper').prev().remove();
                    window.$('#userarea-scrl-wrapper').remove();
               }
               var cssStyle = window.$('#userarea-scrl').attr('style');
               window.$('body').prepend('<div id="userarea-scrl-wrapper" style="' + cssStyle + ' height:100%; display:none;"> </div>')
               var srcArray = [
                    "http://i.imgur.com/fUI029E.jpg",
                    "http://i.imgur.com/kbOxdKq.jpg"
               ];
               window.$('#userarea-scrl-wrapper').bgswitcher({
                    images: srcArray
               });
          }, 1000);
     }
);

this is a stand-alone script, all resources are being loaded ‘externally’, but we could easily add an ICF node to take care of keeping them inside the ABAP domain.

while is this script is not at all complicated, I will add some notes to people who is not totally ‘fluent’ with javascript or jQuery for what it matters.

“window.$” – this resolves to a reference of a jQuery loaded in our frame.

line 01: a simple ‘getScript’ (http://api.jquery.com/jquery.getscript/) – will load the script resource from a given location.. we can add a callback function when it finished loading, this way we don’t try to access things that are not yet there for us to use..

line 03: the ‘setTimeout’ (WindowTimers.setTimeout() – Web API Interfaces | MDN) is used to allow the browser to ‘load / execute’ the script we just added, in this case ‘jquery.bgswitcher.js’ (rewish/jquery-bgswitcher · GitHub) — when we read the documentation of the ‘getScript’ method, the method only loads the script, and it does it in an asynchronous manner.. while we could use some some of $.ajax({async:false}) to make sure we would only execute the rest of our code when everything was really loaded, I chose the method above due simplicity.. at the closing brace line there is a ‘1000’ parameter, which is the timeout in milliseconds for out ‘function’ to be executed.. this value is more than enough, could be a lot lower thou.

line 04-07: this is ‘sanitation’ part of the script.. since we will be creating elements which are not directly controlled by Personas, we should be careful to not overload the DOM tree with garbage each time this script could possibly be executed.

line 08: this is just a jQuery selector to fetch any custom attributes on the userarea (the main div which most of the Personas content is appended) – we are doing such because some of these styles will flow to our custom created element below.

line 09: a ‘body’ selector using a ‘prepend’ (http://api.jquery.com/prepend/) so we add this element in the top of the DOM tree – since it will work with absolute layout, this will just save us some trouble dealing with tables that are in the middle of the html used by personas.. worth mentioning the ‘display: none;’ in there.. this is needed since we added a div on top of the personas content, but we don’t really want to block anything here.. (but we still need to have an element to start our switcher, and I will not mess around with elements I did not create)

line 10-13: a simple javascript array which will contain all images we want to ‘switch’ – in this sample, there are two scenery photos from New Zealand (place which I’m luckily enought to live) which I’ve downloaded from google images.. they look a bit odd because I applied a gaussian blur of 4 before uploading them, but anything really will do..

line 14-16: as soon we have an element, we just need to use the ‘bgswitcher’ function on it with our given parameters, in this case just the array of pictures.. we could add some other parameters to modify how long it takes for a picture to switch, it’s all part of the documentation at the bgswitcher github and you probably would like to have a look.

and that’s it.. ! – a simple example of what’s possible with jQuery and some jQuery Plugin (which is under MIT license so keep the correct attributions when used open source software)

there is a world of jQuery out there to explore and use with Personas 3 because it’s based on html / js.