Scroll

Customising AskiaVista Reader web reports

Follow
Summary This article describes how to customize askiavista reader web reports.
Applies to askiavista
Written for Data processor
Keywords reader; web report; vista; askiavista 

Table of contents:


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.

I. 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:



II. Create a new theme

You can customise 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 we will 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 abstain from modifying 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 &copy; 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;
}

Have more questions? Submit a request

Comments