Skip to Content

Design Studio SDK: Kpi View Component

September 17, 2014 | 1,693 Views |
 design studiodesign studio sdkformer jive documentsap zensapzenzen
Follow

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

To report this post you need to login first.

31 Comments

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

    2. Karol Kalisz
      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;

      }

      (0) 
      1. 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

        (0) 
        1. Karol Kalisz
          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

          (0) 
          1. 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

            (0) 
  2. 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.

    (0) 
    1. Karol Kalisz
      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

      (0) 
      1. 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

        (0) 
        1. Karol Kalisz
          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

          (0) 
          1. 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?

            (0) 
          2. 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

            (0) 
  3. Former Member

    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

    (0) 
      1. 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

        (0) 
  4. 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?

    (0) 
      1. 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

        (0) 
        1. Karol Kalisz
          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

          (0) 
  5. 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

    (0) 
  6. 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!

    (0) 
    1. Karol Kalisz
      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

      (0) 
  8. Former Member

    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

    (0) 
  9. 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

    (0) 
  10. 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

     

    (0) 
  11. 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

    (0) 

Leave a Reply