Pointless, but slightly humorous intro

It’s coming up to the time of year where those of a certain cultural persuasions celebrate that in years gone by, the leaders of their cultures decided that the best way to placate the masses (pun not intended)  was to morph their festivals of seasonal changes to align them with their goals.

One can think about that in two ways:

• First, this is why I have to put up with songs about snow and sleigh rides even though it is 30C + outside.
• Secondly, why I had to make my own chocolate nativity calendar for the kids this year as all the others are now “Christmas Countdown Calendars” and feature some animated TV character wearing woollen mittens whilst the embedded chocs are designed to withstand the 30C + heat. (Yes, there is a reason that those chocs taste mainly of copha (hydrogenated coconut oil).) Seems the leaders of the culture of commercialism are winning 🙁

Getting to the point

But I get away from the reason I’m here, which is to spread love, goodwill and understanding to all (even competing consulting firms). So in that line of thought, I got a question a few days ago from R Todd Newton of hyperCision (sorry it’s taken me so long to reply Todd) asking:

We have been asked to provide some custom dashboard panels for Employee Central that would pull data from some custom on-premise solutions. Let’s say if it just came back as JSON, I suppose we could just put it into a presentation format for the panel?

So, here is my question. To get started on a custom panel like that, where do you start? Do you need to engage SuccessFactions engineering to tie a particular EC staging instance to some development account in SAP HANA Cloud Platform (if we go that route)? Can someone do a very simple custom panel extension without using SAP HANA Cloud Platform and pulling the content from an external service?

I thought these were excellent questions that could do with addressing in a more public forum (hence this post). I wasn’t sure whether to post in the HCM forum or here under the HANA Cloud Platform, but I thought more developers would see it here, and that’s where I’m feeling the love, so big up to all the #cloud developers trying to struggle to get it right, we will prevail!

The Basics – Custom tiles

Firstly, exposing external content in Employee Central (especially home page tiles)

It is quite easy to add custom tiles in Employee Central – just go to the “Manage V12 Home Page” option from the admin menu

At the bottom of the screen you’ll notice an “Add Custom Tile” option, click that – and add a new tile.

Simplest dynamic custom tile

The simplest solution is to host the dynamic content somewhere else.

In the content for the tile – reference the website that is providing the content for the tile. In this case I’m just pointing to a page on my own website that’s about building a bunk bed for the kids. It’s worth noting that because this page is HTTP and the SuccessFactors site is HTTPS there will be issues! Also to make matters worse, there’s a whole bunch of javascript on my site, so it can be unhappy to run (unsecure javascript and all that). So it you try this at home, don’t be surprised if you just get a blank tile until you tell your browser to stop being so awkward.

One way to deal with this is to make sure the content being brought through is not too dynamic, just serving up HTML will be a happier experience.

In the HANA Cloud Platform extension world, at this point I could reference a web page served by my extension running on the platform. SSO passes my user id to the HANA Cloud Platform and I can serve content that is relevant to the employee.

But I want it to be perfect!

However, there are several problems with this approach (simple as it is). Firstly theming done on your SuccessFactors instance will not be reflected in the widget. IFrames that run on a different domain aren’t generally allowed access to their parent frame’s information (this includes CSS). There are good reasons for these security settings and I wouldn’t recommend anyone try to work around them.

Secondly, if you have a feed of data, like Todd mentioned in his question, you are going to have to find some way to render that into HTML – there is no way to just magically consume it (caveat – that I am aware of).

The solution would be to actually code the required rendering in HTML and javascript and insert this into the tile. The only problem here is that the way that the tiles get inserted onto the home page is dynamically – and you can’t dynamically insert javascript into a page (well you can, but there are special methods you need to use which aren’t the same as the insert HTML method that is used).

We can however get script to execute inside an iframe AND get access to the SuccessFactors CSS if we don’t do any cross-domain calls. The question is how on earth to do that?! One way that has been offered by HTML5 is to use the <iframe srcdoc=”… notation – here is a very simple example (please excuse me not using the crappy Jive code formatting, it gets rid of all the nice formatting and colors in my code):

<iframe height=180 border=“0” frameborder=“0” seamless=true srcdoc ='

<html>

<head>

<script type=“text/javascript”>

       window.onload = function() {

              if (parent) {

                     var oHead = document.getElementsByTagName(“head”)[0];

                     var arrStyleSheets =

                            parent.document.getElementsByTagName(“link”);

                     for ( var i = 0; i < arrStyleSheets.length; i++)

                           oHead.appendChild(arrStyleSheets[i].cloneNode(true));

              }

       }

</script>

<style>

<!–

