Is there a way to apply formatting only on a certain text within a string in a Crosstab?

I've looked into CSS class on crosstab, and I could only apply formatting to the whole data area, or the whole column, not a portion of the text.

For example:

- highlight or change font color of the last 3 characters in a Crosstab column?

A     210-ABC

B     313-XYZ

C     245-HGY

Is it possible in CSS, or is there any other way to achieve this?

Regards,

Lawrence

Hi,

I am using SAP Design Studio 1.6 and also I have installed SCN Community SDK Extensions, for using Choropleth map.

I went through SCN Design Studio SDK Development Community for installation.

According to tutorial SAP Design Studio Choropleth Maps Design Time Demo - YouTube I need to add maps through Load Map Option under Mapping Tab. But when I am trying to use "LOAD MAP" option, it is not working i.e. not showing any dropdown for "Canned Map".

Is there any issue with SDK extensions? or there versions? Can you please help with some useful way or other option, so that I can use of maps in application.

Also are these SCN Community SDK extension not compatible with Design studio 1.6? (Being precise on backend SAP HANA is installed) So in that case even GeoJSON files are not working as they need BI or BW at backend.

Thanks,

Nupur

Dear Experts,

I am looking for renaming column in a crosstab in my design studio dashboard. I know there is no direct option for this and we have to use CSS code to rename the default column name. I want to do this at design studio level as I am not allowed to change the dimension object name at universe/HANA view level.

I searched on SCN and found the below post where IIya has mentioned some code and I tried that but its actually didn't worked and post is still unanswered.

https://scn.sap.com/thread/3598154

Please guide me on this.

Thanks & Regards,

Jiten

Question,

trying to update navigational_panel dynamically with different measures based on selection.

NAVIGATIONPANEL_1 does not seem to have setselection option.

am I missing a trick here....

Regards

Hello,

I'm trying to display the results of a filter panel selection in a variable and append that variable to a URL so that I can pass parameters from DS to WebI.  What is the correct syntax for displaying filter results in a variable?

I'm search SCN but was not able to find any pertinent information.

Regards,

Donnell

Hi,

I have created an application with multiple components and now I want to create a (portable fragment) bookmark of each component.

With Bookmark.PortableFragmentBookmark.saveBookmark("Test", Component, "BookmarkTitle") I have created the bookmark in the root directory (Analysis Application Bookmarks).

But how can I save the bookmark in a different folder, e.g. "Analysis Application Bookmarks/Sales"?

With Bookmark.PortableFragmentBookmark.assignToFolder it should be possible, but how do I get the folderID and bookmarkID?

Isn't it possible to define the folder directly when I save the bookmark?

Thanks in advance.

Regards,

Christoph

Hi,

I have been struggling for a while now to get our database hierarchy in Design Studio 1.6.

We have set the navigation path required for the required hierarchy in Information Design Tool (IDT) and hierarchy is getting reflected while checking on Web Rich Client. However, I am not getting to activate the hierarchy on Design studio's edit initial view neither I am able to use the set filter function on the components. I am also not getting the "Members of Filltering" option in the context menu in filters of edit initial view.

Have been searching online all the time but since there are several options I am confused now whether hierarchy setup using IDT can be of any use on the Design Studio. Can anybody please advise.

Thanks,

Ragesh

SAP Design Studio - Webinars

The SAP Design Studio webinars offer interactive presentations on a variety of topics.

Content is presented by experts from SAP and our broad partner & customer ecosystem.

• Webinar Dates & Times: Dates are subject to change; webinars will start at 7am PST to cover as many global regions as possible.
• Registration links: will be enabled a few days before the scheduled webinar date.
• Recordings: will be posted no later than a week after the event.

Please subscribe to email notifications for this page: you will receive notifications of any updates, including new webinar content, dates and availability of recordings.

