Small screens

Walter · 2016-12-22 18:19:13

Hi folks,
is there a way (tool, hack, alternate css, ...) to get a better visualization of ReportServer dashboards in small screens (cell phones, tablets...) ?

karolina · 2016-12-22 20:53:12

Hi Walter,

This is a very interesting question and something I'd like to explore myself.

At this point I see the following options:

1. A single-column dashboard with one HTML dadget. The dadget would be a single web-page, with all the tricks that any responsive and mobile-friendly web page uses + jQuery + javascript libraries for data visualisations.

Here you'll find some hints how to prepare such a page:

Adding Charts to your ReportServer Dashboard
Frequently used reports dadget

2. A single-column dashboard with a script report that produces HTML output (a single web-page with all the tricks (...)). (RS EE only)

Maybe some pixel-perfect reporting engines or Saiku charts could be an option as well (here I can't help much as I don't use them at all).

To be more specific I would need to know what exactly you'd like to have on dashboards and some more details (RS version - CE or EE, reporting engines you use etc.).

Hope it helps.
Karolina

Walter · 2016-12-23 11:08:07

Hi Karolina. Thank you.
I will think about your suggestions but IMO we should think about a more general solutions, since the specific solutions are... specific solutions :-)

For example: using CSS (suppress frames borders, menus, etc.) + one column dashboard + script reports (with jqplot) are a good solution for my current case but the login screen is a problem. I will explore a bit more because I don't know yet the level of CSS customization RS supports.

Best regards,

karolina · 2016-12-23 11:50:41

Hi Walter,

Yes, the login screen on mobile phone is definitely too small.

I will also see what could be done here (by CSS or by creating a custom login page. In RS 2.2 the latter was possible; I'd need to check if it applies to RS 3.0 as well.)

For general / specific solutions: yes, you are right. I didn't mention the most general solutions like making RS smaller-screen friendly in general or native client apps for cell phones or web apps with url-embedded reports, as none of it could be applied quickly :-)

Karolina

karolina · 2016-12-24 14:34:19

Hi,

To follow up:

To make the login page more usable on cell-phones, you need to modify ReportServer.html file in the webapps/reportserver directory by adding

<meta name="viewport" content="width=device-width, initial-scale=1.0">

to the <head> section.

Then you may modify the theme.cf file in fileserver/etc/ui folder. The file contains <css> section and this is a place where you put your custom CSS code.
(This will work only in the EE edition).

My CSS section looks like that:

 
<css>

    .rs-header {
        border-bottom: 5px solid #666666 !important;
    }
    
    .icon-rs-Report {
        color: #2189bb;
    
    }
    
    .icon-rs-Server {
        color: #808080;
    
    }
    
    /* bright backgroud on the login page */
    .GFEJNP2BDQ {
        background-color: #FCFCFC;
    }
    
    /* unvisible RS square on the login page */
    
    .icon-rs-logo-square {
        color: #FCFCFC;
    
    }
    
    .icon-rs-logo {
        color: #808080;
    
    }
    
    .gwt-InlineLabel {
        font-size: 0.75em;
    
    }
    
    .gwt-Label .rs-paramview-ld {
        color: #004466;
    }
    
    /* cell phones */
    
    @media only screen and (max-device-width: 500px) {
    
        /* login page */
        .icon-rs-logo {
            color: #2189bb;
            font-size: 50%;
        }
    
        .rs-login-edition {
            color: #c1ddf1;
            font-size: medium;
        }
    
        .icon-rs-logo-square {
            color: #276796;
            font-size: medium;
        }
    
    }

<css>

What I did was to make some parts of the login page smaller, so they don't overlap. Apart from it I changed the theme.
The actual look will depend on device.

I tried manipulating margins and sizes of some div elements, but it didn't work well.

Hope it helps.
Karolina

Walter · 2017-01-06 12:52:08

Thank you Karolina.
I just tried but I didn't like very much the result. I don't know GWT but I will take a look to see if there is some solution to get a better result. Anyway I will share anything I find.

karolina · 2017-01-12 21:02:43

Hi Walter,

My suggestion would be to create a list of things you'd like to see improved and send it to Eduardo and Jan.
This could work better than trying to change styling using cryptic GWT CSS classes :-)

Karolina

Walter · 2017-01-13 11:53:31

You're right :-)

Walter · 2017-01-13 16:20:03

Just remembered: the code that you sent worked better with a small change, I removed ", initial-scale=1.0". You can see the result here:

https://drive.google.com/file/d/0B5SrR6 … p=drivesdk

Last edited by Walter (2017-01-13 16:20:21)

karolina · 2017-01-13 17:40:03

Thanks!
For some reason you've got a mixture of standard theme and my theme (mine is blue and white, with some grey elements).

The full theming file is here:

<?xml version="1.0" encoding="UTF-8"?>
<!--
 ReportServer Configuration File
 filename: ui/theme.cf
 
 Allows to adapt the look and feel of ReportServer
 This file is only active in ReportServer Enterprise Edition 
-->
<configuration>
  <theme>
       
    <colors>
      <color name="white" color="#FFFFFF"/> 
      <color name="black" color="#000000"/>       
      
      <color name="grey" color="#808080"/> 
      <color name="grey" color="#808080"/>
      <color name="blackpetrol" color="#00334D"/>
      
      <color name="blue" color="#2189bb"/>
      
    </colors>
    
    <colorMapping>
        <map useFor="header.bg" colorRef="white"/>
        <map useFor="header.text.active" colorRef="blue"/>
        <map useFor="header.text.inactive" colorRef="blackpetrol"/>
        
        
        <map useFor="body.bg.light" colorRef="white"/>          
    
        <map useFor="hl.dark.bg" colorRef="grey"/>
        <map useFor="hl.light.bg" colorRef="grey"/>        
        <map useFor="hl.light.text" colorRef="white"/>                

    </colorMapping>
    
    <css>
     .rs-header {
    border-bottom: 5px solid #666666 !important;
}

.icon-rs-Report {
    color: #2189bb;

}

.icon-rs-Server {
    color: #808080;

}

/* bright backgroud of the login page */
.GFEJNP2BDQ {
    background-color: #FCFCFC;
}

.icon-rs-logo-square {
    color: #FCFCFC;

}

.icon-rs-logo {
    color: #2189bb;

}

.gwt-InlineLabel {
    font-size: 0.75em;

}

.gwt-Label .rs-paramview-ld {
    color: #004466;
}

/* cell phones */

@media only screen and (max-device-width: 500px){

    /* login page */
    .icon-rs-logo {
        color: #2189bb;
        font-size: 50%;
    }

    .rs-login-edition {
        color: #c1ddf1;
        font-size: medium;
    }

    .icon-rs-logo-square {
        color: #276796;
        font-size: medium;
    }


}
           
    </css>
  </theme>
</configuration>

ReportServer Forum

Announcement

Migration of this forum

Migration des Forums

#1 2016-12-22 18:19:13

Small screens

#2 2016-12-22 20:53:12

Re: Small screens

#3 2016-12-23 11:08:07

Re: Small screens

#4 2016-12-23 11:50:41

Re: Small screens

#5 2016-12-24 14:34:19

Re: Small screens

#6 2017-01-06 12:52:08

Re: Small screens

#7 2017-01-12 21:02:43

Re: Small screens

#8 2017-01-13 11:53:31

Re: Small screens

#9 2017-01-13 16:20:03

Re: Small screens

#10 2017-01-13 17:40:03

Re: Small screens

Board footer