Design Studio Simple CSS and JavaScript Document. History

(1)

Design Studio Simple CSS and JavaScript

Document

History

Modifier

Date

Change

DS Versiyon

Utku Ozbulak

11.2.2015

Creation

1.4

(2)

Script

Global Scripts are one of the new changes that arrived with 1.4. Using global scripts we can use define a function and use it in different components. ( E.g. use in component’s OnClick functions)

Defining Global Script & Simple Usage(1.4):

This example shows the most common used function, changing visibility of a component.

Custom Dimension Filter using Combo Box(1.4):

Using Design Studio’s own dimension filter component we can easily filter a chart/table but I believe this component lacks in aesthetic and uses too much space, thats why I prefer to use custom dimension filters. ( Though this changes if the customer specifically wants to use the pre-defined dimension filter)

We can define the values in combo box at the start-up function of the dashboard and retrieve the dimension values.

DROPDOWN_1.setItems(DS_1.getMemberList("_POXWUF6zEeS9NKmxJUObew",MemberPresentation.EXTERNAL_KE Y,MemberDisplay.TEXT_KEY.substring(1,4), 100));

"_POXWUF6zEeS9NKmxJUObew" is the dimension’s technical name, you can find a dimensions technical name in initial view.

(3)

You can skip the ‘MemberDisplay.TEXT_KEY.substring(1,4)

’ part but since I have received xxxx-xxxx values in this dimension, I used substring to make it more viable.

After that you have to code ‘on Select’ part of combo box.

DS_1.setFilterExt("_POXWUF6zEeS9NKmxJUObew",DROPDOWN_1.getSelectedValue());

With above code we can filter the dimension "_POXWUF6zEeS9NKmxJUObew" with selected value.

Combo Box Dim. Filter DS Dimension Filter

(4)

CSS

Pie Chart CSS(1.4):

To change the pie chart’s css, you can simply use the CSS below. Be careful tough, you also need to change the colors of legends. You can also assign colors at Design Studio user interface but it takes a lot of time and if you have many charts it can be disturbing. Instead, you can simply define a CSS and use it in all the charts.

To assign different CSS packets to a chart you can use the following code piece: CHART_1.setCSSClass('MY CSS CLASS');

The code below strokes the legends of Pie chart, I believe black stroke makes the look better. .pieChart path.v-datapoint.v-morphable-datapoint.viz-pie-sector.v-sector.v-datapoint-default{ stroke:black;}

Be careful! Pie chart sectors start with id:1 but legends start with 0

