Hi,
I have finally installed the SCN Community Free SDK Components Extension in my DS 1.4 Client in order to try out the Rapid Prototyping Addon HTML/JS Templating Component.
Design Studio 1.4 doesn't yet provide a way to rename the measure names which are shown in the table header in a crosstab.
We can either rename the measures in the BEx Queries, but that would make them in our scenarios hard to work with them to determine what kind of value is behind them if suddenly several exist with the exact same names.
A CSS solution exists for this, but might not be flexible enough in some cases, for example when the user filters on the measures structure to display instead of the initial 3 key figures, some completely different 5 key figures and there are many key figure combinations available.
So, what about a JavaScript solution for this?
I wrote a few lines and put it inside the RapidPrototypingComponent (Addition Porperties > JavaScript):
function customChanges() { // CHANGE COLUMN NAMES FOR MEASURES IN CROSSTAB WITH CSS CLASS "crosstab1" var crosstab_selector = ".crosstab1 .sapzencrosstab-ColumnHeaderArea .sapzencrosstab-HeaderRow:first-child .sapzencrosstab-HeaderCellContentDiv tr td:first-child div"; $(crosstab_selector) .each(function(index) { $(this).html("Text via JavaScript"); });
}
$(function() { customChanges(); $("*").on("click change mousemove", customChanges); setInterval(customChanges, 500); // run every 0,5second (500ms)
});
It works, but:
I have the following issue with it: when clicking around in the DS App, the column names are always renamed back into their origin names. As if DS is running various checks on user interaction with the app and makes adjustments to, in this case, the crosstab component.
For example (there are many other user interactions when this happens too) if I have a tabstrip with 2 tabs, the first tab contains the crosstab. When I click on the 2nd tab and back again to the 1st tab, DS changes the names back to the initial/default names in the crosstab.
That is why I added the code which executes my custom JS function in an endless loop every 0,5 second and not only when the page has first loaded.
Does somebody know what exactly happens that the JS changes done via the Rapid Prototyping Component to the crosstab or chart components are from a user perspective suddenly "deleted/rolled back/are not persistent" when the user navigates/does some changes in the DS app/dashboard?
Any ideas/thoughts regarding this javascript solution?
How to optimize the code? The line: "$("*").on("click change mousemove", customChanges);" is not necessary if the line "setInterval(customChanges, 500);" remains, but I don't like the idea of running a code every 0,5s very much. I hoped that it will be enough to have the following code: "$(function() { customChanges(); });" but it isn't enough.
Would you use such a solution (for example for a proof of concept App) or rather wait till DS has such feature built in?
Regards,
David