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?
| 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:
- DesignStudioBiAppRepository/SDK_KPIVIEW at master · KarolKalisz/DesignStudioBiAppRepository · GitHub
- or as ZIP: Release Example for KPI View · KarolKalisz/DesignStudioBiAppRepository · GitHub
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
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).
It worked with adding all the styles mentioned above into the Custom CSS. 🙂
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;
}
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.
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
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
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
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
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.
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
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?
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
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?
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
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
Hi Scott,
Have you tried using Scripting? KPIVIEW.setDataSelection..;
Stein
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
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
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?
I had the same issue which was solved by upgrading to DS 1.6.
Regards Stein
Hi,
have you add the class "mytile" into CSS class property in KPI View?
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
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
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.
Hope this helps for a good start, check out in google how CSS works.
Karol
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
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!
Hello Maria,
You could just update the KPI View component each time a user changes the target month.
Scott
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!
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:
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
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
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
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
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
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/