SAC

Task 1: Getting Startet

  • General
    • Font
      • Arial 14
      • Black
    • H1
      •                color: #ffffff;
      •                font-size: 16px;
    • H2
      •                color: #ffffff;
      •                font-size: 12px;
  • Layout
    • Header
      •  background-color: #354A5F
      • 70px
  • Main
    • Fit Device
  • Visualization
    • IBCS
      • Values: Black
      • Red bad: #F37B99
      • Good: #77D36F
  • Zielgruppe: C-Level
  • Size: Auto SizeTextfeld: Functions

Task 2: First Layout

Naming

<TYP>_<Detail>_<Detail2>_<Counter>

  • TYP (3 Char)
    • PAN
    • BTN
    • TAB
    • RAD
  • Detail
    • Header
    • Footer
    • Main

Canvas

Try to structure:

Header

Main

Sidebar

Task 3 : Design

Edit Theme (Copy Light)

Create CSS and Assign

.header .sap-custom-panel-widget {

                background-color: #354A5F;

                border-bottom: 1px;

}

/*            Header  */

.mylightHeaderTitle .sap-custom-text {

                color: #ffffff;

}

.mylightSubTitle .sap-custom-text {

                color: #ffffff;

                font-size: 12px;

}

.mylightHeaderIcon .sap-custom-button {

                color: #ffffff;

}

.mylightHeaderIcon .sap-custom-button:hover{

                color: #DFE6E3;

}

.mylightHeaderIcon .sap-custom-button:active{

                color: #efefef;

}

.mylightHeaderDate .sap-custom-text {

                color: #ffffff;

                font-size: 12px;

}

/*            Side */    

.mylightSideIcon .sap-custom-button {

                color:  #354A5F;

}

.mylightSideIconClose .sap-custom-button {

                color: #FFFFFF;

}

.mylightInput .sap-custom-input-control-main-label {

                color: #354A5F;

}

.mylightInput .sap-custom-input-control-widget {

                border: 1px;

                background-color: #ffffff;

}

Task 4: Icons

https://ui5.sap.com/resources/sap/ui/core/themes/base/SAP-icons.css

SAP Ui5 Icons

For this example i will use Activate icon

Task 5 Scripting

UNITL_Init _Init

//hide toolbar

if ( isAdmin !== „X“ ) {

                if (Application.getMode() !== ApplicationMode.Embed){                 NavigationUtils.openApplication(Application.getInfo().id, UrlParameter.create(„mode“, „embed“), false) ; }

                UTIL_Init.initAdmin();  

}

//init

Application.showBusyIndicator(UTIL_Utilities.getMessageText(„Loading“));

UTIL_Init.initVariables();

UTIL_Init.initDropdowns();

Application.hideBusyIndicator();             

UNITL_Init _Dropdowns

DRP_Select_Year.addItem(„2014“, „2014“);

DRP_Select_Year.addItem(„2015“, „2015“);

DRP_Select_Year.addItem(„2016“, „2016“);

DRP_Select_Year.setSelectedKey(„2015“);

UNTIL_Init_initVariables

PAN_Header_Title.applyText(DP1.getDataSource().getInfo().modelDescription);

DP1.getDataSource().setDimensionFilter(„Date_703i1904sd“,“[Date_703i1904sd].[YHM].[Date_703i1904sd.YEAR].[2015]“ );

PAN_Header_SubTitle.applyText(„Ytd 2015“);

UTIL_Layout_ open_PAN_Side_Left

if ( PAN_Side_Left.isVisible() ) {

                PAN_Side_Left.setVisible(false);

                PAN_Main.getLayout().setLeft(0);

                //BTN_Main_Sidebar_Open.setText(„“);

                BTN_Main_Sidebar_Open.setVisible(true);

} else {

                PAN_Main.getLayout().setLeft(PAN_Side_Left.getLayout().getWidth());

                PAN_Side_Left.setVisible(true);

                BTN_Main_Sidebar_Open.setVisible(false);

                //BTN_Main_Sidebar_Open.setText(„“);

}

UTIL_Layout_ open_PAN_Side_Right

if ( PAN_Side_Right.isVisible() ) {

                PAN_Side_Right.setVisible(false);

                PAN_Main.getLayout().setRight(0);

} else {

                PAN_Main.getLayout().setRight(PAN_Side_Right.getLayout().getWidth());

                PAN_Side_Right.setVisible(true);

}

UTIL_Layout_ setContent_PAN_Side_Right

UTIL_Layout.open_PAN_Side_Right();

switch(contentSelection){

                case „Bookmark“:

                               PAN_SIDE_Bookmark.setVisible(true);

                               break;

//back to initial                

                case „Close“:

                               PAN_Side_Right.setVisible(false);

                               PAN_SIDE_Bookmark.setVisible(false);

                               break;

                }             