Upcoming Webinars - Registrations			Date	Presenter
		Expert Webinar Design Studio - Enterprise Ready Analytics - Performance, Scale, Troubleshooting	tbd	tbd
		Expert Webinar Beautifying your Application - the latest Design Studio capabilities	tbd	tbd
		ASUG Webinar Design Studio Ready-to-Run Application & Templates	Mar 8	JD
		Expert Webinar Real-time Dashboards	Mar 10	DD& MM
		Expert Webinar Working with Data Sources	Mar 24	SD& DS
		Expert Webinar Table Design in Analysis Office: Formulas & Styling	April 7	FR& JS& RM
		ASUG Webinar Get Ready: SAP BusinessObjects Design Studio Deep Dive ASUG Pre-con Preview	April 12	IH
		Expert Webinar Administration Best Practices for SAP Design Studio BI Platform Add-on	April 21	PB& PS
		Expert Webinar Creating User-Friendly Applications	May 5	AMJ& MA
		ASUG Webinar What's new with Design Studio 1.6 Feature Pack	May 10	JD
		Expert Webinar Bookmarking in SAP Design Studio	May 19	CM& DC& PS
		ASUG Webinar Are You Ready to Migrate from Dashboards to Design Studio?	June 8	IH
h
Webinar Recordings			Date	Presenter
		Expert Webinar What is SAP Design Studio and why would I use it? (recording)	Feb 25	JC
		Expert Webinar Developing Extensions using the SAP Design Studio SDK (recording)	Feb 11
		2015
		Expert Webinar What's New in Design Studio 1.6? (recording)	Dec 10
		Expert Webinar Design Studio Advanced Geo Dashboards (recording)	Dec 3
		Expert Webinar SAP Analytics - Integration of SAP BI Platform and SAP Design Studio (recording)	Nov 24
		Expert Webinar Feature Deep Dives: Report to Report Interface, Bookmarking and Data Binding (recording | pdf)	Oct 15
		Expert Webinar Advanced Visualizations & Dashboards at Palo Alto Networks, with Archius (recording | pdf)	Oct 01
		Expert Webinar Creating Dashboards with the Ad-hoc Analysis, Generic Analysis, and Data Discovery Templates (recording)	Aug 13
		Expert Webinar An Introduction to Creating Components with the Design Studio SDK(recording)	Jul 30
		Expert Webinar What's new in SAP Design Studio 1.5 (recording | presentation)	Jun 25
		Expert Webinar Creating Effective and Engaging Dashboards and Visualizations (recording)	Jun 17
		Expert Webinar SAP Lumira & SAP Design Studio - When to use which (recording)	May 20

SAP Design Studio and Lumira In-Person Workshops:

Upcoming Workshops*:

* If a workshop above does not have a live registration link, please contact your local SAP representative for information about workshop participation

Completed Workshops:

Finally! After Mike has created ans posted the ultimative DataIterator (Design Studio 1.6 SDK - Data Iterator - Read your data row by row finally!) I could find a good way how to use the Bring Your Own Datasource (Design Studio SDK (1.4) - Bring Your Own (BYO) Datasource) and create a scenario which were not available until now.

* Data Blending / Joining / Mixing - creation of one (new) data source based on 2 data sources (independent of the source system)

Short History

For the data blending / mixing / joining I wrote a blog some time ago Mixing Data from 2 Result Sets together (join, select) with a prototype component Design Studio SDK: Result Set Mixer Component. This was prototyping - which works, but has a lot of restrictions.

The Scenario

Very often I hear from customers, also I have on my own requirement list, following requirement - how to bind some data which are available in 2 separate data sources (queries) and IT will not put them together - like project spends (controlling query) and project status (program management query). All are searching for putting such data together.

Another example I will use is following: one query has sales data (what, where, quantity, price) and second query has buying data (what, price). I would like to have a query with revenue on what and where.

In Pictures, I want to have:

Query 1:

Query 2:

Result:

How is the revenue calculated?

I use standard scripting for that:

  var soldValue = quantity * price;  var buyValue = quantity * buingPrice;    var revenue = soldValue - buyValue;

This script executes per row of the first data source. And for this the Data Iterator is coming into work!

Technical Setup

