Skip to Content
Author's profile photo Karol Kalisz

Design Studio SDK: Kpi View Component

Purpose

A KPI View (a bit different to the KPI Tile from samples) but with correct value format and support. The API and properties is very similar to the KPI tile, but some special functions are not available. I hope this is not too big restriction.

This component solfs also the problem Problem regional formats setting

How does it looks like?

KpiView.png

Styles
scn-pack-KpiView the view itself
scn-pack-KpiView-Header for header
scn-pack-KpiView-Title for title
scn-pack-KpiView-Link for link
scn-pack-KpiView-Image for image
scn-pack-KpiView-ValuePrefix for value prefix
scn-pack-KpiView-Value for value
scn-pack-KpiView-ValueSuffix for value suffix
scn-pack-KpiView-Footer for footer


Available Properties

Property Name Description
data

cell selection

headerText

text for header

headerCssClass css class for header
titleText text for title
titleCssClass css class for title
valuePrefixText text for value prefix
valuePrefixCssClass css class for value prefix
valueText text for value
valueHAlign align of the value (cannot be changed by scripts, need refresh app when changed)
valueCssClass css class for value
valueDecimalPlaces number of decimal places 0-9
valueSuffixText text for value suffix
valueSuffixCssClass css class for value suffix
footerText text for footer
footerHAlign align of the footer (cannot be changed by scripts, need refresh app when changed)
footerCssClass css class for footer
linkText text for link
linkTooltip tooltip for link
image url for image
imageSize image size (choice of 16, 32, 64, 128 px)

Scripting Functions

Scripts Short Description
setters / getters for the majority of properties all those which could be changed in runtime

void setDataSelection(

/* Data cell tha tcontains the value displayed */ ResultCellSelection cellSelection)

for data selection cell


Events


Event Description
onClick

triggered when user clicks on some space

onLinkClick triggered when user clicks on link


Example Application

An Application with example can be downloaded at the BIAPP Repository:

Releases

Source Code & Licensing

This component is for free use. It is under the Open Source Apache Version 2.0 License.

Important Maintenance Notice (… as I am SAP Employee)

The component is NOT delivered under SAP maintenance license.

You cannot claim any Support on this component from SAP!


The components are created on “private” basis – you can use them as is. I can modify, correct or improve – but there is no obligation to do it. Of course I will try to correct bugs or improve the component as long I can.

Have Fun!

for other components see: Karol’s SDK Components

