Skip to Content

Like they said in school.  Use both sides of your paper!  Below is an extension of my HTML Templating example, with some CSS3 flipping goodness.  Inspired by the SCN Reputation Missions tiles that you can flip.  Source can be found at the github repo below.

SDK Source:

entmike/com.ipaper.sample.doublesidedtile · GitHub

External sources/acknowledgments:

As I mentioned, I liked the interactive flipping tiles of SCN’s missions, and figured something similar might serve as a contextual drilldown or an in-place tooltip on steroids use.  Imagine wanting to show a KPI title with sales and maybe some other high-level information, but also wanting to pack in some additional information on mouseover.  The Design Studio project is also included in my Github repository mentioned above.

Below is a design-time snapshot, and a runtime animated example.

Happy Holidays!

use both sides.png

At runtime (click image below if not animating in blog post):

/wp-content/uploads/2013/12/bothsides3_349781.gif

To report this post you need to login first.

23 Comments

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

  1. Christoph Wassermann

    Thanks for sharing Michael, love the idea and the execution. “Flippable” elements are great for saving space as well as removing visual clutter.

    Just a couple of considerations / thoughts that immediately came to mind:

    Really the one issue I have with flipping elements in general is a question of usability. Two core usability terms are visibility and affordance. The latter describes, as wikipedia puts it, “the easy discoverability of possible actions”.

    In this specific case, the user does not see the backside content right away, so there is no immediate visibility. Also, there are no visual clues to indicate that the element itself is flippable. As has happened in other cases, and as flippable elements are becoming more and more used, I would imagine someone is going to come up with an icon that will be the de-facto internet standard to show “this is flippable”, which should solve this problem.

    Secondly, and I am sure you are perfectly aware of this Michael, just noting it: While hovering works fine in a desktop / laptop use case, it is non functional for touch devices.

    You are putting out a lot of great ideas, please keep it up!

    (0) 
    1. Mike Howles Post author

      Christoph,

      Thanks for the feedback.  I agree on both points.  A visual indicator that something is flipable, just like hyperlinks used to be underlined (and now usually just colored since it’s so commonplace) makes sense for sure.

      On the second point, I forgot to say that with a little more JS, this will work on a tablet:

      Attaching the following event handler to the flip-container element would make this work, but I started small:

      ontouchstart="this.classList.toggle('hover');


      Flipping Code courtesy (CSS Flip Animation)

      (0) 
      1. Christoph Wassermann

        That’s a cool way of ensuring the functionality works for touch devices, I was not aware of classList.toggle – thank you for pointing it out. You just have to make sure that there isn’t also a click / touch event registered on the same element as that would lead to the two events clashing on touch devices (if I understand this correctly).

        (0) 
        1. Mike Howles Post author

          Touch devices introduce new considerations for sure (when is a tap not a click but rather a hover behavior?) — I feel at least for this component, as it’s rather open-ended HTML/JS insertion vector, for the author to handle these considerations and not do anything counter-intuitive like placing a button inside of a tile.  (Although it would be comical to put a button on the front side of the tile, desktop users would never be able to click it, while tablet users could (but probably the inverse in both cases would happen on the back side of the tile, LOL)

          (0) 
  2. Tom Krusinski

    Michael-

    This is very cool, thanks. I have received very positive feedback.

    Have you tried to execute from the BI Platform? It appears the animation or flip is gone when trying to access from the BI Platform.

    Any ideas?

    tk

    (0) 
        1. Mike Howles Post author

          Jomy,

          The version I released doesn’t directly use the databound properties at all, however you could pass individual measure values as a string to each of the placeholders:

          (See the getDataAsStringExt method documentation for a DataSource)

          Example:

          var measure1 = DS_1.getDataAsStringExt(“4OXCIEIODSFT8TI3THLPR2WXN”, {

            “0WORKCENTER”: “010”,

            “0PLANT”: “0268”

          });

          var measure2 = DS_1.getDataAsStringExt(“4OXCIEIODSFT8TI3THLPR2WXN”, {

            “0WORKCENTER”: “010”,

            “0PLANT”: “0269”

          });

          DOUBLESIDEDTILE_1.setTerm(“measure1placeholder”, 0); // String Placeholder in your HTML

          DOUBLESIDEDTILE_1.setTerm(“measure2placeholder”, 1); // String Placeholder in your HTML

          DOUBLESIDEDTILE_1.setReplacement(measure1, 0); // Replacement Value from your Datasource

          DOUBLESIDEDTILE_1.setReplacement(measure2, 1); // Replacement Value from your Datasource

          (0) 
      1. Suraj Naidu

        Hi Michael,

        Having SAP Design studio 1.3 installed with Design studio Utilities pack.

        In a dashboard, the “Double Sided Tile” component seems to be working fine while in local mode  but when the same dashboard is executed in BI Platform mode, the flip doesn’t function.

        I have seen your response to Tom – Maybe just needs a CSS tweak or two.

        Could you please share the tweak if it has been figured out.

        Thank you very much.

        (0) 
        1. Mike Howles Post author

          I’m in the process of ironing out a bunch of wrinkles, this one included.  Stay tuned, I will hopefully have something for you today or tomorrow!

          (0) 
          1. Mike Howles Post author

            Just an update – I tested this on BI Platform and the tile flips in IE11 and Chrome.  I cannot vouch for earlier versions of IE though.

            (0) 
            1. Suraj Naidu

              Testing with with IE11 and Chrome also did not resolve the issue yet.

              Will wait to hear from you on the CSS configuration / Server setting that needs to be checked.

              (0) 
      1. Spark Chang

        For example, I add a components “SAPUI5 Table” in my report, if i do “Execute Locally”, it works fine. But when i publish this report into BI platform, it popup the 11 messages “Web Item SPEEDOMETER_1 could not be found in current Web Application

        (0) 
        1. Steffen Bruckner

          Hi Spark,

          Did you install the sdk to the platform, too?

          Tools -> Platform Extensions?

          Maybe you will have to configure some permission for using sdk elements on your server?

          Have a look at the Design Studio 1.3 Admin guide pages 25 ff.

          Regards

          Steffen

          (0) 
  3. Stavros Vorkas

    shot in the dark guys, I am relatively new to DS, firstly may I say EXCELLENT work Michael and thank you so much for sharing this with the rest of SCN. I am aware of the community package. It does not include this specific component and I would like to know how to use this component properly (ie binding it with data + could I add a chart eg one from DS?)

    Thank you so much for your great work

    (0) 
  4. Yash Modi

    Hi Mike,

    First of all, great idea! I am testing the code and analysis application that you’ve uploaded to GitHub. The sparkline charts do not appear on the flipside of the first tile. The code throws the error: “Type Error: $(…).sparkline is not a function”.

    This seems to be a Require.js related issue, and I can’t find a way to fix it.

    Regards,

    Yash

    (0) 
  5. Veeraraghavan Vijayarajan

    Mike,

    I am currently using DS 1.6 version and tried adding the SDK. However, am getting the below error.

    No repository found at jar:file:/C:/Personal/09165668/Documents/Design%20Studio/SDK/DoubleSided%20Tile/com.ipaper.sample.doublesidedtile-master.zip!/.

    It would be great, if you can share your thoughts.

    Thanks

    Raghav

    (0) 

Leave a Reply