You are not logged in.
Pages: 1
Hi folks,
is there a way (tool, hack, alternate css, ...) to get a better visualization of ReportServer dashboards in small screens (cell phones, tablets...) ?
Walter
Offline
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
Offline
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,
Walter
Offline
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
Offline
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
Offline
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.
Walter
Offline
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
Offline
You're right :-)
Walter
Offline
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)
Walter
Offline
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>Offline
Pages: 1