Assigned Tags

      31 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Stein Moshuus
      Stein Moshuus

      Where do one adjust the CSS Styles to this SDK?

      I've assigned a CSS Class to Value from the Application Custom CSS without effect. It only seems to work on overall CSS Class (hence, solving my issue http://scn.sap.com/thread/3660795).

      Author's profile photo Stein Moshuus
      Stein Moshuus

      It worked with adding all the styles mentioned above into the Custom CSS. đŸ™‚

      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      in the example application you can see CSS attachment.

      first, you have to define own CSS; set the class name (here: myTitle)

      then, you need only to assign this class to the component

      and in your class, you can simply overwrite everything you want.

      if you want to be more specific, you can use the classes as above in combination with your one, then your CSS content would see like this:

      this will make the link background black:

      .myview .scn-pack-KpiView-Link {

        background: black !important;

      }

      Author's profile photo Jacques-Antoine Ollier
      Jacques-Antoine Ollier

      Hello KArol,

      I am using this KPI view component, however, I am not able to overwrite the standard CSS it seems.

      I imported all the classes you mentioned in my custom CSS that I bounded to my application.

      However, when I execute the dashbaord and examine the Styles with the IE console, I can see the classes are duplicated.

      For example, my kpi view component has the Style scn-pack-KpiView and scn-pack-KpiView-Value but coming from two files; one class is from KpiView.css (which I do not know) and the other is my file Custom.css. So the classes are there twice. (cf. screenshot for more clarity)

      And the issue is that my scn-pack-KpiView-Value class from my custom CSS is not considered (values have a line through them) and the scn-pack-KpiView-Value from library.css is considered (which seems to be the default css Library).

      I did put !important on all my lines and my css works in other applications not implying Kpi views.

      CSS debug.PNG

      How can I overwrite the values of the standard Library.css?

      Any help on this would be greatly appreciated.

      Thank you very much for your attention.

      Best regards.

      Jacques-Antoine Ollier

      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      Hi, you face the issue with overwriting classes. You should always define special class on your component level and the use it with overwriting.

      You need to do it as here:

      * assign some class name to the KPI View component

      overwrite.PNG

      and then use in your custom.css file this:

      .myOverwriteClass .scn-pack-KpiView-Value {

           // your code

      }

      this is the best way to overwrite delivered classes.

      Works?

      Karol

      Author's profile photo Jacques-Antoine Ollier
      Jacques-Antoine Ollier

      Hello Karol, Your example is exactl what I did like: .myTileValue .scn-pack-KpiView-Value {     // your code } However, it did not work. I finally decided to go with custom Texts with CSS applied to them. I will give it another try to format the KPI View. Thank you very much for your help and attention. Best regards. Jacques-Antoine Ollier

      Author's profile photo Former Member
      Former Member

      Hi Karol,

      I am using Design Studio 1.4 14.0.3 and have installed the SDK online Repository from the Development Community a couple of months ago.

      I created a Design Studio application using the KPI View Component. The application worked fine locally as well as on BI Platform. However in recent days when I try to open the app in DS, I can not see any components except the Header Panel.

      When I run the app locally nothing except for the Header Panel shows. Only when I run the app on BI Platform it runs ok.

      Besides that I tried to create a new app using the KPI View component but the component wont show up when I drag it into the layout section.

      Since no system changes has been done on my side, I was wondering if there was any update/upgrade of the online repository that might cause this.

      Could you advise if that is the case, please.

      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      Hi,

      have you changed something on your PC, have you updated the SDK components?

      what you can check, place the component in OUTLINE view (even it is not visible) and then execute it in any browser, eg. chrome and press F12 to open developer tools - are there some errors in console log?

      Karol

      Author's profile photo Frank David
      Frank David

      Hi Karol,

      I've got the same problem as Endre. There are no Errors in developer tools of Internet Explorer.

      Additionally if i want to open your example application of KPI View I'm getting attached error message. I've installed the whole SCN package... Do you have an idea how I'm able to run the demo?error_Message_kpi_view.png

      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      Hi Frank, Endre,

      we still in a stabilization phase, now we have better "change log" control of the changes.

      I have created new versions now, for stable and preview - please check if this will fix (indeed there was one issue in KPI View from the SCN repository).

      Frank, the example was created based on the old repository, I do not have yet all examples migrated to the SCN repository components.

      we need some help on "testing" side, please see here Introducing "Change Log" for Community Components. If you could participate would be really nice.

      Also, if you would like to post some examples, would be nice as well. Community SDK - Call for Help in Documentation

      Karol

      Author's profile photo Former Member
      Former Member

      Hi Karol,

      I have uninstalled the SDK components (we used Online Repository version) and I have installed the updated SCN SDK Components (1.0.0.201504171626). We decided it is saver for us to use the Offline version.

      All works fine again - Thanks so much for your quick help!

      How can we keep track of updated releases?

      Author's profile photo Frank David
      Frank David

      Hi Karol,

      thank you very much for the quick correction of the component! It is working fine by now.

      I'll have a look at "Introducing "Change Log" for Community Components.

      But nevertheless if I find s.th. not working I'll let the developer know đŸ˜‰

      with kind regards, Frank

      Author's profile photo Scott Kelson
      Scott Kelson

      Hello Karol,

      I really like the look of the KPI View component.  Is there a way to filter the number based on a Filter Panel component?

      Thank you,

      Scott

      Author's profile photo Stein Moshuus
      Stein Moshuus

      Hi Scott,

      Have you tried using Scripting? KPIVIEW.setDataSelection..;

      Stein

      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      Hi,

      yes there is - in 1.5 release there is a function "property binding", see the blogs below. you can bind some value to the property and then filtering will update it. you can use also the formatter functions (blog 2) to even modify the value.

      Design Studio 1.5: View on Data Binding (for Text)

      Design Studio 1.5: Data Binding - using "Formatter Functions" for advanced logic

      Regards, Karol

      Author's profile photo Former Member
      Former Member

      Hey Karol! I would like to change the Value in relation to what I set with radio button. Is that possible? I'm trying with .setDataSelection, but right know I just put the coordinates of the cell. Is it possible to obtain something more dynamic? I checked your link but I do not have the option data binding. I'm using BODS 1.6.

      Thanks,

      Cristina

      Author's profile photo Former Member
      Former Member

      Hi Karol, I hope you can help me. im using your components which are fab but one thing has taken me ages and i still can not make it work. as the people above i am trying to use the KPI View 2.0 tile. i can change the other CSS classes but i can not change the VALUE ! i have read everything here in the blogs. i have put !important in my class. i have added the over ride class you mentioned.nothing works...

      here is the code. i would appreciate it if someone could tell me why this does nothing. it is very frustrating.

      .mytile .scn-pack-KpiView-Value{

      font-size: 12px !important;

      color:red !important;

      }

      i must be missing some step perhaps?

      Author's profile photo Stein Moshuus
      Stein Moshuus

      I had the same issue which was solved by upgrading to DS 1.6.

      Regards Stein

      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      Hi,

      have you add the class "mytile" into CSS class property in KPI View?

      css.PNG

      take this application as example, it works actually on my side.

      https://github.com/org-scn-design-studio-community/applications/blob/master/SCN_KPI_VIEW_CSS-20160112202728.zip

      Karol

      Author's profile photo Former Member
      Former Member

      Thank you Karol! really appreciate you taking time to respond. (and thanks to Stein as well)

      Adding the css class was the problem. I was putting it into the 'Value css class' (as this was the target i wanted to affect)

      I obviously have misunderstood how this should work. do you this have this documented anywhere thats walks dummies like me through it step by step?

      so for example, how now would i also change the format of the value suffix? i would have expected this to be set by 'Suffix css class' but his has no effect, and i already have mytile.css in the css class field. what am i missing?

      best regards

      Kevin Kirkham

      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      Hi Kevin,

      will be difficult to explain in full length. This is basic CSS knowladge, extending of the CSS definitions, overwriting of classes. The most important is to find the correct class which you need to extend.

      in short,

      1. you start the app in chrome

      2. press F12 and then new window "Developer Tools" will be visible

      3. using the selector in "Elements" tab, you have to select the DOM element you need to understand.

      4. then, you have to check which class does it have and make as in the example above.

      here the screen.

      css2.PNG

      Hope this helps for a good start, check out in google how CSS works.

      Karol

      Author's profile photo Former Member
      Former Member

      Hi Karol,

      I'm using KPI View in the application. And I wonder whether the KPI View can be used as another Lauchpad component. Can KPI View also handle responsive layout?

      Thanks and best regards!

      Dasiy

      Author's profile photo Former Member
      Former Member

      Hi all!

      I'm using Kpi View in my application and I need to display a value that change in relation to the selection i do in the prompt.

      In particular, I have the variable "target month" in the prompt due to which I get the 14 months before it  (e.g. I select 02.2016 and I get values for each month till 01.2015).

      I would love to display the value related to the target month! if I do it manually, of course, it works.. But I don't know what target month the user is going to set!

      Thanks a lot!

      Author's profile photo Scott Kelson
      Scott Kelson

      Hello Maria,

      You could just update the KPI View component each time a user changes the target month.

      Scott

      Author's profile photo Former Member
      Former Member

      It is not as easy! I don't know how to link the information of the prompt to the cell in the data selection of the kpi view!

      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      Hi Maria,

      this is basically a "manual" component, to update it, you can

      1/

      use the combination of methods:

      var data = DS.getDataAsString()

      and

      KPIVIEW.setValue(data);

      this script can be placed in the DS->onResultsetChanged() event.

      2/

      use the direct data binding to a cell:

      kpi2.PNG

      It depends what drilldown you have in your data source. If the months are in drill down, then with option 1/ you can read out the correct data. If the months are only as background filter, you can use option 2/ and bind the value to same cell which is in your result set.

      helps?

      Karol

      Author's profile photo Vaishali Bedi
      Vaishali Bedi

      Hi,

      Our requirement is to put conditional formatting in footer of KPI View component.

      Exceptions are created in SAP BW and they are coming well in crosstab component, but when we assign the same data value to Footer or Value part of KPI View then alert color is not coming.

      Can anyone please suggest, where and how to define css for this.

      Thanks

      Vaishali

      Author's profile photo Former Member
      Former Member

      Dear  karol,

      its very useful component and am using it for CEO KPI works fine and meet my requirement but i have one question , how can i change the background of the component itself like i want it to be black

      Author's profile photo Darshil shah
      Darshil shah

      Hi Karol,

      I am new to the design studio SDK component however I have created ready to install file of Martin`s custom SDK component called IFrame. I downloaded complete folder from GitHub which include .JS file, .MTF file, .XML file, .ZTL file etc. to create installation file for design studio but here for the KPI Tile component only .BIAPP file is available in github.

      I would like to know how to create ready to install file for KPI Tile.

      Thanks in advance.

      Thanks,
      Darshil

       

      Author's profile photo Alex Cruickshank
      Alex Cruickshank

      Hi Karol

      This component is not available for use in Lumira designer for any applciations migrated to UI5 Mode. ive tried inspecting the source code but cant find where/what needs changing. Are you able to update the source code in the repo?

      Thanks

      Alex

      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      Hi Alex,

      since now it is again possible to find own blogs in the community (thanks to the community development team) I place the answer here.

      check the new blog on it.

      https://blogs.sap.com/2018/11/14/work-arond-for-design-studio-classic-sdk-controls-in-m-mode/