Purpose

today a checkbox group with image (as optional) visualization.

How does it looks like? (click to animate GIF)

chekcbox group, with corresponding image per entry.

Available Properties

Scripting Functions

Events

Example Application

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

• KarolKalisz/DesignStudioBiAppRepository · GitHub
• or take it as newest ZIP: Releases · KarolKalisz/DesignStudioBiAppRepository · GitHub

Releases

• Release Adding CheckBox Group Component · KarolKalisz/DesignStudioSdkPack · GitHub

Source Code & Licensing

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

Important MaintenanceNotice (... 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

Ps. only basic properties are attached, if some are missing - just make a comment.

LInk to SAPUI5: SAPUI5 SDK - Demo Kit

Some lessons learned I wanted to share with you...

Design Studio 1.3

Sap Hana 1.0 SP7

• Adding the same Datasouce or copying the first one makes no difference.
• Both scenarios  have the same runtime

• Make use of the Global Script Variables, set the value for the GSV once and reuse them

var_end = Convert.subString(APPLICATION.getInfo().dateNowInternalFormat, 0,4);

DS_1.setFilterExt("Year",var_end);

TILE_1_SUBTITLE.setText(var_end);

• Get Data once and filter in later stages.

var var_range = var_start + " - " + var_prev;

DS_6.loadDataSource();

Get Data from DS_6 over Multiple years

DS_6.setFilterExt(("Year", var_range);

DS_6.setFilterExt("Vendor", var_vendor);

DS_6.setFilterExt("VendorName",var_name);

DS_6.setFilterExt("VATRegistration",var_vat);

Filter DS_6 in a later stage for one year

g_vim=(DS_6.getDataAsString("Counter", {"Year": var_prev}));

TILE_6_VALUE.setText(g_vim);

TILE_DETAILS_6_VALUE.setText(g_vim);

• Set Dynamic variables on startup

var_end = Convert.subString(APPLICATION.getInfo().dateNowInternalFormat,0,4);

var_prev = Convert.floatToString((Convert.stringToFloat(var_end)) - 1);

var_prev = Convert.subString(var_prev,0,4);

var_start=Convert.subString(Convert.floatToString((Convert.stringToFloat(var_prev)) - 4),0,4);

var var_range = var_start + " - " + var_prev;

• Merged variables does not work on hana when coping with different views.  Workaround =

        Global script varibale

             var_vendor string false false

        on startup

             var_vendor=DS_1.getVariableValueExt("HANA_VARIABLE_VENDOR");

             APPLICATION.doBackgroundProcessing();

        on background

             DS_3.setFilterExt("Vendor", var_vendor);

Purpose

you are writing SDK component and want to allow eg. own objects as return types.

Example

you want to return an array from a script function:

SomeArray getAsKeyLabelValueArray ();

First Step

Define the Array-Element in your ZTL like this:

class org.kalisz.karol.scn.pack.KeyLabelValue {  String key;  String label;  float value;
}

Second Step

Define the Array in your ZTL like this:

class org.kalisz.karol.scn.pack.KeyLabelValueArray extends Array {  org.kalisz.karol.scn.pack.KeyLabelValueArray (org.kalisz.karol.scn.pack.KeyLabelValue b);
}

Third Step

now, you can create your method and retrurn this array.

org.kalisz.karol.scn.pack.KeyLabelValueArray getAsKeyLabelValueArrayTest () {*    var a = [];    var itemDef1 = {        "key": "A",        "label": "Text A",        "value": 20    };      a.push(itemDef1);   var itemDef2 = {        "key": "B",        "label": "Text B",        "value": 20    };      a.push(itemDef2);    return a;
*}

Result in BIAL

• you will be able to loop on this object

var keysAndlabelsAsArray = OBJECT_COMPONENT.getAsKeyLabelValueArrayTest();
keysAndlabelsAsArray.forEach(function(element, index) {  LISTBOX_1.addItem(element.key, element.label + "( " + element.value + " )");
});

Live Example soon ...

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?

Available Properties

Scripting Functions

Events

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

• Release Improvement in Colleaction & Array, KPI View Component · KarolKalisz/DesignStudioSdkPack · GitHub

Source Code & Licensing

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

Important MaintenanceNotice (... 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

Purpose

Simple Selection Component (like a drop down) with Image in addition. It supports "selection" event, which can be used for some other actions.

Implementation

Using Design Studio SDK, this component is accepting an list of "key, text, image" elements. Those elements are pushed into a carousel.

Short Demo (as animated GIF)

Styles

To not overload the component with "default" styles, in basic version it is quite primitive. But, there are 2 declared css classes which you can overwrite. Below an example, you need to set the CSS class on component level, like:

and here the corresponding CSS:

.redefined .scn-pack-ImageCarousel-SelectedImage {  border: solid 3px #000000 !important;
}
.redefined .scn-pack-ImageCarousel-Image {  width: 100px !important;  height: 80px !important;  border: solid 3px transparent;  margin-top: 23px; /* for center: (height - width) / 2*/  margin-left: 23px; /* for center: (height - width) / 2*/
}

Available Properties

Scripting Functions

Events

Example Application

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

• DesignStudioBiAppRepository/SDK_IMAGE_CAROUSEL at master · KarolKalisz/DesignStudioBiAppRepository · GitHub
• or as ZIP: Release Adding Image Carousel Component Example · KarolKalisz/DesignStudioBiAppRepository · GitHub

Releases

• Release Adding Image Carousel Component · KarolKalisz/DesignStudioSdkPack · GitHub

Source Code & Licensing

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

Important MaintenanceNotice (... 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!

P.S.

Michael Howles: wished a carousel in response to Question: What would you like to see as SDK Component?

Purpose

Date-based navigation (roll days, months) in BIAL script directly, format days to own formats.

Show Case

You can use this component like this:

var today = APPLICATION.getInfo().dateNowInternalFormat;
DATEOBJECT_1.initializeWithInternalDate(today);
DATEOBJECT_1.rollWeeks(-4); // go back by 4 weeks
var calendarWeek = DATEOBJECT_1.getCalendarWeek();
var dateFormatted = DATEOBJECT_1.format("DD.WW.YYYY"); // -> results in eg. 01.08.2012

Background

Solution for date-based navigation in Filters, eg. get the current date and set the filter on data source by DATE - 4 weeks. Or get the current calendar week from todays day, and get the calendar week which was 2 weeks before. This component contains only some logic in the BIAL script (no rendering).

Technical Solution

I have long searched for some option to make this running in BIAL script. The current solution is probably not the best, but this was the only one I can offer for 1.3 release. It is based on "pre-generated JSON values for concrete days.

Secont "problem" was that SDK is always sending all properties to the client, therefore I hold only the "oneDay" property as this is small, I need to clean up always the "days" property as this is holding a huge array of days. Seems to work correctly - the array will never be send to client.

Available Properties

Scripting Functions

Example Application

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

• DesignStudioBiAppRepository/SDK_SIMPLEDATE at master · KarolKalisz/DesignStudioBiAppRepository · GitHub

In this example all methods are shown behind the buttons, try it out!

Current Restrictions

• currently, in BIAL scripts only restricted functional scope is possible, therefore the dates are as "big array" (but performance seems to be ok)
• restricted to navigation between 31st December 2004 and 1st January 2020 - this shoudl be ok for normal use

Releases

• Release of Simple Date Object in v. 1.0 · KarolKalisz/DesignStudioSdkPack · GitHub

Source Code & Licensing

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

Important MaintenanceNotice (... 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 (in compatible way), 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.

Q&A

Feel free to add any comments or ideas which can go into future versions, or feel free to take a copy and add extensions on your own.

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?

Available Properties

Scripting Functions

Events

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

• Release Improvement in Colleaction & Array, KPI View Component · KarolKalisz/DesignStudioSdkPack · GitHub

Source Code & Licensing

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

Important MaintenanceNotice (... 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

In Design Studio, we would like to create 3 cascading dropdowns (Site > Area > Work Center) which will only show the corresponding areas / work centers in the dropdown list when user select a specific site / area.

Using universe as data source, we are not able to use the hierarchy defined within the universe.   To achieve the requirement, we use the following setup.

Setup

1. Define 3 global variables to hold user selected site, area and work center values.

2. Define the data source query filter with optional prompt on both Site and Area.

As the prompt is optional, all sites, areas and work centers are included when prompts have no value.

3. Create 3 dropdown for Site , Area and Work Center.  Fill up these 3 dropdowns in the "On Startup" application event using the defined data source DS_1.

4. In site dropdown "On Select" event.  Update global variable g_site, g_area and g_workCenter.  In this example we reset g_area and g_workCenter to default value to illustrate when g_site changed, existing g_area and g_workCenter needs to be invalidate.  Update DS_1 site and area prompts with the new values.

5. In area dropdown "On Select" event.  Update global variable g_area and reset g_workCenter.  Update DS_1 area prompt with the selected area.

6. In work center dropdown "On Select" event, update global variable g_workCenter.

7. In DS_1 "On Result Set Changed" event.  Update both area and work center dropdown.  As the area and work center dropdown are refreshed, set the dropdowns with user selected values.

Result:

When application start, both prompts have no values and all dropdowns are not filter.

By selecting a specific site from the site dropdown, both area and work center drop down are updated to show only area and work center under the selected site.

Selected a specific area will update the work center dropdown to show only work center under the selected area.

Selected a new site from the site dropdown will update both area and work center dropdown with all areas and work centers under the newly selected site.  It also reset the previous selected area and work center to "All".

When a specific area is selected, the area dropdown will only contain 2 items.  To switch form a selected area back to all areas under the selected site, select the "All" item in the area dropdown, which will refresh both area and work center dropdown to show all areas and work centers again.

After selecting "All" in the area dropdown.

Note:

Since we are using data source prompt, on each selection it will involve a round trip to update resultset.  This will impact the application performance.

Purpose

Simple Tree, for work manual nodes. You can create own structure by parent-child relations.

How does it looks like? (click to animate GIF)

Or as static image.

Available Properties

Scripting Functions

Events

Example Application

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

• KarolKalisz/DesignStudioBiAppRepository · GitHub
• or take it as newest ZIP: Releases · KarolKalisz/DesignStudioBiAppRepository · GitHub

Releases

• Release Adding Tree Component · KarolKalisz/DesignStudioSdkPack · GitHub

Source Code & Licensing

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

Important MaintenanceNotice (... 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

Ps. only basic properties are attached, if some are missing - just make a comment.

LInk to SAPUI5: SAPUI5 SDK - Demo Kit

Purpose

Date-based navigation (roll days, months) in BIAL script directly, format days to own formats.

Show Case

You can use this component like this:

var today = APPLICATION.getInfo().dateNowInternalFormat;
DATEOBJECT_1.initializeWithInternalDate(today);
DATEOBJECT_1.rollWeeks(-4); // go back by 4 weeks
var calendarWeek = DATEOBJECT_1.getCalendarWeek();
var dateFormatted = DATEOBJECT_1.format("DD.WW.YYYY"); // -> results in eg. 01.08.2012

Background

Solution for date-based navigation in Filters, eg. get the current date and set the filter on data source by DATE - 4 weeks. Or get the current calendar week from todays day, and get the calendar week which was 2 weeks before. This component contains only some logic in the BIAL script (no rendering).

Technical Solution

I have long searched for some option to make this running in BIAL script. The current solution is probably not the best, but this was the only one I can offer for 1.3 release. It is based on "pre-generated JSON values for concrete days.

Secont "problem" was that SDK is always sending all properties to the client, therefore I hold only the "oneDay" property as this is small, I need to clean up always the "days" property as this is holding a huge array of days. Seems to work correctly - the array will never be send to client.

Available Properties

Scripting Functions

Example Application

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

• DesignStudioBiAppRepository/SDK_SIMPLEDATE at master · KarolKalisz/DesignStudioBiAppRepository · GitHub

In this example all methods are shown behind the buttons, try it out!

Current Restrictions

• currently, in BIAL scripts only restricted functional scope is possible, therefore the dates are as "big array" (but performance seems to be ok)
• restricted to navigation between 31st December 2004 and 1st January 2020 - this shoudl be ok for normal use

Releases

• Release of Simple Date Object in v. 1.0 · KarolKalisz/DesignStudioSdkPack · GitHub

Source Code & Licensing

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

Important MaintenanceNotice (... 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 (in compatible way), 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.

Q&A

Feel free to add any comments or ideas which can go into future versions, or feel free to take a copy and add extensions on your own.

Purpose

Work with Collections with sorting feature. This is usefull when you have some arrays, which you want to put together and sort.

This component is created with collaboration with Michael Howles.

Thanks Michael for allowing the reuse of the sorting-code from your blog Design Studio SDK - Get Top/Bottom N rankings with a little less code, as response on my primitive blog How to get "Top X" our of resultset

Supports

Items with

• key
• label
• value

-> See also available extensions in How to Use Extended Sdk Collection to handle "properties"

Functions

The Coolest Function

Example Application

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

• DesignStudioBiAppRepository/SDK_COLLECTION at master · KarolKalisz/DesignStudioBiAppRepository · GitHub
• or as ZIP: Release Adding Example for Collection · KarolKalisz/DesignStudioBiAppRepository · GitHub

Releases

• Release 1.0.8: Adding Collection Component · KarolKalisz/DesignStudioSdkPack · GitHub

Source Code & Licensing

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

Important MaintenanceNotice (... 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

Purpose

Another response to MANOJ KUMAR's Accordion Menu in SAP Design Studio, and caused by public holiday and weekend trip - unfortunately also to the post by Michael Howleson the SDK way of doing in Design Studio SDK - SAPUI5 Accordion Menu.

There are 2 reasons why I place this component:

• the fist one is - I have already started it directly after Manoj has posted the blog and before Michael has posted his version (work interrupted by no time at evening)
• and the second one (more important for me) is - this one has completely different approach - and in a blog which I want to write a bit later I would like to have an open discussion on good/not so good ideas and approaches.

How does it looks like? (click to animate GIF)

or with big images like this.

Available Properties

Scripting Functions

Events

Example Application

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

• KarolKalisz/DesignStudioBiAppRepository · GitHub
• or take it as newest ZIP: Releases · KarolKalisz/DesignStudioBiAppRepository · GitHub

Releases

• Release Adding (dynamic) Accordion Component · KarolKalisz/DesignStudioSdkPack · GitHub

Source Code & Licensing

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

Important MaintenanceNotice (... 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

The goal of this document to explain how you can make an charttype selector.  When we click on the chart tab we want to see a list of possible charttypes selectable for the user.

we create a POPUP component, inserted a GRID component ROW=6 COLUMN=1

Set WIDTH, Height and the positioning of your popup, in the grid you can set width/height to auto and the other parameters to 0.

Put in every column a BUTTON component, set as class:

1. ICON_CHART_PIE
2. ICON_CHART_LINE
3. ICON_CHART_RADAR
4. ICON_CHART_BAR
5. ICON_CHART_COLUMN
6. ICON_CHART_BUBBLE

BUTTON >> Event scripting:

CHART.setChartType(ChartType.PIE); respectively for each button.

If you want the popup disappear after selection set also: POPUP.hide();

On the footer-graph-Icon we have scripted on event: POPUP.show();

On the footer-table-Icon we have scripted on event: POPUP.hide();

Applies to:

SAP BusinessObjects Design Studio 1.1 and SAP BusinessObjects Business Intelligence Platform (4.0 SP5 or higher and 4.1). For more information, visit theSAP BusinessObjects Design Studiohomepage.

Summary

This article describes how to use CSS style editor to modify styles of individual components as well as process of defining common style to set of components across different Analysis apps using CSS Class and custom CSS file. The content in this is intended for beginners in design studio space and developers for those who would wish to change the styling of their existing analysis apps created using design studio 1.0.

Author: Mallikarjuna Chary Narayandas

Created on:June 08, 2013

Author Bio

The author has worked on several SAP BusinessObjects projects and has experience on using all the SAPBusinessObjectsBusiness Intelligenceplatform tools. Author has experience on working with SAPBusinessObjectsmobile including designing and accessingBusinessObjectscontent (Webi Reports, Crystal Reports, Dashboards, Analysis and Information Spaces) through IPAD /IPhone/ Android.

Introduction

This article describes how to use CSS style editor to modify styles of individual components as well as process of defining common style to set of components across different Analysis apps using CSS Class and custom CSS file. The content in this is intended for beginners in design studio space and developers for those who would wish to change the styling of their existing analysis apps that were created using design studio 1.0.

CSS Styling Properties

Design Studio offers different properties related to CSS styles based on the level such as application level, component level etc. Following sections give the details of these properties and their usage.

Application:

Custom CSS is the property available in application properties for the design studio apps and this property lets developers choose any custom CSS file to be used for the styling of the analysis application or dashboard. Refer to below sections to read the steps to use this property.

Note:CSS style sheets work properly in design studio only if they are in applicable and appropriate format.

Component:

Custom Class andCSS Style are the properties available at component level within display properties and these properties let developers define the styling of components such as font size,  background etc., for each individual component that has these properties applicable. Custom Class can be assigned to a group of components at a time to perform quick styling by selecting them using Shift>Select. Refer to below sections to read the steps to use these properties.

Modify CSS styling of Analysis Application

Developers can now change the look and feel of analysis application and it’s components by changing the existing CSS Style of the components using CSS style editor or by defining standard CSS style across a set of components or for a set of applications using CSS class. Developers can define CSS classes in a custom CSS file with the required CSS styling and re-use it across numerous analysis apps designed using Designed studio

Steps to change CSS Style of Individual components using CSS Style Editor

1. Select a component that you want to change the styling for such as Text or Panel component.
2. Go to properties on right side and Click on CSS Style to open the CSS Style editor
3. Type the code in below format to change the styling of text of the component.

Ex:  font-size: 18px; weight: bold; font-style: italic; color: blue;

Steps to change CSS Class of Multiple components using CSS Style Editor

1. Use Shift>Select  to choose multiple similar components(Ex: Panels) that you want to update the CSS Class to ensure you get common styling for the set of panels selected.
2. Go to properties on right side and Choose the CSS Class available.

          Ex: CSS Class “myPanel” from “Analysis_template.css” file.

     Steps to assign CSS file to Custom CSS property of applications

          Developer need to ensure that they have the CSS file in the root folder of the application by navigating to the Application folder using File>Open               Repository Folder option

1. Select the “Application name” on the left side in the layout panel
2. Go to properties on right side and click on Custom CSS option and select the CSS file from the listed files.

CSS methods for Scripting

Developers can use the methods getCSSClass and setCSSClass within the scripts to read the CSS Class or to assign CSS Class to different set of components respectively.

Limitations

One of the current limitations is that only CSS attributes (font size, color, weight, style and text decoration) are supported for Text and Panel components. There are many new features planned for future releases of design studio, so I can confidently say SAP would make Design Studio as first choice and best product for all analysis and dashboards requirements on BW and HANA sources.

References

SAP BusinessObjects Design Studio

Space: SAP BusinessObjects Design Studio | SCN

For more information, visit  SAP BusinessObjects Design Studio References

Disclaimer and Liability Notice

This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is not supported by SAP. Changes made based on this information are not supported and can be overwritten during an upgrade.

SAP will not be held liable for any damages caused by using or misusing the information, code or methods suggested in this document and anyone using these methods does so at his/her own risk.

SAP offers no guarantees and assumes no responsibility or liability of any type with respect to the content of this technical article or code sample, including any liability resulting from incompatibility between the content within this document and the materials and services offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the content of this document

Purpose

Visualize top or bottom members based on the full result set. As you do not always have access to query level, you can use this component for "client side" filtering and sorting - and at the end show only the top 5 members.

Visualization

similar to the original of Design Studio SDK: Leader Board Component, with the big difference: you do not need to fill it in manually.

As usual, some animated gif (click to animate):

What is In?

First of all, this is my first data bound component, so probably it is not perfect.. I have just tested it with a simple query, and it is set to only single row/column selection for data binding.

• you can bind data as commonly defined in SDK - data source and data selection properties are available
• you can set some properties, currently only in the design time (perhaps later some BIAL functions can be add - on request, requirement)
• you can assign fallback picture and when you place at the same location other pictures with keys, you get also pictures visible
• option of making it for Top X or Bottom X

Data Binding

After you have assigned data source, open the data selection dialog and choose one column, or row with measures, like here:

Available Properties

Work with Images

you can assign images to the entries, the image must be named as the key and the extensions must be same as the extension of fallback image. In case the image cannot be taken from repository (not existing) - fallback image will be shown.

Scripting Functions

Events

Example Application

An Application with example can be downloaded at the BIAPP Repository (name SDK_DATA_LEADERBOARD):

• KarolKalisz/DesignStudioBiAppRepository · GitHub
• or take it as newest ZIP: Releases · KarolKalisz/DesignStudioBiAppRepository · GitHub

Releases

• Release Adding Data Bound Leader Board (my first data bound component) · KarolKalisz/DesignStudioSdkPack · GitHub

Source Code & Licensing

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

Important MaintenanceNotice (... 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 or Karol's SDK Data Bound Components

Purpose

Visualize top or bottom members (or both) based on the full result set. As you do not always have access to query level, you can use this component for "client side" filtering and sorting - and at the end show the X tops and flops with delta notification.

Visualization

currently I have not created corresponding non-data-bound component, so here the full description.

As usual, some animated gif (click to animate):

What is In?

First of all, this is my second data bound component - it is based on the Design Studio SDK: Data Bound Leader Board (Top/Bottom Selection) component. I have just tested it with a simple query, and it is set to only single row/column selection for data binding.

• you can bind data as commonly defined in SDK - data source and data selection properties are available
• you can set some properties, currently only in the design time (perhaps later some BIAL functions can be add - on request, requirement)
• you can assign fallback picture and when you place at the same location other pictures with keys, you get also pictures visible
• option of making it for Top X or Bottom X or Both (Top/Flop)

Data BindingAfter you have assigned data source, open the data selection dialog and choose one column, or row with measures, like here:

Available Properties

Work with Imagesyou can assign images to the entries, the image must be named as the key and the extensions must be same as the extension of fallback image. In case the image cannot be taken from repository (not existing) - fallback image will be shown.
Scripting Functions

Events

Example ApplicationAn Application with example can be downloaded at the BIAPP Repository (name SDK_DATA_LEADERBOARD):

• KarolKalisz/DesignStudioBiAppRepository · GitHub
• or take it as newest ZIP: Releases · KarolKalisz/DesignStudioBiAppRepository · GitHub

Releases

• Release Add Data Bound Top/Flop Component · KarolKalisz/DesignStudioSdkPack · GitHub

Source Code & Licensing

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

Important MaintenanceNotice (... 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 or Karol's SDK Data Bound Components

Purpose

Visualize top or bottom members (or both) based on the full result set as a simple chart based on value or delta. As you do not always have access to query level, you can use this component for "client side" filtering and sorting - and at the end show the X tops and flops with delta notification.

Implementatation

I just used sub components to paint a chart, there is no charting or graphic library behind. This means also that this implementation is good for dashboards, but not so much for charting where many data points are required - there jsut go for standard.

Visualization

As usual, some animated gif (click to animate). This component has more flexibility for Ux changes by properites.

What is In?

First of all, this is my second data bound component - it is based on the Design Studio SDK: Data Bound Top/Flop (Top/Bottom with Average) component. I have just tested it with a simple query, and it is set to only single row/column selection for data binding.

• you can bind data as commonly defined in SDK - data source and data selection properties are available
• you can set some properties, currently only in the design time (perhaps later some BIAL functions can be add - on request, requirement)
• you can assign fallback picture and when you place at the same location other pictures with keys, you get also pictures visible
• option of making it for Top X or Bottom X or Both (Top/Flop)

Data BindingAfter you have assigned data source, open the data selection dialog and choose one column, or row with measures, like here:

Available Properties

Work with Imagesyou can assign images to the entries, the image must be named as the key and the extensions must be same as the extension of fallback image. In case the image cannot be taken from repository (not existing) - fallback image will be shown.
Scripting Functions

Events

Example ApplicationAn Application with example can be downloaded at the BIAPP Repository (name SDK_DATA_LEADERBOARD):

• KarolKalisz/DesignStudioBiAppRepository · GitHub
• or take it as newest ZIP: Releases · KarolKalisz/DesignStudioBiAppRepository · GitHub

Releases

• Release Add Top Flop Chart Component · KarolKalisz/DesignStudioSdkPack · GitHub

Source Code & Licensing

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

Important MaintenanceNotice (... 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 or Karol's SDK Data Bound Components

Purpose

Work with Collections with sorting feature. This is usefull when you have some arrays, which you want to put together and sort.

This component is created with collaboration with Michael Howles.

Thanks Michael for allowing the reuse of the sorting-code from your blog Design Studio SDK - Get Top/Bottom N rankings with a little less code, as response on my primitive blog How to get "Top X" our of resultset

Supports

Items with

• key
• label
• value

-> See also available extensions in How to Use Extended Sdk Collection to handle "properties"

Functions

The Coolest Function

Example Application

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

• DesignStudioBiAppRepository/SDK_COLLECTION at master · KarolKalisz/DesignStudioBiAppRepository · GitHub
• or as ZIP: Release Adding Example for Collection · KarolKalisz/DesignStudioBiAppRepository · GitHub

Releases

• Release 1.0.8: Adding Collection Component · KarolKalisz/DesignStudioSdkPack · GitHub

Source Code & Licensing

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

Important MaintenanceNotice (... 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

Update / 24.10.2014

Small corrections for the component, eg. opening the same window again is working, and there is a fallback option in case the window is already opened.

Purpose

Generic Drag & Drop Control for all use cases. I have styled it a bit, now it can be used.

This component is created as response to APPLICATION.openNewWindow when upper limit to URL length is hit

How does it looks like?

the URL boundaries (2048 characters or so) can be only overcome via POST method.

Available Properties

Scripting Functions (preview)

Example Implementation for this call:

OPENWINDOWPOST_1.removeAllParameters();
OPENWINDOWPOST_1.setUrl("http://localhost:55555/aad/web.do");
OPENWINDOWPOST_1.addParameter("APPLICATION", "SDK_OPENWINDOW_POST");
OPENWINDOWPOST_1.addParameter("designersessionid", "25d9c2721c084d8c98684721835379d8");
OPENWINDOWPOST_1.triggerExecution();

Comparison before and after

     Assumption:

     you want to call URL http://localhost:8080/web.do?P1=V1&P2=V2

     Technical View:

          URL: http://localhost:8080/web.do

          Param1: P1

          Value1: V1

          Param2: P2

          Value2: V2

     Your code before:

var url = "http://localhost:8080/web.do";
url = url + "?";
url = url + "P1" + "=" + "V1";
url = url + "P2" + "=" + "V2";
APPLICATION.openNewWindow(url);

     Your code after:

     1) in Properties View you have tto set the url property to "http://localhost:8080/web.do"

     2) in script you need to add all parameters:

OPENWINDOWPOST_1.removeAllParameters();
OPENWINDOWPOST_1.addParameter("P1", "V1");
OPENWINDOWPOST_1.addParameter("P2", "V2");
OPENWINDOWPOST_1.triggerExecution();

This code will create a "form" in browser and submit the content via POST.

Example Application

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

• KarolKalisz/DesignStudioBiAppRepository · GitHub
• or take it as newest ZIP: Releases · KarolKalisz/DesignStudioBiAppRepository · GitHub

Releases

• Link to Latest Release containing this Component

Source Code & Licensing

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

Important MaintenanceNotice (... 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

Purpose

There is input filed, but no "multil line input field..". Now it is, the component for today - TextArea.

How does it looks like? (click to animate GIF)

a simple area where you can input text..

Available Properties

Scripting Functions

Events

Example Application

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

• KarolKalisz/DesignStudioBiAppRepository · GitHub
• or take it as newest ZIP: Releases · KarolKalisz/DesignStudioBiAppRepository · GitHub

Releases

• Release Text Area and Fix in Open Window Post, correcting icons · KarolKalisz/DesignStudioSdkPack · GitHub

Source Code & Licensing

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

Important MaintenanceNotice (... 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

Ps. only basic properties are attached, if some are missing - just make a comment.

LInk to SAPUI5: SAPUI5 SDK - Demo Kit