#block {

       background-color: #000;

       margin-left: auto;

       margin-right: auto;

       height: 50px;

       width: 100px;

       position: relative;

       top: 20px;

       border-top-left-radius: 10px 20px;

       border-top-right-radius: 10px 20px;

       border-bottom-left-radius: 10px 20px;

       border-bottom-right-radius: 10px 20px;

       font-size: 20px;

       font-family: arial black;

       color: #fff;

       text-align: center;

       line-height: 50px;

       letter-spacing: 2px;

       background: -webkit-gradient(linear, left bottom, left top, color-stop(0.5,

               rgb(0, 0, 0)), color-stop(0.98, rgb(77, 77, 77)));

       background: -moz-linear-gradient(center bottom, rgb(0, 0, 0) 50%,

              rgb(77, 77, 77) 98%);

}

–!>

</style>

</head>

<body class=”globalTileBody” style=”margin: 0; padding-right: 25px;background-image:none“>

       <p>Simple test that executes javascript and allows use of

              SuccessFactors CSS. This is in an iframe, so I can embed and call

              javascript functions. However, it is using the same CSS as the

             parent SuccessFactors page.</p>

       <div id=“block”>00:00</div>

       <script type=“text/javascript”>

              function clock() {

                     var now = new Date();

                     var hour = now.getHours();

                     var minutes = now.getMinutes();

                     minutes = (minutes < 10 ? “0” : “”) + minutes;

                     hour = (hour < 10 ? “0” : “”) + hour;

                     var time = hour + “:” + minutes;

                     document.getElementById(“block”).innerHTML = time;

                     setTimeout(“clock()”, “1000”);

              }

              clock();

       </script>

</body>

</html>'>

</iframe>

<p>This content isn't in the iframe but note how the styling is the same (font,background, etc.)</p>

I’ve also added a little clock, just to show that it can run the javascript:

This allows us to insert a fully featured web page into the tile and host all the source inside the tile (so that it is same origin as parent page). Pretty cool! Because the code is in the same domain, access is allowed to the parent DOM elements, including the stylesheets. As it is an iframe the dynamic insert of scripts is allowed, and these execute. This page could be built to use an AJAX call to pull data from your source system and display it in a table rather than display the little clock I’ve got showing there. It would be really simple, for example,  to build some code that could display multiple little clocks showing the times in your different offices. (If they are in different time zones that is, if they aren’t, well it would be even simpler 🙂 ).

Warning – the current code calls the on-load event of the iframe lots – the window.onload event I have embedded there gets called 3 time on the page I took the screenshot on, not sure why but clearly you’re going to have to beware if you use this approach.

Of course there is a downside – since this (iframe attribute srcdoc) is an HTML5 specification, not all browsers (especially mobile ones and crappy old ones that are many enterprise standards) are not supported. 🙁

Can the future get here fast enough?

It should be noted that there is even a really simple solution to the CSS in a cross-domain option, HTML5 specifies a “seamless” attribute for iframes that requires the browser to pass the styling of the parent into the iframe. Of course at the moment, pretty much only Chrome supports it, and even Chrome doesn’t yet support it in the case it is used with the srcdoc extension. Also using just Chrome might be a problem, it’s fine by me, but not the enterprise just yet 😉 .

Going the whole hog – HANA Cloud Platform Partner

To answer another part of the question, if you do want to build something reusable and redeploy, you should take a good look at the HANA Cloud Platform SuccessFactors Extensions. To build these as a partner you will need to become a HANA Cloud Platform partner. We are, and it is almost overwhelming the support you get from SAP in this space (compared to my experience in being a SAP and SuccessFactors partner). However, like many things SAP related, this will cost you. We may see some movement in this space, but currently you’re going to have to build yourself a business case because it isn’t petty cash amounts to be a partner (although I would recommend that it is worthwhile.)

Recommendations:

If you are building something for just one organisation, then you can probably ignore the CSS issue and just theme your content separately. Build the entire HTML page that you will embed in the iframe on whatever system you are sourcing the data from.

If you are building something that needs to be deployed to multiple instances (a SuccessFactors extension), then using an iframe that points to your HANA Cloud Portal page that contains the HANA Cloud Platform widget providing the tile will mean that the theming set up in the portal (inheriting from SuccessFactors) will show in your tile in all the themed glory it deserves.

Next up

Tomorrow, Luke Marson, Ohad Yassin and I will be doing an hour long webcast/webinar where we will be discussing many of these points, please do join us and ask a few questions if you like (we may have a little time). See Luke’s post about the session SuccessFactors Employee Central extensions for SAP HANA Cloud Platform [webinar]