Skip to Content
Actions

Modification of Design Studio Message Popup

August 11, 2014 | 1,347 Views |
 css stylessap businessobjects design studio
Follow RSS

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.

Message_Default.png


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

Message_Resized.png

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.

To report this post you need to login first.

12 Comments

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

    1. Karol Kalisz Post author

      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

      (0) 
      2. Hans-Peter Fladerer

        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

        (0) 
  2. Giulia Sogaro

    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

    (0) 
      1. Giulia Sogaro

        Thank you for your answer. I try to explain myself better with some images.

        This is the table context menù:

        context menu1.PNGIt works fine, but when I click on “Filter Members” I see this:

        context menu2.PNG

        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

        (0) 
  3. Former Member

    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

    (0) 
    1. Karol Kalisz Post author

      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:

      pro1.PNG

      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

      (0) 
      1. Former Member

        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

        (0) 
  4. Maria Ruseva

    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

    (0) 

Leave a Reply