From technical side, I need to have 3 data sources - the first 2 are bringing the data, the 3rd one is waiting to be filled in. In the attached example I use BYO data source to have it easier explained and offline.

Both data sources which are bringing the data are connected to data iterator - it means, as soon the iterators are filled in (which is currently going through browser) the work can start.

Script in both Data Iterators (Event: onDataChanged)

if(MIX_READY) {  GLOBAL_SCRIPTS.merge();
}
MIX_READY = true;

I use the global variable as semaphore to assure both are initialized

the "merge" function makes the magic:

var sellRows = DATAITERATOR_SALES.getRows();
DS_MIX.clear();
sellRows.forEach(function(row, index) {  var product = row.getDimensionValueKey("Product");  var store = row.getDimensionValueKey("Store");    var quantity = row.getMeasureValue("Quantity");  var price = row.getMeasureValue("Price");  APPLICATION.log("Line: " + product + ", " + store + ": " + quantity + " x " +price);  var buingPrice = 0.0;    var buyRows = DATAITERATOR_BUY.getRows().containing({      "dimensions": [          { "key" : "Product", "value" : product }        ]      });     // assuming only one!     buyRows.forEach(function(buyRow, index) {  buingPrice = buyRow.getMeasureValue("Buying Price");  });  var soldValue = quantity * price;  var buyValue = quantity * buingPrice;    var revenue = soldValue - buyValue;    DS_MIX.addRow(product+","+store, ""+revenue);
});

Logically:

1. get the "sales" rows

2. clear the target data source

3. loop and read out required information

4. pick up the buing price

5. calculate

6. add rows to the target data source

THAT'S IT!

Now, as this is "real data source", you can bind it to other components and you do not need to care about any update scripts for it. E.g. I have bound it to

* UI5 Table

* Nice Chart

* and ... the standard component Scorecard!

Outline:

The App:

