Modification of Design Studio Message Popup

Purpose

You want to change sizes of the message popup for better display of longer messages.

Technical Background

Message popup can be modified by use of CSS. You have to overwrite few classes and change the correpsonding sizes.

“Default” Size

This is how the default message popup is looking like in notification and with content (27 messages). Message Popup is displaying maximum of 15 messages.

The corresponding CSS

This example is mainly to adjust the sizes, but you can experiment with different properties.


.sapzenmessageview-PopupContainer {
  width: 800px !important;
  height: 520px !important;
}
.sapzenmessageview-PopupContainerHeader {
  width: 800px !important;
}
.sapzenmessageview-RowRepeaterRow {
  width: 800px !important;
}
.sapzenmessageview-RowRepeaterRow>.sapUiBorderLayoutBottom>.sapUiTv {
  width: 800px !important;
}
.sapzenmessageview-HeaderText {
  /* set to popup size - 60px*/
  width: 740px !important;
}

Message Popup After the Change

How To Use the Example?

In Attachment you can find the application and CSS file. The examples above were created in local mode.

You have to create a folder in local repository “MESSAGE” and copy there the attached files. The txt extension needs to be removed.

10 Comments

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

Juan Carlos Velez August 20, 2014 at 10:28 am

Hi Karol,

Very useful post. Do you know if there is a parameter to disable Message Popup?

Thanks,

Juan Carlos

like (0)
1. Karol Kalisz Post authorSeptember 9, 2014 at 10:30 am
  
  Hello Juan,
  
  yes, this should be possible by:
  
  * switching off the messages in application properties (Application -> Property: Displayed Message Types -> Value: None)
  
  or
  
  * taking the classes as listed above and use CSS by adding attribute:
  
  visibility: hidden;
  
  Regards, Karol
  
  like (0)
  1. Juan Carlos Velez September 9, 2014 at 4:09 pm
    
    Thanks a lot!
    
    like (0)
  2. Hans-Peter Fladerer March 22, 2017 at 3:00 pm
    
    Hi Karol,
    
    do you know a way to add attribute “visibility hidden” and delete it for the message notifier box on runtime level?
    
    I am only able to show or hide the message notifier box (sapzenmessageview-ButtonLevelImageInfo) staticly.
    
    Thanks and bes regards
    
    HP
    
    like (0)
Giulia Sogaro March 18, 2015 at 4:57 pm

Hi,

I would like to change sizes of the popup filter panel that appears when I click on “Filter Members” from a Crossbar Context Menù.

Do you know what class I have to modify?

Regards,

Giulia Sogaro

like (0)
1. Karol Kalisz Post authorMarch 22, 2015 at 10:38 pm
  
  Hi,
  
  have you checked this blog?
  
  SAP Design Studio Tips & Tricks – Tweaking Navigation Mode in a Filter Panel
  
  You mean the panel which appears on the right side, you want to just resize it?
  
  I need to check if there is a good addressable class, you can make it also on your own using the developer tools from chrome or other browsers.
  
  Karol
  
  like (0)
  1. Giulia Sogaro March 25, 2015 at 8:34 am
    
    Thank you for your answer. I try to explain myself better with some images.
    
    This is the table context menù:
    
    It works fine, but when I click on “Filter Members” I see this:
    
    The popup is too long and I can not see it all. I would like to modify its height or position.
    
    Do you know how to do it?
    
    Best regards,
    
    Giulia Sogaro
    
    like (0)
Ganesh Narayan Gupta December 30, 2015 at 12:42 pm

Hi Karol,

I was wondering if it is possible to modify the position of prompt dialogue box using some css coding.

Let me explain the situation. I get the prompt dialogue box when clicked on the filter icon (filter icon is situated at top of the page in left). But this prompt box is always appearing in the middle of the screen and it is draggable. So can I place it just below the filter icon and make it static too? I have already tried some css codes, but the prompt box was unaffected. Do you think it is possible to do till design studio v1.5 ?

Thanks,

Ganesh

like (0)
1. Karol Kalisz Post authorJanuary 8, 2016 at 4:04 pm
  
  Hi,
  
  basically also the prompt dialog can be oeverwritten. I have made small test. you need:
  
  * app with one data source with mandatory variable – this brings up the prompt dialog
  
  * create CSS file and connect to your app.
  
  the effect is:
  
  achieved by adding this CSS (it is based on ID, so you can make it better):
  
  /* Custom CSS */
  
  #__row1_zenDlgTitleCellTextView {
  
  font-size: 40px!important;
  
  background-color: yellow!important;
  
  }
  
  you see, this is how you can load the CSS and by finding the right html tags overwrite some parts. Of course I belive not all are easy to overwrite and you need to consider also that this dialog can change some day and it will break your layout.
  
  Karol
  
  like (0)
  1. Ganesh Narayan Gupta January 8, 2016 at 5:03 pm
    
    Hey Karol,
    
    I was trying to fix the position of the prompt dialogue box. Your code was very helpful. I did it successfully using the code below:
    
    #prompt_div_id{
    
    top: 120px !important;
    
    left: 10px !important;
    
    }
    
    Thank you for your time.
    
    ~Ganesh
    
    like (0)