UTIL_Logging_log

console.log(logText);

UTIL_Navigation_ goToMainPAN

switch(ipan){

                   case 1:

                   PAN_MAIN_S1.setVisible(true);

                   PAN_MAIN_S2.setVisible(false);            

                   PAN_MAIN_S3.setVisible(false);            

                   break;       

                   case 2:

                   PAN_MAIN_S1.setVisible(false);

                   PAN_MAIN_S2.setVisible(true);   

                   PAN_MAIN_S3.setVisible(false);            

                   break;       

                   case 3:

                   PAN_MAIN_S1.setVisible(false);

                   PAN_MAIN_S2.setVisible(false);  

                   PAN_MAIN_S3.setVisible(true);            

                   break;       

}

UTIL_Navigation_onClickExport

ExportToPDF.exportView();

UTIL_Selection_selYear

DP1.getDataSource().setDimensionFilter(„Date_703i1904sd“,“[Date_703i1904sd].[YHM].[Date_703i1904sd.YEAR].[“ + selYear + „]“ );

PAN_Header_SubTitle.applyText(„Ytd “ + selYear);

DP1.getDataSource().refreshData();

UTIL_Utilities_getMessageText

switch (Id) {

                case „Loading“:

                               return „Loading“;

                case „BookmarkSelection“:

                               return „Please select a Bookmark !“;

   default: return Id;

}

UTIL_Utilities_getFilterOutput

// creates and outputs a description for all filters of the passed filter array

var s = „“;

s = s + dimension.description;

// loop for every filter

for (var i = 0; i < filters.length; i++) {

                var filter = filters[i];

                if (filter.type === FilterValueType.Single) {

                               s = s + “ (“ + ConvertUtils.numberToString(filters.length) + „) „+ „\n“;

                               // handle single filter value

                               var singleFilter = cast(Type.SingleFilterValue, filter);

                               s = s + singleFilter.value;

                               if (singleFilter.exclude) {

                                               s = s + „, “ + UTIL_Utilities.getMessageText(„Exclude“);

                               }

                } else if (filter.type === FilterValueType.Multiple) {

                               // handle multiple filter value

                               var multipleFilter = cast(Type.MultipleFilterValue, filter);

                               var values = multipleFilter.values;

                               s = s + “ (“ + ConvertUtils.numberToString(values.length) + „) „+ „\n“;

                               s = s + UTIL_Utilities.getMessageText(„MultipleFilter“) + „:\n“; 

                               for (var j = 0; j < values.length; j++) {

                                               if (j > 0) {

                                                               s = s + „, „;

                                               }

                               s = s + values[j];

                               }

                               if (multipleFilter.exclude) {

                                               s = s + „, “ + UTIL_Utilities.getMessageText(„Exclude“);

                               }                             

                } else if (filter.type === FilterValueType.Range) {

                               s = s + “ (“ + ConvertUtils.numberToString(filters.length) + „) „+ „\n“;

                               // handle range filter value                        

                               s = s + UTIL_Utilities.getMessageText(„RangeFilter“) + „:\n“;      

                               var rangeFilter = cast(Type.RangeFilterValue, filter);                     

                               if ((rangeFilter.from) && ((rangeFilter.to))) {

                                               s = s + rangeFilter.from + “ – “ + rangeFilter.to;  

                               } else if (rangeFilter.less) {          

                                               s = s + „< “ + rangeFilter.less;

                               } else if (rangeFilter.lessOrEqual) {          

                                               s = s + „<= “ + rangeFilter.lessOrEqual;                 

                               } else if (rangeFilter.greater) {   

                                               s = s + „> “ + rangeFilter.greater;

                               } else if (rangeFilter.greaterOrEqual) {  

                                               s = s + „>= “ + rangeFilter.greaterOrEqual;

                               }                             

                }

                s = s + „\n“;        

}

return s;

BTN_Header_Info

NavigationUtils.openStory(„4CC18AFEF2B18C35493B4D351BF08D6D“,“1″);

// var url = NavigationUtils.createApplicationUrl(„Application.getInfo().id“, [UrlParameter.create(„mode“, „present“)]);

//NavigationUtils.openUrl(url, false);    

BTN_Header_Filter

var filterstring = „“;

var dimensions = DP1.getDataSource().getDimensions();

for (var d = 0; d < dimensions.length; d++) {

var filters = DP1.getDataSource().getDimensionFilters(dimensions[d]);

for (var i = 0; i < filters.length; i++) {

var filterInfo = UTIL_Utilities.getFilterOutput(dimensions[d],filters) + „\n“;

filterstring = filterstring  + ‚-‚ +  filterInfo;

}

}

console.log(filterstring);

POP_FILTER_TXT.applyText(filterstring);

POP_FILTER.open();

Links

Impressum
Datenschutzerklärung

Back to Top