I am sure some of you will be happy with this procedure. Of course, it is not for mass data, but works very well with reasonable number of rows (also thanks to  Mike who has improved the size of data stream in the data iterator component.

The example application can be downloaded from the repository.

applications/SCN_OWN_DATASOURCE_BUILDER-20160310173344.zip at master · org-scn-design-studio-community/applications · Gi…

Have Fun!

One more idea - this time the old topic of what-if-analysis in design studio. It show another open direction with data iterator and byo data source. The goal is to have simple data manipulation and what-if-analysis with the changed data.

Mike has already described the option of adding data rows to BYO data source in his initial blog: Design Studio SDK (1.4) - Bring Your Own (BYO) Datasource.

Now, having the data iterator which allows mixing 2 data sources from any source system - blog here - Design Studio 1.6 - Data Blending with Data Iterator & Bring Your Own Data Source, it is even possible to bind those two options.

I have build-up the example from the data blending blog into more advanced option and combination of slider, input component and UI5 table with selection model to adjust existing data.

The Working example look like this (animated GIF, click to expand)

What is In?

First,

the simplest case - you can add new rows to the data source (as described by Mike) and then the full blending code from my blog executes again - so you can calculate revenue for the new entry and get it in all other components bound to the result data source.

Script:

DS_SALES.addRow("Apples,University Shop", "96,43");

Second,

you can modify existing data and this will be reflected in the result, e.g. you can change the buying price in our example and the changed revenues are visible in all components bound to your result data source.

Preparation of the Target Data Source

In the target data source you should create the columns and add one dummy row. Scorecard does not see the measure w/o at least one row.

Script:

selection in the UI5 Table triggers the value population to input components (input field and slider)

var selection = UI5TABLE_BUY.getSelectionDimensionMembers();
selection.forEach(function(dim, im) {   var product = dim.member;      var buingPrice = 0.0;     var buyRows = DATAITERATOR_BUY.getRows().containing({      "dimensions": [          { "key" : "Product", "value" : product }        ]      });      // assuming only one!      buyRows.forEach(function(buyRow, index) {  buingPrice = buyRow.getMeasureValue("Buying Price");   });   VALIINPUT_1.setValue(""+buingPrice);   SLIDER_1.setValue(buingPrice);   
});

then, change on any of those input components triggers update of the data source, e.g. slider:

var selection = UI5TABLE_BUY.getSelectionDimensionMembers();
selection.forEach(function(dim, im) {   var prod = dim.member;      DS_BUY.addRow(prod, ""+SLIDER_1.getValue(), true);
});

the "true" parameter on 3rd place means "overwrite"

Now, as the data iterators are triggering data change events - the result data source will recalculate everything again and populate to the components - and this is how it works.

also this example is available in the repository for use:

applications/SCN_WHAT_IF-20160310175332.zip at master · org-scn-design-studio-community/applications · GitHub

Have Fun!

Hi Experts

In our dashboard we would like to show some master data of
an info object. In our BW cube we have the characteristic “zkpi”. This
characteristic has a navigational master data attributes called “zkpi_goal”
which describe the goal of the KPI.

In our dashboard we have a crosstab that shows the KPI name
(zkpi) and the actual value of the KPI. In a text box beside the crosstab we
would like to show the master data of the selected KPI; that is the navigational
master data attribute “zkpi_goal”. The goal should be shown dependent on the
KPI that the user clicks on in the crosstab.

So, is there some kind of way to “extract” master data? I
would expect that there were something similar to the function getData (that
extracts the actual KPI value in our scenario). I tried to find something like
getDim or getNavAttr but could not find it. Is there some kind a work around
for this?

Kind regards

Erik       

I have problem with BW SSO integration on Design Studio. We developed dashboards on top of BW. We have users and they are only authorized to see the data for their own companies and plants. To achieve that, we created OLAP connections with SSO enabled and we have BO/BW integration. The queries work fine in Analysis OLAP (Web  Intelligence).

However, we are having problems with Design Studio. Here is the problem.

Howeverthe entireconfigurationof theSSObetweenBW/BOis correct

Does anyone know why Design Studio Geo Maps inverts the polygon sometimes?  It seems to be related to the sequence of points in the polygon, but we're not able to determine what the requirement is for creating Custom GeoJSON files.

Example.  We have the same polygon, drawn counter-clockwise in 1 instance and clockwise in the other.  One works and one doesn't.

It may not be possible to always determine the direction of our polygons, especially if they have very irregular shapes
.

Other Tools will map it correctly both ways (e.g.  http://geojson.io/#map=2/20.0/0.0)

Is there a limitation in Design Studio that it can only read 1 direction?  This seems to be due to the "winding" of the shape, but is there a way to specify that in the Polygon file?

From BW Bex query, I have # value in my dimension. 

The '#' are appearing on Infochart.

When it has #, we still need to show the row, but the # needs to be shown as blank.

Is there a way to do this in Design Studio?

This question is similar to Avoid Zero's in design studio Charts | SCN, but slightly different that my # are unassigned values from dimension rather than 0s from key figures, so zero suppression cannot be used in this case.

Regards,

Lawrence

Dear Experts,

I have a problem within DesignStudio 1.6 SP1.

Let me try to explain the situation.

Assign a query with active exceptions to a crosstab in design studio.

The default css for crosstab gives you 1 grey and 1 white row. The problem is the "white" row.

If you now have an active exception on every cell in one of these "white" rows you cannot see

wheter this row is selected or not?

Take a look at the screenshot --> every row is selected --> but the effect of the highlighting in the "white" rows

with active exception in a cell are not visible.

Is there any solution?

Thanks in advance

Best wishes!

Hello design studio pros,

I am trying to pass variable values to a planning function in DS 1.5. SP1

The variables are placed in the parameter section of the copy planning function:

copy from 0version "P_VERSION_FROM"

to version "P_VERSION_TO"

the two variables are not available when I edit the script

    // plan from version

    PF_VERSION_COPY.setVariableValueExt("P_VERSION_FROM", DROPDOWN_2.getSelectedValue());

    // plan to Version

    PF_VERSION_COPY.setVariableValueExt("P_VERSION_TO", DROPDOWN_2.getSelectedValue());

when I execute the script, DS throws an error message.

Has any of you had the same problem and solved it?

kind regards, Thomas

Hi experts,

We have multiple developed dashboard using BusinessObject Dashboard v.4.1 SP4 and published in SAP BI Portal that using SAP Netweaver  BW connection. We plan to move to Design Studio; How we can migrate the already developed without rebuild them manually again ?

Thanks for any hints.

Hi,

Design Studio 1.5 comes with new Crosstab "Selection Type" Option "Data Cell".

According to Application Designer Documentation (http://help.sap.com/businessobject/product_guides/AAD15/en/ds_15_user_en.pdf) selected cell can be accessed via API method "getSelection". Returning Parameter is of type ResultSetSelectionByString.

Question: how can this return parameter be processed? I could not find any information on that.

I need to determine selected cell (row + column) of Crosstab.

Thank you,

Andreas

Dear all,

Have you been wondering when you would finally be able to put comments on your Design Studio dashboards in a decent and tremendously customizable way for free? Well, that day is today!

In the following sections I will showcase my new component ConVistaEasyComment which is published open-source on GitHub, talk about the backend integration, comment saving & loading and the overall commentary architecture involved.

What do you get?

Obviously to put some comments you need a place where you can do that. I decided to use a WYSIWYG (What You See Is What You Get) HTML editor. There are a couple of libraries out there providing editors like that. My choice was CKEditor because of a well documented API, a suitable developer license and the ability to Paste from MS Word. You could also look into tinymce and Froala just to mention a few more.

You can extend gracefully by implementing your own editor plugins by the way.

     Fig.1 Demo dashboard

My SDK component ConVista EasyComment comes with lots of built in functionality like spell-checking, multi-language support, the ability to add images, an option to adjust the reading direction and many more. These features are provided by the CKEditor library out of the box.

The save button (icon on the bottom right of the toolbars) exposes its functionality to the DesignStudio SDK component event On Save Button Clicked. You can also extract/modify HTML content on the editor using the scripting methods getHTMLString and setHTMLString.

You can customize the toolbars to be shown through the component property Toolbar Settings. I used the new SDK 1.6 feature that allows to put complex objects on the contribution file for that. That way DesignStudio creates a table like input window:

     Fig 2 Properties

You can activate/deactivate the toolbars one by one. For the Document section which contains the save button you can decide even on item level (but you can’t hide the save button ;-). Let’s put false on every item except for Editing and see what we get.

     Fig 3 Reduced editor toolbar view

If you need more fine grained customization you will need to get back to me or adjust the coding on the SDK component yourself. Now let’s jump to the fun part.

On Saving and Loading

At first I am going to tell you about the frontend part which is covered by the EasyComment component and how to model a data structure to store our DesignStudio comments before actually moving over to the backend part to show you possible starting points to implement your individual solution.

To be able to actually persist and successfully load a comment for a specific DesignStudio object you need to identify the object itself and maybe its filter state. For static content this very easy and straightforward. We could just take the technical name of the targeted object as key and save our HTML-string along with it on a table on our backend. For dynamic content like charts with arbitrary complex filter possibilities this can be a very complicated task.

Some of the commercial DesignStudio commentary components approach this topic on the SAP backend by evaluating for example BEx query state and learn the object state from there. That way they can identify the right comment to load or with what key to store it. To get this done for all of the possible DesignStudio data sources like BEx queries, BW cubes, Universes, Custom SDK data sources, CSV files and HANA views is quite a lengthy task for an ABAP developer.

Don’t make this harder as it needs to be!

My approach is not going to cover all kinds of complex scenarios but it will be as easy as it gets and get the job done for many cases. At first I make the assumption that it is sufficient to store only a limited number of characteristics values to successfully identify the breakdown of a value on a component like a DesignStudio chart, crosstab, KPI-View or Scorecard. Let’s differentiate two cases:

• Static only content like DesignStudio texts or objects themselves and
• dynamic content like data breakdowns and key figures on Crosstabs or Charts.

All of the static content can be covered by its technical object name and the dashboard they are on for example:

     Table 1 Static objects comment saving

Now on the dynamic stuff. From my experience many cases that need comments for key figure release processes for example, there is only a limited number of filter values involved. Often you can get away with an accounting basis, an accounting entity and a key date (single date, date ranges and etc.).

     Table 2 Dynamic objects comment saving

How do you provide this data to the WebService?

DesignStudio offers lots of scripting methods that already provide what we need:

• DashboardID: Accessible through APPLICATION.getInfo().name

• Object technical Name: All SAP data sources (except SDK data sources) provide the method getInfo() which gives you access to the underlying meta data. The technical name is part of it.

• Accounting Basis, Accounting Entity and Key date: Data sources offer methods to retrieve key-value pairs for given dimensions and DesignStudio components like the Dimension Filter give the user the ability to filter certain values on demand. When working with filter variables you can for example use the following script to learn their current setting influenced by the user input during runtime:

     var vars = DS_1.getVariables();

     vars.forEach(function(element, index) {

       if(element.inputEnabled){

         DS_1.getVariableValueExt(element.name);

    }

});

You could save the values for later usage with the ConVista EasyComment using the SCN community SDK component ARRAY.

Now that we learned how to retrieve keys to identify our data sets, we are ready to send some HTML-strings to the backend. Exciting, isn’t it!? Let me give you a simplified example.

As I already told you before, there is an event provided by the EasyComment component which gets triggered when you click the save button on the editor. Here is a script from a demo application:

             //cache busting

var ccid = APPLICATION.getTickCount();

//retrieve an accounting entity

var bukrs = DROPDOWN_1.getSelectedValue();

//set http request method

      me.setHttpMethod("POST");

      me.setServerUrl(

     "http://<sap backend>:<port>/sap/bc/<WebService Endpoint>?bukrs="+bukrs+"&ccid="+ccid

);

//Actually Trigger the save

      me.saveHTMLOnServer();

This DesignStudio script sets up the HTTP parameters and sends a POST request to the server. The method saveHTMLOnServer internally retrieves the current HTML-string from the editor on execution. If everything on the backend went good, you just saved your first comment!

To retrieve it again you need some more scripting and an approach how to expose that functionality. Usually people go for selection events in some sort of way. Let’s check out an example with a Dropdown.

     Fig 4 Editor full cycle interaction

Once the user selects an entity from the dropdown, the components On Select method fires. In there I put the following scripting:

            //Get the currently selected entity

var bukrs = me.getSelectedValue();

//Cache busting

var ccid = APPLICATION.getTickCount();

COMMENT_1.setServerUrl(

     "http://<sap backend>:<port>/sap/bc/<WebService Endpoint>?bukrs="+bukrs+"&ccid="+ccid

);

//Set HTTP request method

COMMENT_1.setHttpMethod("GET");

//Actually trigger the load

COMMENT_1.loadHTMLFromServer();

The above script loads the saved comment into the editor according to the selection on the dropdown. If you need to more than just an accounting entity to select your comment, like in my example, you will have to enrich this scripting slightly (e.g. put some more URL parameters etc.).

In light of above you can easily imagine how to extend this approach to serve your specific needs without aiming for a general solution for every possible scenario and putting hundreds of hours. Now let’s have a look at a possible SAP backend WebService class implementation to take care of the saving and loading of our precious HTML-strings.

Integration of the SDK component with a server

In order to be able to save the HTML content you add to the editor, I implemented the DesignStudio SDK component to be ready to integrate with a RESTful Web Service. I am using the standard JavaScript object XMLHttpRequest to manage the communication from the browser to the backend. Of course Cross-Origin Resource Sharing (CORS) problems might apply at this point if you are hosting you dashboard on a different server than the backend. To overcome that browser security problem you have to setup your backend code to supply two HTTP headers on the HTTP response:

Access-Control-Allow-Origin: true

Access-Control-Allow-Credentials: true

I will show an easy ABAP example below. At first you have to provide an ABAP class which will serve as the handler for the WebService communication.

• ABAP class setup

Create a standard class and put it on your local objects or a development package.

     Put the following two interfaces to provide your custom implementation for the SAP standard HTTP interfaces.

     Once you save, the class structure will immediately be generated and look something like this:

    In order to put your custom WebService behavior you will have to implement the method HANDLE_REQUEST. Before that there is one more step. We      need to register this class with an ICF node. To do so, call transaction SICF and create a new node under default_host > sap > bc.

Put your class under the handler list and save. Go back and activate the ICF node. Hit test to learn your WebService endpoint URL and check if the registration worked. You will need that URL for the DesignStudio scripting and also for easy testing purposes with your browser.

Note that every URL call is basically an HTTP GET request.

• HTTP CORS setup and HANDLE_REQUEST implementation

Now I am going to show you the essential ABAP code to get started. You need to be able to retrieve URL parameters from the HTTP requests, put CORS headers on your response and send the response to the client. This is done using SAP standard interface methods:

constants:
lc_header_mimetype_name       type string value 'Content-Type',
lc_header_mimetype_value_html type string value 'text/HTML; charset=utf-8',
lc_header_aca_origin          type string value 'Access-Control-Allow-Origin',
lc_header_aca_credentials     type string value 'Access-Control-Allow-Credentials',

lc_true                       type string value 'true'.

data: _request_method    type string,
lt_inputparams        type tihttpnvp,
ls_inputparams        like line of lt_inputparams,
ld_bukrs              type i,
ld_html_string        type string,
ld_cors_callee        type string,
ld_request_payload    type string.

  "Get passed parameters
call method server->request->get_form_fields
changing
fields = lt_inputparams.
"Get passed payload, HTML data
call method server->request->get_cdata
receiving
data = ld_request_payload.
“ CORS setup
ld_cors_callee = 'http://<server hosting DesignStudio>:<port>'.

  "Translate Input Parameters to Uppercase
loop at lt_inputparams assigning <ls_inputparams>.

translate: <ls_inputparams>-name  to upper case.
case <ls_inputparams>-name.
when 'BUKRS'.
ld_bukrs = <ls_inputparams>-value.
endcase.
endloop.

_request_method = server->request->get_header_field( name = '~request_method' ).
"Determine if method is get or post.
if _request_method = 'GET'.
"set the response mimetype to HTML
server->response->set_header_field
( name  = lc_header_mimetype_name
value = lc_header_mimetype_value_html ).
"Set CORS access control to avoid browser policy restrictions
server->response->set_header_field
( name = lc_header_aca_origin
value = ld_cors_callee ).
server->response->set_header_field
( name = lc_header_aca_credentials
value = lc_true ).

“Do your table loading implementation here and assign to ld_html_string

"set the cdata response to the text
server->response->set_cdata( data = ld_html_string ).

elseif _request_method = 'POST' .

"set the response mimetype to HTML
server->response->set_header_field
( name  = lc_header_mimetype_name
value = lc_header_mimetype_value_html ).

"Set CORS access control to avoid browser policy restrictions
server->response->set_header_field( name = lc_header_aca_origin
value = ld_cors_callee).
server->response->set_header_field
( name = lc_header_aca_credentials
value = lc_true ).
“Do your table saving implementation here and send given html back to have a graceful answer since the SDK component is “assigning back the data coming from the server to the editor “right away
"set the cdata response to the text
server->response->set_cdata( data = ld_request_payload ).

endif.

    Make sure you send the send HTML-string back on POST requests because the EasyComment component relies on setting the HTML response to the      editor as assurance that the saving worked. You could write a message here if something is wrong too. Further error handling is not implemented yet.

• Tables

To get you started have a look at the table examples in the previous section. Put the table coding at the sections highlighted in red above on the ABAP code.

Once all of that is done, put an example value on your table and make a browser GET request using the URL we remembered before. If that works, your WebService is ready to serve and you can start integrating with EasyComment. Now start saving some comments even with images attached!

     Fig 5 EasyComponent editor with image on comment

Commentary Lifecycle (Commentary Solution Architecture)

To sum up the technical part I would like to provide a high level view on what I showed you in detail before.

     Fig 6 Commentary Lifecycle Deployment View

In DesignStudio you need to put some logic to trigger the RESTful WebService and think about how to make that accessible to the user during runtime. On the backend you need to provide the communication endpoint for the RESTful WebService to deal with the HTTP requests. In my case that was SAP BW but the implementation is by no means limited to that. You could call any other system.

     Fig 7 Commentary Lifecycle Implementation View

This sequence diagram visualizes the function calls on the involved software instances. DesignStudio scripting and events trigger internal methods on the EasyComment SDK component. As a result the component communicates with the backend to actually save and load HTML content. The callbacks deliver the content to the frontend.

What’s next?

As a next step I want to implement, what I call “Live-Commentary”. This means you no longer need to save your html content actively by hitting the save button but just start typing and save immediately. This will be achieved using WebSockets which enable full-duplex communication. User-Authorization at a side, this will allow users to edit comments even in parallel, seeing what their colleague does right away. Some of you might be familiar with that behavior from google docs or similar applications. I will keep you posted as development progresses.

Final Words

You are now able to enrich your DesignStudio dashboards with shiny comments up to a complexity that suits your needs. The frontend technology to get you started is already setup and implemented. The only open task is to decide how to store your HTML content. I have shown you a possible starting point to get this done quick and easy. Now find yourself an ABAP developer or roll up your own sleeves and have fun commenting.

You can get the component by installing the ConVista SDK components package which is available on GitHub:

https://github.com/MartinPankraz/ConVista-DS-SDK-Visualizations

As always feel free to leave comments and ask lots of follow up questions.

Yours

Martin

Hi experts,

I have searched SCN with "axis scaling", "layout" and "design studio" but I could not find a solution to the problem below. I am using Design Studio version 1.6:

I'm having trouble with the layout when I recalculate the x-axis for two charts. Both charts are not shown as designed. More information:

CHART_A = bar stacked

CHART_B = bar ("normal")

The business would like to ensure that the x-as of both charts are always equal. This means that a calculation must be made to determine the maximum value for both charts and subsequently, the maximum value of both charts must be applied as the maximum value for both charts. To enable the calculation the property regarding "axis scaling" must be checked and I have filled in dummy values for min and max (because they will directly calculated at start). The following code is applied at startup:

//Determine maximum values for both CHARTS

max_B = DS_2.getDataAsString("element")

value_max_B = Convert.stringToFloatUsingLocale(max_B);

max_A1 = DS_2.getDataAsString("element")

value_max_B1 = Convert.stringToFloatUsingLocale(max_A1);

max_A2 = DS_2.getDataAsString("element")

value_max_A2 = Convert.stringToFloatUsingLocale(max_A2);

max_A3 = DS_2.getDataAsString("element")

value_max_B3 = Convert.stringToFloatUsingLocale(max_A3);

value_max_A = value_max_A1 + value_max_A2 +value_max_A3;

//Set both axis equal to maximum value

if (value_max_B >= value_max_A)

{

CHART_A.setAxisScaling(ChartAxisScaling.X_AXIS, 0, value_max_B);

CHART_B.setAxisScaling(ChartAxisScaling.X_AXIS, 0, value_max_B);

}

else

{

CHART_A.setAxisScaling(ChartAxisScaling.X_AXIS, 0, value_max_A);

CHART_B.setAxisScaling(ChartAxisScaling.X_AXIS, 0, value_max_A);

}

All in all, the code works fine but the layout of both charts is not shown as designed but "as default" (e.g. Design Studio seems to ignore properties like show x-axis and the position of legend). When I remove the calculation regarding the x-axis both charts are shown as designed. Has anybody experience with this?

Thanks in advance!