cancel
Showing results for 
Search instead for 
Did you mean: 

KPI Tile SDK format adjustments

Stein
Participant
0 Kudos

We're using the SDK KPI Tile in our DS reports with good results, but how can I adjust the background color to transparent? Default is white and with transparent we can get a smoother overlap with other objects:

Accepted Solutions (1)

Accepted Solutions (1)

former_member194504
Active Contributor
0 Kudos

Are you trying something like this? you can do it by reducing the opacity of the kpi tile using css

Stein
Participant
0 Kudos

No! We seek an overlap of the KPI Tile and a graph object. Today the SDK background blocks the graph content:

Former Member
0 Kudos

Hey,

you can achieve this with CSS. To define which objects should be in front work with the "z-index" property.

To define a transparent background check out this link: CSS opacity only to background color not the text on it? - Stack Overflow

BR

Jan

Stein
Participant
0 Kudos

I cannot see an option to adjust the SDK CSS for KPI Tile:

Former Member
0 Kudos

You can write your own CSS and apply this file to your Application. Then you can assign the CSS class from your file to your KPI Tile (e.g. in your Screenshot the option "CSS Class"). I will try it later to check out if it`s working with the transparent background.

Former Member
0 Kudos

Sounds very similar to this threads:

http://scn.sap.com/thread/3576266

http://scn.sap.com/thread/3573624

Best regards,

Victor

Stein
Participant
0 Kudos

I've added the css coding below to our application CSS (New_DESIGN.css with Blue Crystal theme) and assigned it to CSS Class in the KPI Tile component:

.myBackgroundTransparent{

background: #CCC;

opacity:0.6;

}

No effect! ;-(

Karol-K
Advisor
Advisor
0 Kudos

try with important flag:

.myBackgroundTransparent{

background: #CCC !important;

opacity:0.6 !important;

}

Answers (1)

Answers (1)

Stein
Participant
0 Kudos

I've tried to adjust the background and border of the KPI SDK without luck. The component sorting order fixes the background issue but not the borderline. Solution might be to rem-out the formats in JS but that is risky when the SDK is in production.

Thanks Victor for the threads.

Regards,

Stein

mike_howles4
Active Contributor
0 Kudos

  .scn-pack-KpiView {

    border : 0px !important;

  }

EDIT: This is if you are using 's version ()

Stein
Participant
0 Kudos

If only that worked ... 😞

Thanks for your input.

mike_howles4
Active Contributor
0 Kudos

Well, it does work for Karol's version which is freely available.  The problem with the original SAP SDK sample version is that the styling is inline styling which you cannot overcome with CSS selectors.

Stein
Participant
0 Kudos

Thx Michael. I'll try the Karol version and perhaps migrate to this SDK instead of the standard tile from SAP. This post from Karol is very interesting. Perhaps should ensure these components are included in the next release?