Accordion Menu in SAP Design Studio

We had a client requirement in one of our SAP Design Studio Applications, for a menu based listing of KPIs categorized by the functional area. As we know, there is no native component in SAP Design Studio that can accomplish this. So we replicated the Accordion Menu look & feel and functionality to cater to this requirement.

Here is a detailed listing of steps we followed:

Step 1:

Insert a new Panel in the SAP Design Studio Application.

Step2:

Insert a Button and a List Box inside the Panel and add items to the List Box. Add more Buttons & List Boxes depending on the no of labels you want in the menu. Add items in all the List Boxes. These items will form the sub menus dropping down from the main menu.

Step 3:

Hide the List Boxes.

Step 4:

Add the CSS Code below, to the Application, to change the color and font of the Buttons and List Boxes.

.sapUiLbxStd > ul > .sapUiLbxISel > span, .sapUiLbxStd > ul > .sapUiLbxISel

{

background-color: #e4644b !important;

color: #000000 !important;

border-left:5px solid #494041 !important;

}

.sapUiLbxI

{

line-height: 30px !important;

}

.sapUiLbx

{

border: 1px solid #494041 !important;

border-radius: none !important;

background:#494041 !important;

}

.sapUiLbx

{

color: #ffffff !important;

border-radius: none !important;

}

.sapUiBtnS.sapUiBtnNorm.sapUiBtnStd

{

background: -moz-linear-gradient(center top , #e4644b 0px, #e4644b 10%, #e4644b 47%, #e4644b 85%, #e4644b 90%) repeat scroll 0 0 rgba(0, 0, 0, 0) !important;

border-color: #aa2208 !important;

box-shadow:none !important;

border-radius:none !important;

background-image: -ms-linear-gradient(rgb(228, 100, 75) 0px, rgb(228, 100, 75) 10%, rgb(228, 100, 75) 47%, rgb(228, 100, 75) 85%, rgb(228, 100, 75) 90%) !important;

}

.sapUiBtn.sapUiBtnS.sapUiBtnNorm.sapUiBtnStd:hover, .sapUiBtn.sapUiBtnS.sapUiBtnNorm.sapUiBtnStd.sapUiBtnStdHover

{

background: -moz-linear-gradient(center top , #aa2208 0px, #aa2208 5%, #aa2208 47%, #aa2208 90%, #aa2208 100%) repeat scroll 0 0 rgba(0, 0, 0, 0) !important;

}

.sapUiBtn.sapUiBtnS.sapUiBtnNorm.sapUiBtnAct:hover

{

background: -moz-linear-gradient(center top , #aa2208 0px, #aa2208 5%, #aa2208 47%, #aa2208 90%, #aa2208 100%) repeat scroll 0 0 rgba(0, 0, 0, 0) !important;

}

.sapUiBtnS.sapUiBtnNorm

{

border-radius: none !important;

}

Now, the Accordion Menu looks like this

Now for the code to make it function like an Accordion Menu

Step 5:

Now add the following code in the OnClick event for each of the Buttons, to make it function like an Accordion Menu

In Button 1

BUTTON_2.setTopMargin(BUTTON_1.getHeight() + LISTBOX_1.getHeight()); BUTTON_3.setTopMargin(BUTTON_1.getHeight() + LISTBOX_1.getHeight() + BUTTON_2.getHeight()); BUTTON_4.setTopMargin(BUTTON_1.getHeight() + LISTBOX_1.getHeight() + BUTTON_2.getHeight() +BUTTON_3.getHeight()); LISTBOX_2.setVisible(false); LISTBOX_3.setVisible(false); LISTBOX_4.setVisible(false); LISTBOX_1.setVisible(true); TEXT_1.setText(BUTTON_1.getText()); TEXT_3.setText(LISTBOX_1.getSelectedText());

In Listbox 1

TEXT_3.setText(LISTBOX_1.getSelectedText());

In Button 2

LISTBOX_2.setVisible(true); LISTBOX_3.setVisible(false); LISTBOX_4.setVisible(false); LISTBOX_1.setVisible(false); BUTTON_1.setTopMargin(0); BUTTON_2.setTopMargin(BUTTON_1.getHeight()); LISTBOX_2.setTopMargin(BUTTON_1.getHeight()+BUTTON_2.getHeight()); BUTTON_3.setTopMargin(BUTTON_1.getHeight()+BUTTON_2.getHeight()+LISTBOX_2.getHeight()); BUTTON_4.setTopMargin(BUTTON_1.getHeight()+BUTTON_2.getHeight()+LISTBOX_2.getHeight()+ BUTTON_3.getHeight()); TEXT_1.setText(BUTTON_2.getText()); TEXT_3.setText(LISTBOX_2.getSelectedText());

In Listbox 2

TEXT_3.setText(LISTBOX_2.getSelectedText());

In Button 3

LISTBOX_2.setVisible(false); LISTBOX_3.setVisible(true); LISTBOX_4.setVisible(false); LISTBOX_1.setVisible(false); BUTTON_1.setTopMargin(0); BUTTON_2.setTopMargin(BUTTON_1.getHeight()); BUTTON_3.setTopMargin(BUTTON_1.getHeight()+BUTTON_2.getHeight()); LISTBOX_3.setTopMargin(BUTTON_1.getHeight()+BUTTON_2.getHeight()+ BUTTON_3.getHeight()); BUTTON_4.setTopMargin(BUTTON_1.getHeight()+BUTTON_2.getHeight()+LISTBOX_3.getHeight()+ BUTTON_3.getHeight()); TEXT_1.setText(BUTTON_3.getText()); TEXT_3.setText(LISTBOX_3.getSelectedText());

In Listbox 3

TEXT_3.setText(LISTBOX_3.getSelectedText());

In Button 4

LISTBOX_2.setVisible(false); LISTBOX_3.setVisible(true); LISTBOX_4.setVisible(false); LISTBOX_1.setVisible(false); BUTTON_1.setTopMargin(0); BUTTON_2.setTopMargin(BUTTON_1.getHeight()); BUTTON_3.setTopMargin(BUTTON_1.getHeight()+BUTTON_2.getHeight()); BUTTON_4.setTopMargin(BUTTON_1.getHeight()+BUTTON_2.getHeight()+ BUTTON_3.getHeight()); LISTBOX_3.setTopMargin(BUTTON_1.getHeight()+BUTTON_2.getHeight()+ BUTTON_3.getHeight()+BUTTON_4.getHeight()); TEXT_1.setText(BUTTON_4.getText()); TEXT_3.setText(LISTBOX_4.getSelectedText());

In Listbox 4

TEXT_3.setText(LISTBOX_4.getSelectedText());

We now have an Accordion Menu in SAP Design Studio!

Source: http://www.visualbis.com/blogs/design-studio/2014/10/01/accordion-menu-in-sap-design-studio/