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.

/wp-content/uploads/2014/10/add_new_panel_in_sap_design_studio_554695.png

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.

/wp-content/uploads/2014/10/add_items_accordion_menu_in_sap_design_studio_554700.png

/wp-content/uploads/2014/10/add_items_to_list_box_accordion_menu_in_sap_design_studio_554701.png

Step 3:

Hide the List Boxes.

/wp-content/uploads/2014/10/hide_list_boxes_in_sap_design_studio_554702.png

/wp-content/uploads/2014/10/properties_tab_in_sap_design_studio_554703.png

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

/wp-content/uploads/2014/10/accordion_menu_in_sap_design_studio_554704.png

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!

/wp-content/uploads/2014/10/accordion_menu_in_sap_design_studio_run_time_554706.png

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




To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

  1. Sujith PN

    Hi,

    This is great way of achieving accordion menu.
    May i know if the design is responsive, and we put auto height and width for buttons and list boxes, we cannot get the height and width in code.
    Any suggestion son that?

    Thanks,
    Sujith.

    (1) 
  2. MANOJ KUMAR Post author

    hi Sujith

    thanks for your comments and sorry for the late response.

    this will be responsive , if you set that inside the gridpanel component

    Regards,
    Manojkumar

    (0) 

Leave a Reply