Customising AskiaVista Reader web reports
AskiaVista Reader is AskiaVista's rendering engine for published portfolios.
It allows for custom layouts, and much improves the speed & response times compared to AskiaVista's legacy Portfolio engine.
Choose a theme & publish
When publishing a Portfolio, a Theme picker displays, listing themes that are available on the AskiaVista server:
Once specified, the portfolio can be viewed via its URL with its selected Theme:
Create a new theme
You can customize and/or create AskiaVista Reader themes.
To do so you need direct access to the AskiaVista server, so as to browse to the AskiaVistaReader application folder, by default:
C:\Inetpub\wwwroot\AskiaVistaReader\Themes\
We deliver three themes by default:
- AskiaBlue
- AskiaLight
- Default
To create a new theme you will need to copy & paste one of these folders, and give it a new name.
Inside the new theme folder, you can now customise your new theme's files - this requires a working understanding of HTML & CSS , if you don't have such knowledge, we recommend you send the files to a web designer / developer.
Customisable | Required | |
ajax-loader.gif | ✔ | ✗ |
background-welcome.png | ✔ | ✗ |
Chart.png | ✔ | ✗ |
complogo.png | ✔ | ✗ |
gradient.png | ✔ | ✗ |
Preview.png | ✔ | ✗ |
Styles.css | ✔ | ✔ |
Table.png | ✔ | ✗ |
Template.htm | ✔ | ✔ |
Thumbnail.png | ✔ | ✗ |
Template.html
You can modify this page so as to implement your own layout, style & greeting message.
We recommend abstaining from modifying the code between lines 3 to 46.
Also, you will notice ## ## flags for pulling dynamic information, we also recommend you abstain from modifying these.
<head> <title>AskiaVista - Portfolio Reader</title> <link rel="Stylesheet" href="##Themes##/Styles.css" /> <script type="text/javascript" src="Scripts/jquery.js"></script> <script type="text/javascript" src="Scripts/jquery.blockUI.js"></script> <script type="text/javascript"> $(document).ready(function(){ //Manage the flash message if (!isStringEmpty($('.flash').html())) $('.flash').css({display:'block'}); if (!isStringEmpty($('.root').html())) $('.download').css({display:'block'}); //Resize the some elements var hfsz=$('#header').height() + $('#footer').height() + 20; var mh=$(window).height() - hfsz; $('.result, .sidebar').height(mh); //Manage the light-box window (use the blockUI http://jquery.malsup.com/block) $('.portfolioitemlink').click(function() { $.blockUI({ message: $('#loading'), css: { backgroundColor : 'black', border: 'none', padding: '15px', '-webkit-border-radius': '10px', '-moz-border-radius': '10px' } }); }); }); function isStringEmpty(text){ if (text ==null || text==undefined )return true; var strText=text + ""; strText= strText.replace(/\s/gi,''); return (strText.length ==0); } function d(id){ return document.getElementById(id); } function display(url){ $('#explanation').hide(); $('#result').show(); $('#result').height($('.result').height()); d('result').src=url; } </script> </head> <body> <div id="header"> <a href="http://www.askia.com"> <img src="##Themes##/CompLogo.png" alt="Askia" border="0" /> </a> <span id="title">##PortfolioName##</span> </div> <div class="flash">##FlashMessage##</div> <div class="sidebar"> <h3>List of portfolio elements</h3> <div class="download"> <a href="#" onclick="window.open('##PortfolioDownload##');">Download</a> </div> <div class="nav"> <ul class="root"> ##PortfolioItems## </ul> </div> </div> <div class="result"> <div id="explanation"> <h1>Welcome to the AskiaVista portfolio reader</h1> <h2>##PortfolioName##</h2> <p>This page was generated by AskiaVista to allow to view survey results.</p> <p>Use the left-hand side navigation to display the contents of the portfolio (tables & charts)</p> <p>Use the 'Download' link, located in the left sidebar, to export the entire portfolio to a MS Excel file.</p> <p>Have a nice day,</p> <p>The askia team.</p> </div> <iframe id="result" style="display:none" frameborder="0" scrolling="auto" width="100%" height="100%"></iframe> </div> <div id="loading" style="display:none"> <h1><img src="##Themes##/ajax-loader.gif" /> Please wait during the process ...</h1> </div> <div id="footer"> <span id="copyright">Copyright © Askia SAS - All rights reserved, 2013</span> </div> </body>
Styles.css
Modify this file as you see fit, i.e. in accordance with classes used, added and/or removed from the Template.htm file.
body { margin:0; font-family:arial, sans-serif; } ul, ul li { margin:0; padding:0; } #header { background:url('gradient.png'); height:50px; } #header a img { margin-left:5px; margin-top:3px; } #title { font-size:22pt; font-weight:bold; color: #ffffff; vertical-align:top; position:relative; left:15px; top:10px; } #footer { position:fixed; height:30px; bottom:0; left:0; width:100%; background-color:#24508e; } #explanation { height:100%; background-image:url('background-welcome.png'); background-repeat:no-repeat; background-attachment:fixed; background-position:center; } #copyright { margin-right:20px; float:right; font-size:10pt; color:white; position:relative; top:7px; } #loading{ background:black; color:white; } #loading h1 { font-size:15pt; font-weight:normal; } .flash{ background:pink; color:red; border: 2px solid red; width:80%; padding:5px; margin:5px; display:none; } .sidebar { margin:15px 0 0 5px; float:left; width:23%; border:1px solid #24508e; overflow:auto; } .sidebar h3 { float:left; margin-top:8px; margin-left:10px; } .sidebar .download { margin:5px; padding:5px; float:right; font-style:italic; font-size:10pt; display:none; } .sidebar .nav { clear:both; } .sidebar .root { font-size:10pt; list-style-type:none; margin-left:5px; } li img { padding-right:8px; cursor:pointer; } .pages { list-style-type:none; padding:0; margin-left:10px; } .pages li { margin-top:2px; white-space: nowrap; } .portfolioitem { margin-top:5px; } .result{ margin:15px 5px; float:left; width: 74%; padding-left:2px; border:1px solid #24508e; overflow:hidden; }