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.
Hi Karol,
Very useful post. Do you know if there is a parameter to disable Message Popup?
Thanks,
Juan Carlos
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
Thanks a lot!
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
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
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
Thank you for your answer. I try to explain myself better with some images.
This is the table context menù:
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
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
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
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
Hi Karol,
Do you know how the messages from the message box can be exported or how to view more than 15 messages in the message popup?
thanks and regards,
Maria
Hi Karol,
Can you direct me to the attachments referred to in the resizing of the message box?
Hi All,
has anyone tried to read a message from the list of messages and to display it in a textbox on the screen?
What I mean: instead of pushing the user to click on the messages button to call the standard message popover, to access the list of messages using java-script, and to extract the needed message from there and to show it on the screen straight away. So the user doesn't need to click on the standard button to see if there is an important info for him.
This is needed when using planning objects in Lumira, such as a planning sequence. So if a message was passed from the planning sequence, I would like to read it and to show it to the user on the main screen.
Thanks in advance,
Taras