Skip to Content
Author's profile photo Michael Howles

Design Studio 1.2 SDK – Use both sides – Double Sided Tiles

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

Assigned Tags

      23 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Christoph Wassermann
      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!

      Author's profile photo Mike Howles
      Mike Howles
      Blog 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)

      Author's profile photo Christoph Wassermann
      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).

      Author's profile photo Mike Howles
      Mike Howles
      Blog 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)

      Author's profile photo Tom Krusinski
      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

      Author's profile photo Mike Howles
      Mike Howles
      Blog Post Author

      I'll take a look, it's been a while since I've played with it.  Maybe just needs a CSS tweak or two.

      Author's profile photo Former Member
      Former Member

      Hi Michael,

      How can we actually bind the specific Measure from the DataSource to this KPI tile?

      Thanks ,
      jomy

      Author's profile photo Mike Howles
      Mike Howles
      Blog 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

      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo Mike Howles
      Mike Howles
      Blog 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!

      Author's profile photo Mike Howles
      Mike Howles
      Blog 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.

      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo Former Member
      Former Member

      Why can't these components work normally in BI platform but OK in localhost?

      Author's profile photo Mike Howles
      Mike Howles
      Blog Post Author

      Can you give details?

      Author's profile photo Former Member
      Former Member

      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"

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Former Member
      Former Member

      Hi Steffen.

      Yes, the solution is OK, thanks.

      Spark

      Author's profile photo Former Member
      Former Member

      Hi Spark,

      Can you please summarize the action taken. Please specify the browser and its version being used.

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Harish Nayak
      Harish Nayak

      Hi Michael,

      Do we required additional license to integrate this component in Design studio 1.4?

      Thanks,

      Harish Nayak

      Author's profile photo Mike Howles
      Mike Howles
      Blog Post Author

      No, all the code I release is Open Source.  No cost but your own time and of course very little support.

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Former Member
      Former Member

      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