.pieChart g.v-pie g.v-datashape:nth-child(1) path.v-datapoint.v-morphable-datapoint.viz-pie-sector.v-sector.v-datapoint { Fill:#41477E;}

.pieChart g.v-pie g.v-datashape:nth-child(2) path.v-datapoint.v-morphable-datapoint.viz-pie-sector.v-sector.v-datapoint { Fill:#BAC7F3;}

.pieChart g.v-pie g.v-datashape:nth-child(3) path.v-datapoint.v-morphable-datapoint.viz-pie-sector.v-sector.v-datapoint {Fill:#990000;}

.pieChart g.v-pie g.v-datashape:nth-child(4) path.v-datapoint.v-morphable-datapoint.viz-pie-sector.v-sector.v-datapoint {Fill:#E68A00;}

(5)

.pieChart g.v-pie g.v-datashape:nth-child(9) path.v-datapoint.v-morphable-datapoint.viz-pie-sector.v-sector.v-datapoint {Fill:#FF9966 ;}

.pieChart g.v-pie g.v-datashape:nth-child(10) path.v-datapoint.v-morphable-datapoint.viz-pie-sector.v-sector.v-datapoint {Fill:#24E066 ;}

/*Pie’ın legendının renklerini değiştirmek için gereken CSS.*/

.pieChart g.v-legend-content g.v-row.ID_0 path {Fill:#41477E;stroke:black;stroke-width:1px;} .pieChart g.v-legend-content g.v-row.ID_1 path {Fill:#BAC7F3;stroke:black;stroke-width:1px;} .pieChart g.v-legend-content g.v-row.ID_2 path {Fill:#990000;stroke:black;stroke-width:1px;} .pieChart g.v-legend-content g.v-row.ID_3 path {Fill:#E68A00;stroke:black;stroke-width:1px;} .pieChart g.v-legend-content g.v-row.ID_4 path {Fill:#006600;stroke:black;stroke-width:1px;} .pieChart g.v-legend-content g.v-row.ID_5 path {Fill:#032120;stroke:black;stroke-width:1px;} .pieChart g.v-legend-content g.v-row.ID_6 path {Fill:#990033;stroke:black;stroke-width:1px;} .pieChart g.v-legend-content g.v-row.ID_7 path {Fill:#663300;stroke:black;stroke-width:1px;} .pieChart g.v-legend-content g.v-row.ID_8 path {Fill:#FF9966;stroke:black;stroke-width:1px;} .pieChart g.v-legend-content g.v-row.ID_9 path {Fill:#24E066;stroke:black;stroke-width:1px;}

Col. Chart CSS(1.4):

CSS code is almost identical with pie chart one, especially the legends are exacly the same. .colChart rect.v-datapoint.v-morphable-datapoint {

stroke: black; stroke-width: 1px; }

.colChart g.v-column g.v-datashape:nth-child(1) rect.v-datapoint.v-morphable-datapoint {fill: #41477E;} .colChart g.v-column g.v-datashape:nth-child(2) rect.v-datapoint.v-morphable-datapoint {fill: #BAC7F3;} .colChart g.v-column g.v-datashape:nth-child(3) rect.v-datapoint.v-morphable-datapoint {fill: #990000;} .colChart g.v-legend-content g.v-row.ID_0 path {Fill:#41477E;stroke:black;stroke-width:1px;}

.colChart g.v-legend-content g.v-row.ID_1 path {Fill:#BAC7F3;stroke:black;stroke-width:1px;} .colChart g.v-legend-content g.v-row.ID_2 path {Fill:#990000;stroke:black;stroke-width:1px;}

(6)

Zebra Table CSS(1.4):

Here is a simple code to turn tables in Design Studio to Zebra tables. ( Forgive the color though, I know it looks ugly ) .sapzencrosstab-DataCellAlternating,

.sapzencrosstab-RowHeaderArea .sapzencrosstab-HeaderCellAlternating { background-color: #AC812F

}

Tabstrip CSS(1.4):

Design Studio allows you to alter the Tabstrips with CSS, below are many code pieces for tabstrips, below are different examples of that.

(7)

Tabstrip 1:

Only turns the tabstrip 1800 degrees Tabstrip itself

.Tabstrip_1 {

-webkit-transform: rotate(180deg); /* Safari and Chrome */ -ms-transform: rotate(180deg); /* IE 9 */

transform: rotate(180deg); /* CSS3 */ }

Ul and LI’s in Tabstrip .Tabstrip_1 .sapUiTabBar {

Components of tabstrips should be turned 180 degree too .Tabstrip_1 .sapUiTabPanel {

(8)

Tabstrip 2:

:

.Tabstrip_2 .sapUiTabBar {} .Tabstrip_2 .sapUiTabBar li {

.Tabstrip_2 .sapUiTabPanel {

-webkit-transform: rotate(180deg); /* Safari and Chrome */ -ms-transform: rotate(180deg); /* IE 9 */ transform: rotate(180deg); /* CSS3 */ } .Tabstrip_2 .sapUiTabBar li { float: right; border-radius: 0 0 5px 5px; }

.Tabstrip_2 .sapUiTabBar li:hover {

cursor: pointer; /* mouse over’da cursorun el işareti olması için */ }

.Tabstrip_2 .sapUiTab, .Tabstrip_2 .sapUiTabDsbl,

.Tabstrip_2 .sapUiTabSel {background-image: none; padding: 0 5px 0 5px !important; margin: 0 2px 0 2px !important; height: 20px; border: 1px solid gray; border-top: none;}

(9)

Tabstrip 3:

.Tabstrip_3 .sapUiTabBar li {

.Tabstrip_3 .sapUiTabPanel {

-webkit-transform: rotate(180deg); /* Safari and Chrome */ -ms-transform: rotate(180deg); /* IE 9 */ transform: rotate(180deg); /* CSS3 */ } .Tabstrip_3 .sapUiTabBar li { float: right; }

cursor: pointer; /* mouse over’da cursorun el işareti olması için */ }

.Tabstrip_3 .sapUiTab, .Tabstrip_3 .sapUiTabDsbl, .Tabstrip_3 .sapUiTabSel {

background-image: none; padding: 0 5px 0 5px !important; margin: 0 2px 0 2px !important; height: 20px; border: 1px solid gray; border-top: none; border-bottom: 1px solid gray;} .Tabstrip_3 .sapUiTabSel { background: white;}

(10)

Tabstrip 4:

.Tabstrip_4 {

transform: rotate(180deg); /* CSS3 */} .Tabstrip_4 .sapUiTabBar {

background: #e2fbff; /* d4ffaa green ; c4e8ff blue ; f6f6f6 */ border-bottom: 1px solid #2aaaff; /* FF6A00 */

padding: 5px 5px 0px 0px;} .Tabstrip_4 .sapUiTabBar li {

transform: rotate(180deg); /* CSS3 */} .Tabstrip_4 .sapUiTabPanel {

transform: rotate(180deg); /* CSS3 */} .Tabstrip_4 .sapUiTabBar li {

float: right; }

cursor: pointer; /* change mouse cursor to hand */ }

.Tabstrip_4 .sapUiTab, .Tabstrip_4 .sapUiTabDsbl,

.Tabstrip_4 .sapUiTabSel {background-image: none; background: #f6f6f6; padding: 0 5px 0 5px !important; margin: 2px 2px 0px 2px !important; height: 20px; border: 1px solid #c3c3c3; border-top: none;}

.Tabstrip_4 .sapUiTabSel {/*font-weight: bold;*/ background: white; border-color: #2aaaff; border-bottom: 2px solid #2aaaff; border-top: none; margin-top: 1px !important;}

(11)

Tabstrip 5:

.Tabstrip_5 {

transform: rotate(180deg); /* CSS3 */} .Tabstrip_5 .sapUiTabBar {

/* Tabın arkaplanına Base64 encoded resim de koyabiliyoruz */ background-image: url(data:image/png;base64, XXXX);}

.Tabstrip_5 .sapUiTabBar li {

transform: rotate(180deg); /* CSS3 */} .Tabstrip_5 .sapUiTabPanel {

transform: rotate(180deg); /* CSS3 */} .Tabstrip_5 .sapUiTabBar li {

float: right;}

cursor: pointer; /* change mouse cursor to hand */} .Tabstrip_5 .sapUiTab,

.Tabstrip_5 .sapUiTabDsbl,

.Tabstrip_5 .sapUiTabSel {background-image: none; background: #f6f6f6; padding: 0 8px 0 8px !important; margin: 3px 1px 0px 1px !important; height: 20px; border: 1px solid #c3c3c3;}

.Tabstrip_5 .sapUiTabSel {background: #FFA3E0; color: black; border-color: gray; border-bottom: 2px solid gray; margin-top: 2px !important;}

.Tabstrip_5 .sapUiTabBar {height: 27px;}

(12)

Tabstrip 6:

.Tabstrip .sapUiTab, .Tabstrip .sapUiTabDsbl, .Tabstrip .sapUiTabSel {

image: none; padding: 0 5px 0 5px !important; margin: 0 2px 0 2px !important; background-color:#7D9DDE;

height: 20px; border: 1px solid #96A8C3; border-top: 1px solid #96A8C3; border-bottom: 1px solid #96A8C3;} .Tabstrip .sapUiTabSel {

background-image: none; padding: 0 5px 0 5px !important; margin: 0 2px 0 2px !important;

height: 20px; border: 1px solid #96A8C3; border-top: 1px solid #96A8C3; border-bottom: 1px solid #96A8C3;} .Tabstrip .sapUiTabSel {/*font-weight: bold;*/ background: white;}

.Tabstrip .sapUiTabBar {

background:white; border-bottom:1px solid #96A8C3; } .Tabstrip .sapUiTabBar ul.sapUiTabBarCnt {margin-top: 1px;} .Tabstrip .sapUiTabBar li:hover {

cursor: pointer; background:#CF0000; }

(13)

Additional Resources

CSS

1- Ekran boyutu : http://scn.sap.com/community/businessobjects-design-studio/blog/2014/03/10/creating-a-responsive-design-in-design-studio

2- Pie Chart özellikleri : http://scn.sap.com/docs/DOC-49033

3- CSS ile crosstab kolonu gizleme/gösterme :

http://scn.sap.com/community/businessobjects-design- studio/blog/2014/07/28/sap-design-studio--showinghiding-crosstab-columns-with-measures-with-css-and-scripting

4- SAP DS Tablo özellikleri :

http://scn.sap.com/community/businessobjects-design- studio/blog/2014/07/28/sap-design-studio--showinghiding-crosstab-columns-with-measures-with-css-and-scripting

5- Zebra tablolar : http://scn.sap.com/community/businessobjects-design-studio/blog/2013/06/22/css-continued-learning-from-answers-from-victor

6- Zebra tablolar 2: http://scn.sap.com/thread/3580625

7- CSS ile Bar/Col chart renkleri değiştirme: http://scn.sap.com/thread/3686661 8- CSS ile dual axis chart rengi değiştirme : http://scn.sap.com/thread/3573494

SCRIPT

1- Change chart type with script : https://www.youtube.com/watch?v=6xjO_ZA8yhU 2- Alter crosstab with js : https://www.youtube.com/watch?v=hm3VDt-sknA