/wp-content/uploads/2013/12/advent_calendar_338902.pngPointless, 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

/wp-content/uploads/2013/12/admin_339026.png

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.

additional time.png

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:

example interactive tile.PNG

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]

To report this post you need to login first.

17 Comments

You must be Logged on to comment or reply to a post.

  1. Rob Makinson

    Hi Chris,

    Very Random intro. How many trials were there of the chocolate nativity success? Made the right selection for the blog space in development, not HCM. Hopefully generates lots of discussion.

    Cheers

    Rob

    (0) 
    1. Chris Paine

      Hi Rob, yep a very random intro – got to keep it mildly interesting. The advent calendar was built 2 years ago, I just stick a new picture on the front each year and top up with the goodies left over from halloween. 😛

      The point was supposed to be, ‘Tis the season for doing nice things for others, so I’m going to share some hard fought for info with all my competitors! 😉 But I may have just gone too random – I blame watching SuccessFactors training videos – it’s enough to melt anyone’s brain.

      The question is a very functional one, but the solution(s) certainly tends to the technical. However, hopefully some people will find that they can extend their investment in SuccessFactors without having to get any consultants in using these methods. That said, not many SuccessFactors folk on SCN – guess I ought to post a link in the SuccessFactors community area too.

      Thanks for reading and the comment (and the share on Twitter 🙂 )

      Cheers,

      Chris

      (0) 
  2. Chris Paine

    I should add that one of the advantages of using the HCP would be to use the SAP Cloud Connector to securely get the information from your on-prem systems. That way you don’t have to worry about exposing your on-prem system to the internet. It’s certainly worthwhile if you don’t already expose services from your on-prem systems (and probably worthwhile even if you do.)

    (0) 
  3. R Todd Newton

    Hi Chris,

    Much thanks for pulling this together. I’m feeling the goodwill  on the other side of the world! It’s a small world after all….It’s  A great quick show of how to add a tile. That said, it looks like anything that is going to be employee-centric within a tile needs to have ID information via linking in the tile’s source system to SF via SSO  – which could imply HCP as a potential source, or some other source that is linked in  via SSO, correct?

    Again, much appreciated! Todd

    (0) 
    1. Chris Paine

      Hi Todd,

      Yep if you want emp info, you’re going to have to get a system that that SSO with SF to provide that to you. HCP is a perfect choice and indeed that’s what I do with my extension builds.

      Sorry to not have replied earlier,

      Chris

      (0) 
  4. Luke Marson

    Top blog Chris and this answers a recent question that was beyond the technical scope of my abilities with Java (which is a pretty small scope!). I’ll keep you posted when I apply this to a client with or without an HCP extension.

    (0) 
  5. Travis Smith

    This is awesome and a perfect solution within Chrome, Firefox, and Safari 6+.

    The problem that I have found with this solution, which I love, is that IE does not support srcdoc attribute within the iframe tag. And being at a large corporation, I am stuck with IE, sadly. I would love to know another alternative solution for use within IE that would allow for scripting on the Home custom tiles. Nothing that I’ve tried gets noticed or executed by the browser.

    Also, this is complicated in my implementation of this code by the doctype within SuccessFactors is not HTML5.

    (0) 
    1. Chris Paine

      HI Travis, yes unfortunately as I mentioned:

      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. 🙁

      Would that life could be that easy eh!

      (0) 
  6. Gunnlaugur Th Einarsson

    Is it possible to have a link in a custom tile and to open it in the parent frame?

    ie. instead of a new tab in the browser or inside the tile it would open inside the Successfactors frame.

    (0) 
    1. Chris Paine

      Hi Gunnlaugur,

      if you put a target=”_top” in your links inside the  custom tile it should work fine. However, javascript links will not work due to cross domain issues. So you’re going to have to be creative with you fancy web designer gear… <a href=”//wibble.com” target=”_top”>Wibble</a> should work, but making an onclick event of a div do a page redirect, will not. This is rather unfortunate but is all there to stop webpages being hijacked by ads. So not really a bad thing.

      Cheers,

      Chris

      (0) 
      1. Gunnlaugur Th Einarsson

        Hi Chris and thanks for the reply.

        I had previously tried this but it always opens another tap in the browser at least in Chrome.

        I would really appreciate more assistant on this.

        i’m trying this on the salesdemo4.successfactors.com instance.

        Regards,

        Gunnlaugur

        (0) 
        1. Chris Paine

          Hi,

          Well in the HCP based custom tiles I’m using/building setting target=”_top” works fine. Only target=”_blank” opens in a new browser.

          You could alternatively try target=”_parent” that should work too.

          Chris

          (0) 
  7. Chris Paine

    UPDATE: Some further research:

    it seems that there is the possibility to do “srcdoc” or similars in a way that IE will support! You can use a technique called data URLs. This involves base64 encoding the source that you want in the iframe and setting the iframe src to be:

    <iframe src=”data:text/html;charset=utf-8;base64,PCFET0NUWVBFIGh0bWw+PGh0bWw+PGhlYWQ+PG1ldGEgY….”>

    there is a catch however 🙁 if you use cookies in your code then these will throw an error. It seems cookie access is not allowed in data URLs. As SSO relies heavily on cookies this means accessing HCP, for example, will not be possible in this scenario. But if you just want to throw some pretty stuff up on the screen that’s using javascript and you just have to support IE, then this might be an option.

    (0) 
  8. Dibyajyoti Nanda

    Hi Chris,

    Thanks for the wonderful blog.

    We are facing some issues .

    we are trying to consume success factor OData inside a custom tile with the help of SAPUI5.

    We are trying to call odata with an argument .

    As mentioned, we have to write the entire code inside the srcdoc in the iframe.

    we know that to pass an argument in the odata, we need to use single quotes (”).

    The problem is; when the browser gets a single quote twice in a string, present in the srcdoc, it considers second one as end of the code, does not compile it and skips the rest of the part .

    Hence, we are not able to execute the entire code.

    Here is the code reference:

    For example:

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

    <html>

    <head>

    <script src=”https://sapui5.hana.ondemand.com/resources/sap-ui-core.js

                        id=”sap-ui-bootstrap”

                        data-sap-ui-libs=”sap.m”

                       data-sap-ui-theme=”sap_bluecrystal”>

    </script>

    </head>

    <body>

    <iframe id=”test” height=”600″ width=”580″ border=”0″ frameborder=”0″seamless=true>

      </iframe>

      <script type=”text/javascript”>

      var oModel = new sap.ui.model.json.JSONModel();

      var service_url=    “https://pmsalesdemo8.successfactors.com/odata/v2/User(‘admin’)/$format=json”;

      oModel.loadData(service_url,null,false, “GET”, false, false, null);

    var username = oModel.getData().d.username;

    </script>

    </body>

    </html>>

    </iframe>

    We tried using the escape character but that is also not working .

    Can you please suggest a solution for this?

    Thanks&Regards

    Dibyajyoti Nanda

    (0) 

Leave a Reply